Core Animation Part I: Introduction 核心动画框架入门

原文：

https://www.invasivecode.com/weblog/core-animation-part-i-warm-up/

毫无疑问，Core Animation（核心动画框架）是我最喜欢的框架之一。因为它为你提供了一些强有力的工具来实现那些你想要创造的东西。

在以前的帖子里，我曾经展示过一点如何使用CoreGraphics的技巧，现在的话是时候给你们看看如何使用CoreAnimation框架了。这样你们就能结合这两个框架搞一些好看的东西出来。

你会发现用这个框架做简单的事情是很容易的，但是当你想制作非常复杂的动画时，你需要了解一些几何和数学。然而，CA（Core Animation）的目标不是让你在你的接口搞出一堆复杂和混乱的动画。相反，从可用性的观点来说你应该使用CA提高你的应用程序的可用性，并使其更直观。我想展示如何倾尽这个框架的全部力量。但别担心，我会一步一步走。

 

所以，首先让我们从一些定义开始。什么是核心动画？苹果文件说：

核心动画是把图形的绘制，投影，和动画集合到一起的一个Objective-C类的集合。它使用先进的合成效果提供了流畅的动画，于此同时保留了一个抽象的layer，这对使用Application Kit和Cocoa Touch视图架构的开发者来说是很熟悉的。

 

我相信你理解啥是图形渲染，投影和动画，但，他们真正的意思是什么？分层抽象又是啥？在本教程中，我们会找出答案。我希望你会喜欢它。

在我们开始之前，我想提一些学习这个框架的可用资源。首先，你肯定有苹果的文档吧，更确切地说，你应该寻找：

•Core AnimationProgramming Guide; and

•Core AnimationCookbook

另一个资源是对于CA的一个快速启动demo，但它或多或少有一些和编程指南相同的风格。所以，再次强调一下，它是有用的，但只有你已经知道了一些核心动画的时候。

 

基本视图动画

iOS SDK自带的一些方法，使动画很容易实现。看看UIView类，有一大堆得方法被分类在视图动画和带block块的视图动画下，这些都是你在这个范围可以用的。但是大部分在AnimatingViews下的方法都有些老了。苹果官方也不建议你在iOS4之后用它。所以，我不准备告诉你这些方法怎么用。从iOS4开始，你应该用那些被列在AnimatingViews with Block Objects.(带block块的动画方法)中的方法。

 

下面的代码演示了如何使用这些方法。让我们从最简单的方法开始。

我们将移动一个视图从它的当前位置(不是在block中的那个位置)到一个最终位置（200,300）。

Swift：

[UIView animateWithDuration:3.0animations:^{

   [myView setCenter:CGMakePoint(200,300)];

};

 

假设我有一个视图（myView）被放在（20,30）点上。CA用屏幕左上角的点作为坐标系原点，x和y分别按从上到下，从左到右增长。所以，屏幕的左上角有坐标（0，0），它表示坐标系原点。

先前的几行代码设置动画的持续时间和myView视图的最终位置。

如果你想在同一时间做一个改变多个视图属性（例如，视图位置，不透明度和大小）的动画，你可以直接在block里设置这些属性的新值。缺点是不同的属性将同时动画。即使你再像之前的代码一样重新创建一个block代码，然后每个block里只改变一个属性，他还是会在同一个运行周期（或者两个）被执行，但是不管咋样，没有火眼金睛你是看不出来的。这种烦人的behavior需要更复杂的技术来解决。

 

现在这种动画在大多数情况下已经够用了，能让你的界面看起来生动的多，而且既然它这么容易实现，你可以在需要时随时撸出一个来而且不需要写太多代码。

 

好，让我们用AnimationViews写个具体的例子。因此，启动Xcode，创建一个基于视图基础iPhone的项目。给他命名，BasicAnimation！在BasicAnimationViewController.xib文件里，在主视图的（130,130）点上加一个100*100的小视图，背景色设为红色。你应该得到这样一个东西。（这里是一张图，裂了…）。

 

在BasicAnimationViewController类，把刚刚你创建的那个红色视图拖线拖出来。在添加一个点击事件，命名为fire！在button的点击事件里加入下面这些代码：

Swift：

[UIViewanimateKeyframesWithDuration:3.0

                              delay:0.0

   options:(UIViewAnimationCurveEaseInOut |UIViewAnimationOptionAutoreverse)

                         animations:^{

                             [self.movingViewsetCenter:CGPointMake(300, 300)];

                         }

                         completion:nil];

 

Build（其实这类单词翻译过来也不太精确，还是不翻译了）然后运行该项目，当程序启动，点击按钮，你会看到红色视图移动到左下角，然后又原路返回。你也会注意到，一旦动画完成，视图跳转到它的最后位置。没什么不对的，因为那就是我们在之前的代码中指定的位置。如果你希望视图停留到初始位置，你必须将视图位置设置为它的初始值。

 

现在，可以试着去试验一些UIView提供的不同的方法了。我知道你并没有把所有事情搞清楚，不过没关系，你以后会明白的（2333）。

 

下一次，我们会看看不同类型的动画。为了让事情变得更灵活，苹果提供给我们一大堆的方法，全被收集在了CoreAnimation框架里。