• 【转】iOS-Core-Animation-Advanced-Techniques（四）

    原文：http://www.cocoachina.com/ios/20150105/10812.html

    隐式动画和显式动画

    隐式动画

    按照我的意思去做，而不是我说的。 -- 埃德娜，辛普森

    我们在第一部分讨论了Core Animation除了动画之外可以做到的任何事情。但是动画师Core Animation库一个非常显著的特性。这一章我们来看看它是怎么做到的。具体来说，我们先来讨论框架自动完成的隐式动画（除非你明确禁用了这个功能）。

    事务

    Core Animation基于一个假设，说屏幕上的任何东西都可以（或者可能）做动画。动画并不需要你在Core Animation中手动打开，相反需要明确地关闭，否则他会一直存在。

    当你改变CALayer的一个可做动画的属性，它并不能立刻在屏幕上体现出来。相反，它是从先前的值平滑过渡到新的值。这一切都是默认的行为，你不需要做额外的操作。

    这看起来这太棒了，似乎不太真实，我们来用一个demo解释一下：首先和第一章“图层树”一样创建一个蓝色的方块，然后添加一个按钮，随机改变它的颜色。代码见清单7.1。点击按钮，你会发现图层的颜色平滑过渡到一个新值，而不是跳变（图7.1）。

    清单7.1 随机改变图层颜色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIView *layerView;
    @property (nonatomic, weak) IBOutlet CALayer *colorLayer;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //create sublayer
        self.colorLayer = [CALayer layer];
        self.colorLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
        self.colorLayer.backgroundColor = [UIColor blueColor].CGColor;
        //add it to our view
        [self.layerView.layer addSublayer:self.colorLayer];
    }
    - (IBAction)changeColor
    {
        //randomize the layer background color
        CGFloat red = arc4random() / (CGFloat)INT_MAX;
        CGFloat green = arc4random() / (CGFloat)INT_MAX;
        CGFloat blue = arc4random() / (CGFloat)INT_MAX;
        self.colorLayer.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0].CGColor;                                                                                       ?
    }
    @end

    7.1.jpeg

    图7.1 添加一个按钮来控制图层颜色

    这其实就是所谓的隐式动画。之所以叫隐式是因为我们并没有指定任何动画的类型。我们仅仅改变了一个属性，然后Core Animation来决定如何并且何时去做动画。Core Animaiton同样支持显式动画，下章详细说明。

    但当你改变一个属性，Core Animation是如何判断动画类型和持续时间的呢？实际上动画执行的时间取决于当前事务的设置，动画类型取决于图层行为。

    事务实际上是Core Animation用来包含一系列属性动画集合的机制，任何用指定事务去改变可以做动画的图层属性都不会立刻发生变化，而是当事务一旦提交的时候开始用一个动画过渡到新值。

    事 务是通过CATransaction类来做管理，这个类的设计有些奇怪，不像你从它的命名预期的那样去管理一个简单的事务，而是管理了一叠你不能访问的事 务。CATransaction没有属性或者实例方法，并且也不能用+alloc和-init方法创建它。但是可以用+begin和+commit分别来 入栈或者出栈。

    任何可以做动画的图层属性都会被添加到栈顶的事务，你可以通过+setAnimationDuration:方法设置当前事务的动画时间，或者通过+animationDuration方法来获取值（默认0.25秒）。

    Core Animation在每个run loop周期中自动开始一次新的事务（run loop是iOS负责收集用户输入，处理定时器或者网络事件并且重新绘制屏幕的东西），即使你不显式的用[CATransaction begin]开始一次事务，任何在一次run loop循环中属性的改变都会被集中起来，然后做一次0.25秒的动画。

    明白这些之后，我们 就可以轻松修改变色动画的时间了。我们当然可以用当前事务的+setAnimationDuration:方法来修改动画时间，但在这里我们首先起一个新 的事务，于是修改时间就不会有别的副作用。因为修改当前事务的时间可能会导致同一时刻别的动画（如屏幕旋转），所以最好还是在调整动画之前压入一个新的事 务。

    修改后的代码见清单7.2。运行程序，你会发现色块颜色比之前变得更慢了。

    清单7.2 使用CATransaction控制动画时间

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    - (IBAction)changeColor
    {
        //begin a new transaction
        [CATransaction begin];
        //set the animation duration to 1 second
        [CATransaction setAnimationDuration:1.0];
        //randomize the layer background color
        CGFloat red = arc4random() / (CGFloat)INT_MAX;
        CGFloat green = arc4random() / (CGFloat)INT_MAX;
        CGFloat blue = arc4random() / (CGFloat)INT_MAX;
        self.colorLayer.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0].CGColor;
        ?//commit the transaction
        [CATransaction commit];
    }

    如 果你用过UIView的动画方法做过一些动画效果，那么应该对这个模式不陌生。UIView有两个方 法，+beginAnimations:context:和+commitAnimations，和CATransaction的+begin 和+commit方法类似。实际上在+beginAnimations:context:和+commitAnimations之间所有视图或者图层属性 的改变而做的动画都是由于设置了CATransaction的原因。

    在iOS4中，苹果对UIView添加了一种基于block的动画方法：+animateWithDuration:animations:。这样写对做一堆的属性动画在语法上会更加简单，但实质上它们都是在做同样的事情。

    CATransaction 的+begin和+commit方法在+animateWithDuration:animations:内部自动调用，这样block中所有属性的改变 都会被事务所包含。这样也可以避免开发者由于对+begin和+commit匹配的失误造成的风险。

    完成块

    基 于UIView的block的动画允许你在动画结束的时候提供一个完成的动作。CATranscation接口提供 的+setCompletionBlock:方法也有同样的功能。我们来调整上个例子，在颜色变化结束之后执行一些操作。我们来添加一个完成之后的 block，用来在每次颜色变化结束之后切换到另一个旋转90的动画。代码见清单7.3，运行结果见图7.2。

    清单7.3 在颜色动画完成之后添加一个回调

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    - (IBAction)changeColor
    {
        //begin a new transaction
        [CATransaction begin];
        //set the animation duration to 1 second
        [CATransaction setAnimationDuration:1.0];
        //add the spin animation on completion
        [CATransaction setCompletionBlock:^{
            //rotate the layer 90 degrees
            CGAffineTransform transform = self.colorLayer.affineTransform;
            transform = CGAffineTransformRotate(transform, M_PI_2);
            self.colorLayer.affineTransform = transform;
        }];
        //randomize the layer background color
        CGFloat red = arc4random() / (CGFloat)INT_MAX;
        CGFloat green = arc4random() / (CGFloat)INT_MAX;
        CGFloat blue = arc4random() / (CGFloat)INT_MAX;
        self.colorLayer.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0].CGColor;
        //commit the transaction
        [CATransaction commit];
    }

    7.2.jpeg

    图7.2 颜色渐变之完成之后再做一次旋转

    注意旋转动画要比颜色渐变快得多，这是因为完成块是在颜色渐变的事务提交并出栈之后才被执行，于是，用默认的事务做变换，默认的时间也就变成了0.25秒。

    图层行为

    现在来做个实验，试着直接对UIView关联的图层做动画而不是一个单独的图层。清单7.4是对清单7.2代码的一点修改，移除了colorLayer，并且直接设置layerView关联图层的背景色。

    清单7.4 直接设置图层的属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIView *layerView;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //set the color of our layerView backing layer directly
        self.layerView.layer.backgroundColor = [UIColor blueColor].CGColor;
    }
    - (IBAction)changeColor
    {
        //begin a new transaction
        [CATransaction begin];
        //set the animation duration to 1 second
        [CATransaction setAnimationDuration:1.0];
        //randomize the layer background color
        CGFloat red = arc4random() / (CGFloat)INT_MAX;
        CGFloat green = arc4random() / (CGFloat)INT_MAX;
        CGFloat blue = arc4random() / (CGFloat)INT_MAX;
        self.layerView.layer.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0].CGColor;
        //commit the transaction
        [CATransaction commit];
    }

    运行程序，你会发现当按下按钮，图层颜色瞬间切换到新的值，而不是之前平滑过渡的动画。发生了什么呢？隐式动画好像被UIView关联图层给禁用了。

    试想一下，如果UIView的属性都有动画特性的话，那么无论在什么时候修改它，我们都应该能注意到的。所以，如果说UIKit建立在Core Animation（默认对所有东西都做动画）之上，那么隐式动画是如何被UIKit禁用掉呢？

    我们知道Core Animation通常对CALayer的所有属性（可动画的属性）做动画，但是UIView把它关联的图层的这个特性关闭了。为了更好说明这一点，我们需要知道隐式动画是如何实现的。

    我们把改变属性时CALayer自动应用的动画称作行为，当CALayer的属性被修改时候，它会调用-actionForKey:方法，传递属性的名称。剩下的操作都在CALayer的头文件中有详细的说明，实质上是如下几步：

    • 图层首先检测它是否有委托，并且是否实现CALayerDelegate协议指定的-actionForLayer:forKey方法。如果有，直接调用并返回结果。

    • 如果没有委托，或者委托没有实现-actionForLayer:forKey方法，图层接着检查包含属性名称对应行为映射的actions字典。

    • 如果actions字典没有包含对应的属性，那么图层接着在它的style字典接着搜索属性名。

    • 最后，如果在style里面也找不到对应的行为，那么图层将会直接调用定义了每个属性的标准行为的-defaultActionForKey:方法。

    所以一轮完整的搜索结束之后，-actionForKey:要么返回空（这种情况下将不会有动画发生），要么是CAAction协议对应的对象，最后CALayer拿这个结果去对先前和当前的值做动画。

    于 是这就解释了UIKit是如何禁用隐式动画的：每个UIView对它关联的图层都扮演了一个委托，并且提供了 -actionForLayer:forKey的实现方法。当不在一个动画块的实现中，UIView对所有图层行为返回nil，但是在动画block范围 之内，它就返回了一个非空值。我们可以用一个demo做个简单的实验（清单7.5）

    清单7.5 测试UIView的actionForLayer:forKey:实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIView *layerView;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //test layer action when outside of animation block
        NSLog(@"Outside: %@", [self.layerView actionForLayer:self.layerView.layer forKey:@"backgroundColor"]);
        //begin animation block
        [UIView beginAnimations:nil context:nil];
        //test layer action when inside of animation block
        NSLog(@"Inside: %@", [self.layerView actionForLayer:self.layerView.layer forKey:@"backgroundColor"]);
        //end animation block
        [UIView commitAnimations];
    }
    @end

    运行程序，控制台显示结果如下：

    1
    $ LayerTest[21215:c07] Outside: $ LayerTest[21215:c07] Inside:

    于是我们可以预言，当属性在动画块之外发生改变，UIView直接通过返回nil来禁用隐式动画。但如果在动画块范围之内，根据动画具体类型返回相应的属性，在这个例子就是CABasicAnimation（第八章“显式动画”将会提到）。

    当 然返回nil并不是禁用隐式动画唯一的办法，CATransacition有个方法叫做+setDisableActions:，可以用来对所有属性打开 或者关闭隐式动画。如果在清单7.2的[CATransaction begin]之后添加下面的代码，同样也会阻止动画的发生：

    1
    [CATransaction setDisableActions:YES];

    总结一下，我们知道了如下几点

    • UIView 关联的图层禁用了隐式动画，对这种图层做动画的唯一办法就是使用UIView的动画函数（而不是依赖CATransaction），或者继承 UIView，并覆盖-actionForLayer:forKey:方法，或者直接创建一个显式动画（具体细节见第八章）。

    • 对于单独存在的图层，我们可以通过实现图层的-actionForLayer:forKey:委托方法，或者提供一个actions字典来控制隐式动画。

    我们来对颜色渐变的例子使用一个不同的行为，通过给colorLayer设置一个自定义的actions字典。我们也可以使用委托来实现，但是actions字典可以写更少的代码。那么到底改如何创建一个合适的行为对象呢？

    行为通常是一个被Core Animation隐式调用的显式动画对象。这里我们使用的是一个实现了CATransaction的实例，叫做推进过渡。

    第八章中将会详细解释过渡，不过对于现在，知道CATransition响应CAAction协议，并且可以当做一个图层行为就足够了。结果很赞，不论在什么时候改变背景颜色，新的色块都是从左侧滑入，而不是默认的渐变效果。

    清单7.6 实现自定义行为

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIView *layerView;
    @property (nonatomic, weak) IBOutlet CALayer *colorLayer;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //create sublayer
        self.colorLayer = [CALayer layer];
        self.colorLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
        self.colorLayer.backgroundColor = [UIColor blueColor].CGColor;
        //add a custom action
        CATransition *transition = [CATransition animation];
        transition.type = kCATransitionPush;
        transition.subtype = kCATransitionFromLeft;
        self.colorLayer.actions = @{@"backgroundColor": transition};
        //add it to our view
        [self.layerView.layer addSublayer:self.colorLayer];
    }
    - (IBAction)changeColor
    {
        //randomize the layer background color
        CGFloat red = arc4random() / (CGFloat)INT_MAX;
        CGFloat green = arc4random() / (CGFloat)INT_MAX;
        CGFloat blue = arc4random() / (CGFloat)INT_MAX;
        self.colorLayer.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0].CGColor;
    }
    @end

    7.3.jpeg

    图7.3 使用推进过渡的色值动画

    呈现与模型

    CALayer的属性行为其实很不正常，因为改变一个图层的属性并没有立刻生效，而是通过一段时间渐变更新。这是怎么做到的呢？

    当你改变一个图层的属性，属性值的确是立刻更新的（如果你读取它的数据，你会发现它的值在你设置它的那一刻就已经生效了），但是屏幕上并没有马上发生改变。这是因为你设置的属性并没有直接调整图层的外观，相反，他只是定义了图层动画结束之后将要变化的外观。

    当设置CALayer的属性，实际上是在定义当前事务结束之后图层如何显示的模型。Core Animation扮演了一个控制器的角色，并且负责根据图层行为和事务设置去不断更新视图的这些属性在屏幕上的状态。

    我们讨论的就是一个典型的微型MVC模式。CALayer是一个连接用户界面（就是MVC中的view）虚构的类，但是在界面本身这个场景下，CALayer的行为更像是存储了视图如何显示和动画的数据模型。实际上，在苹果自己的文档中，图层树通常都是值的图层树模型。

    在 iOS中，屏幕每秒钟重绘60次。如果动画时长比60分之一秒要长，Core Animation就需要在设置一次新值和新值生效之间，对屏幕上的图层进行重新组织。这意味着CALayer除了“真实”值（就是你设置的值）之外，必 须要知道当前显示在屏幕上的属性值的记录。

    每个图层属性的显示值都被存储在一个叫做呈现图层的独立图层当中，他可以通过 -presentationLayer方法来访问。这个呈现图层实际上是模型图层的复制，但是它的属性值代表了在任何指定时刻当前外观效果。换句话说，你 可以通过呈现图层的值来获取当前屏幕上真正显示出来的值（图7.4）。

    我们在第一章中提到除了图层树，另外还有呈现树。呈现树通过图层树中所有图层的呈现图层所形成。注意呈现图层仅仅当图层首次被提交（就是首次第一次在屏幕上显示）的时候创建，所以在那之前调用-presentationLayer将会返回nil。

    你可能注意到有一个叫做–modelLayer的方法。在呈现图层上调用–modelLayer将会返回它正在呈现所依赖的CALayer。通常在一个图层上调用-modelLayer会返回–self（实际上我们已经创建的原始图层就是一种数据模型）。

    7.4.jpeg

    图7.4 一个移动的图层是如何通过数据模型呈现的

    大多数情况下，你不需要直接访问呈现图层，你可以通过和模型图层的交互，来让Core Animation更新显示。两种情况下呈现图层会变得很有用，一个是同步动画，一个是处理用户交互。

    • 如果你在实现一个基于定时器的动画（见第11章“基于定时器的动画”），而不仅仅是基于事务的动画，这个时候准确地知道在某一时刻图层显示在什么位置就会对正确摆放图层很有用了。

    • 如 果你想让你做动画的图层响应用户输入，你可以使用-hitTest:方法（见第三章“图层几何学”）来判断指定图层是否被触摸，这时候对呈现图层而不是模 型图层调用-hitTest:会显得更有意义，因为呈现图层代表了用户当前看到的图层位置，而不是当前动画结束之后的位置。

    我们可以用一个简单的案例来证明后者（见清单7.7）。在这个例子中，点击屏幕上的任意位置将会让图层平移到那里。点击图层本身可以随机改变它的颜色。我们通过对呈现图层调用-hitTest:来判断是否被点击。

    如果修改代码让-hitTest:直接作用于colorLayer而不是呈现图层，你会发现当图层移动的时候它并不能正确显示。这时候你就需要点击图层将要移动到的位置而不是图层本身来响应点击（这就是为什么用呈现图层来响应交互的原因）。

    清单7.7 使用presentationLayer图层来判断当前图层位置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    @interface ViewController ()
    @property (nonatomic, strong) CALayer *colorLayer;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //create a red layer
        self.colorLayer = [CALayer layer];
        self.colorLayer.frame = CGRectMake(0, 0, 100, 100);
        self.colorLayer.position = CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 2);
        self.colorLayer.backgroundColor = [UIColor redColor].CGColor;
        [self.view.layer addSublayer:self.colorLayer];
    }
    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    {
        //get the touch point
        CGPoint point = [[touches anyObject] locationInView:self.view];
        //check if we've tapped the moving layer
        if ([self.colorLayer.presentationLayer hitTest:point]) {
            //randomize the layer background color
            CGFloat red = arc4random() / (CGFloat)INT_MAX;
            CGFloat green = arc4random() / (CGFloat)INT_MAX;
            CGFloat blue = arc4random() / (CGFloat)INT_MAX;
            self.colorLayer.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0].CGColor;
        } else {
            //otherwise (slowly) move the layer to new position
            [CATransaction begin];
            [CATransaction setAnimationDuration:4.0];
            self.colorLayer.position = point;
            [CATransaction commit];
        }
    }
    @end

    总结

    这 一章讨论了隐式动画，还有Core Animation对指定属性选择合适的动画行为的机制。同时你知道了UIKit是如何充分利用Core Animation的隐式动画机制来强化它的显式系统，以及动画是如何被默认禁用并且当需要的时候启用的。最后，你了解了呈现和模型图层，以及Core Animation是如何通过它们来判断出图层当前位置以及将要到达的位置。

    在下一章中，我们将研究Core Animation提供的显式动画类型，既可以直接对图层属性做动画，也可以覆盖默认的图层行为。
    --------------------------------------------------------------------------------------------------------------------------------------------------------显式动画

    如果想让事情变得顺利，只有靠自己 -- 夏尔·纪尧姆

    上 一章介绍了隐式动画的概念。隐式动画是在iOS平台创建动态用户界面的一种直接方式，也是UIKit动画机制的基础，不过它并不能涵盖所有的动画类型。在 这一章中，我们将要研究一下显式动画，它能够对一些属性做指定的自定义动画，或者创建非线性动画，比如沿着任意一条曲线移动。

    属性动画

    首先我们来探讨一下属性动画。属性动画作用于图层的某个单一属性，并指定了它的一个目标值，或者一连串将要做动画的值。属性动画分为两种：基础和关键帧。

    基础动画

    动 画其实就是一段时间内发生的改变，最简单的形式就是从一个值改变到另一个值，这也是CABasicAnimation最主要的功能。 CABasicAnimation是CAPropertyAnimation的一个子类，CAPropertyAnimation同时也是Core Animation所有动画类型的抽象基类。作为一个抽象类，CAAnimation本身并没有做多少工作，它提供了一个计时函数（见第十章“缓冲”）， 一个委托（用于反馈动画状态）以及一个removedOnCompletion，用于标识动画是否该在结束后自动释放（默认YES，为了防止内存泄露）。 CAAnimation同时实现了一些协议，包括CAAction（允许CAAnimation的子类可以提供图层行为），以及 CAMediaTiming（第九章“图层时间”将会详细解释）。

    CAPropertyAnimation通过指定动画的keyPath作 用于一个单一属性，CAAnimation通常应用于一个指定的CALayer，于是这里指的也就是一个图层的keyPath了。实际上它是一个关键路径 （一些用点表示法可以在层级关系中指向任意嵌套的对象），而不仅仅是一个属性的名称，因为这意味着动画不仅可以作用于图层本身的属性，而且还包含了它的子 成员的属性，甚至是一些虚拟的属性（后面会详细解释）。

    CABasicAnimation继承于CAPropertyAnimation，并添加了如下属性：

    1
    2
    3
    id fromValue 
    id toValue 
    id byValue

    从命名就可以得到很好的解释：fromValue代表了动画开始之前属性的值，toValue代表了动画结束之后的值，byValue代表了动画执行过程中改变的值。

    通过组合这三个属性就可以有很多种方式来指定一个动画的过程。它们被定义成id类型而不是一些具体的类型是因为属性动画可以用作很多不同种的属性类型，包括数字类型，矢量，变换矩阵，甚至是颜色或者图片。

    id 类型可以包含任意由NSObject派生的对象，但有时候你会希望对一些不直接从NSObject继承的属性类型做动画，这意味着你需要把这些值用一个对 象来封装，或者强转成一个对象，就像某些功能和Objective-C对象类似的Core Foundation类型。但是如何从一个具体的数据类型转换成id看起来并不明显，一些普通的例子见表8.1。

    表8.1 用于CAPropertyAnimation的一些类型转换

    56.jpg

    fromValue，toValue 和byValue属性可以用很多种方式来组合，但为了防止冲突，不能一次性同时指定这三个值。例如，如果指定了fromValue等于2，toValue 等于4，byValue等于3，那么Core Animation就不知道结果到底是4（toValue）还是5（fromValue + byValue）了。他们的用法在CABasicAnimation头文件中已经描述的很清楚了，所以在这里就不重复了。总的说来，就是只需要指定 toValue或者byValue，剩下的值都可以通过上下文自动计算出来。

    举个例子：我们修改一下第七章中的颜色渐变的动画，用显式的CABasicAnimation来取代之前的隐式动画，代码见清单8.1。

    清单8.1 通过CABasicAnimation来设置图层背景色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIView *layerView;
    @property (nonatomic, strong) IBOutlet CALayer *colorLayer;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //create sublayer
        self.colorLayer = [CALayer layer];
        self.colorLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
        self.colorLayer.backgroundColor = [UIColor blueColor].CGColor;
        //add it to our view
        [self.layerView.layer addSublayer:self.colorLayer];
    }
    - (IBAction)changeColor
    {
        ?//create a new random color
        CGFloat red = arc4random() / (CGFloat)INT_MAX;
        CGFloat green = arc4random() / (CGFloat)INT_MAX;
        CGFloat blue = arc4random() / (CGFloat)INT_MAX;
        UIColor *color = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
        //create a basic animation
        CABasicAnimation *animation = [CABasicAnimation animation];
        animation.keyPath = @"backgroundColor";
        animation.toValue = (__bridge id)color.CGColor;
        //apply animation to layer
        [self.colorLayer addAnimation:animation forKey:nil];
    }
    @end

    运行程序，结果有点差强人意，点击按钮，的确可以使图层动画过渡到一个新的颜色，然动画结束之后又立刻变回原始值。

    这是因为动画并没有改变图层的模型，而只是呈现（第七章）。一旦动画结束并从图层上移除之后，图层就立刻恢复到之前定义的外观状态。我们从没改变过backgroundColor属性，所以图层就返回到原始的颜色。

    当 之前在使用隐式动画的时候，实际上它就是用例子中CABasicAnimation来实现的（回忆第七章，我们在 -actionForLayer:forKey:委托方法打印出来的结果就是CABasicAnimation）。但是在那个例子中，我们通过设置属性来 打开动画。在这里我们做了相同的动画，但是并没有设置任何属性的值（这就是为什么会立刻变回初始状态的原因）。

    把动画设置成一个图层的行为（然后通过改变属性值来启动动画）是到目前为止同步属性值和动画状态最简单的方式了，假设由于某些原因我们不能这么做（通常因为UIView关联的图层不能这么做动画），那么有两种可以更新属性值的方式：在动画开始之前或者动画结束之后。

    动画之前改变属性的值是最简单的办法，但这意味着我们不能使用fromValue这么好的特性了，而且要手动将fromValue设置成图层当前的值。

    于是在动画创建之前插入如下代码，就可以解决问题了

    1
    2
    animation.fromValue = (__bridge id)self.colorLayer.backgroundColor; 
    self.colorLayer.backgroundColor = color.CGColor;

    这 的确是可行的，但还是有些问题，如果这里已经正在进行一段动画，我们需要从呈现图层那里去获得fromValue，而不是模型图层。另外，由于这里的图层 并不是UIView关联的图层，我们需要用CATransaction来禁用隐式动画行为，否则默认的图层行为会干扰我们的显式动画（实际上，显式动画通 常会覆盖隐式动画，但在文章中并没有提到，所以为了安全最好这么做）。

    更新之后的代码如下：

    1
    2
    3
    4
    5
    6
    7
    CALayer *layer = self.colorLayer.presentationLayer ?:
    self.colorLayer;
     animation.fromValue = (__bridge id)layer.backgroundColor;
    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    self.colorLayer.backgroundColor = color.CGColor;
    [CATransaction commit];

    如 果给每个动画都添加这些，代码会显得特别臃肿。幸运的是，我们可以从CABasicAnimation去自动设置这些。于是可以创建一个可复用的代码。清 单8.2修改了之前的示例，通过使用CABasicAnimation的一个函数来避免在每次动画时候都重复那些臃肿的代码。

    清单8.2 修改动画立刻恢复到原始状态的一个可复用函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    - (void)applyBasicAnimation:(CABasicAnimation *)animation toLayer:(CALayer *)layer
    {
        //set the from value (using presentation layer if available)
        animation.fromValue = [layer.presentationLayer ?: layer valueForKeyPath:animation.keyPath];
        //update the property in advance
        //note: this approach will only work if toValue != nil 
        [CATransaction begin];
        [CATransaction setDisableActions:YES];
        [layer setValue:animation.toValue forKeyPath:animation.keyPath];
        [CATransaction commit];
        //apply animation to layer
        [layer addAnimation:animation forKey:nil];
    }
    - (IBAction)changeColor
    {
        //create a new random color
        CGFloat red = arc4random() / (CGFloat)INT_MAX;
        CGFloat green = arc4random() / (CGFloat)INT_MAX;
        CGFloat blue = arc4random() / (CGFloat)INT_MAX;
        UIColor *color = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
        //create a basic animation
        CABasicAnimation *animation = [CABasicAnimation animation];
        animation.keyPath = @"backgroundColor";
        animation.toValue = (__bridge id)color.CGColor;
        //apply animation without snap-back
        [self applyBasicAnimation:animation toLayer:self.colorLayer];
    }

    这种简单的实现方式通过toValue而不是byValue来处理动画，不过这已经是朝更好的解决方案迈出一大步了。你可以把它添加给CALaye作为一个分类，以方便更好地使用。

    解决看起来如此简单的一个问题都着实麻烦，但是别的方案会更加复杂。如果不在动画开始之前去更新目标属性，那么就只能在动画完全结束或者取消的时候更新它。这意味着我们需要精准地在动画结束之后，图层返回到原始值之前更新属性。那么该如何找到这个点呢？

    CAAnimationDelegate

    在第七章使用隐式动画的时候，我们可以在CATransaction完成块中检测到动画的完成。但是这种方式并不适用于显式动画，因为这里的动画和事务并没太多关联。

    那么为了知道一个显式动画在何时结束，我们需要使用一个实现了CAAnimationDelegate协议的delegate。

    CAAnimationDelegate 在任何头文件中都找不到，但是可以在CAAnimation头文件或者苹果开发者文档中找到相关函数。在这个例子中，我们用 -animationDidStop:finished:方法在动画结束之后来更新图层的backgroundColor。

    当更新属性的时候，我们需要设置一个新的事务，并且禁用图层行为。否则动画会发生两次，一个是因为显式的CABasicAnimation，另一次是因为隐式动画，具体实现见订单8.3。

    清单8.3 动画完成之后修改图层的背景色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //create sublayer
        self.colorLayer = [CALayer layer];
        self.colorLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
        self.colorLayer.backgroundColor = [UIColor blueColor].CGColor;
        //add it to our view
        [self.layerView.layer addSublayer:self.colorLayer];
    }
    - (IBAction)changeColor
    {
        //create a new random color
        CGFloat red = arc4random() / (CGFloat)INT_MAX;
        CGFloat green = arc4random() / (CGFloat)INT_MAX;
        CGFloat blue = arc4random() / (CGFloat)INT_MAX;
        UIColor *color = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
        //create a basic animation
        CABasicAnimation *animation = [CABasicAnimation animation];
        animation.keyPath = @"backgroundColor";
        animation.toValue = (__bridge id)color.CGColor;
        animation.delegate = self;
        //apply animation to layer
        [self.colorLayer addAnimation:animation forKey:nil];
    }
    - (void)animationDidStop:(CABasicAnimation *)anim finished:(BOOL)flag
    {
        //set the backgroundColor property to match animation toValue
        [CATransaction begin];
        [CATransaction setDisableActions:YES];
        self.colorLayer.backgroundColor = (__bridge CGColorRef)anim.toValue;
        [CATransaction commit];
    }
    @end

    对 CAAnimation而言，使用委托模式而不是一个完成块会带来一个问题，就是当你有多个动画的时候，无法在在回调方法中区分。在一个视图控制器中创建 动画的时候，通常会用控制器本身作为一个委托（如清单8.3所示），但是所有的动画都会调用同一个回调方法，所以你就需要判断到底是那个图层的调用。

    考虑一下第三章的闹钟，“图层几何学”，我们通过简单地每秒更新指针的角度来实现一个钟，但如果指针动态地转向新的位置会更加真实。

    我 们不能通过隐式动画来实现因为这些指针都是UIView的实例，所以图层的隐式动画都被禁用了。我们可以简单地通过UIView的动画方法来实现。但如果 想更好地控制动画时间，使用显式动画会更好（更多内容见第十章）。使用CABasicAnimation来做动画可能会更加复杂，因为我们需要在 -animationDidStop:finished:中检测指针状态（用于设置结束的位置）。

    动画本身会作为一个参数传入委托的方法，也许你会认为可以控制器中把动画存储为一个属性，然后在回调用比较，但实际上并不起作用，因为委托传入的动画参数是原始值的一个深拷贝，从而不是同一个值。

    当 使用-addAnimation:forKey:把动画添加到图层，这里有一个到目前为止我们都设置为nil的key参数。这里的键是 -animationForKey:方法找到对应动画的唯一标识符，而当前动画的所有键都可以用animationKeys获取。如果我们对每个动画都关 联一个唯一的键，就可以对每个图层循环所有键，然后调用-animationForKey:来比对结果。尽管这不是一个优雅的实现。

    幸运的 是，还有一种更加简单的方法。像所有的NSObject子类一样，CAAnimation实现了KVC（键-值-编码）协议，于是你可以用 -setValue:forKey:和-valueForKey:方法来存取属性。但是CAAnimation有一个不同的性能：它更像一个 NSDictionary，可以让你随意设置键值对，即使和你使用的动画类所声明的属性并不匹配。

    这意味着你可以对动画用任意类型打标签。在这里，我们给UIView类型的指针添加的动画，所以可以简单地判断动画到底属于哪个视图，然后在委托方法中用这个信息正确地更新钟的指针（清单8.4）。

    清单8.4 使用KVC对动画打标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIImageView *hourHand;
    @property (nonatomic, weak) IBOutlet UIImageView *minuteHand;
    @property (nonatomic, weak) IBOutlet UIImageView *secondHand;
    @property (nonatomic, weak) NSTimer *timer;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //adjust anchor points
        self.secondHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
        self.minuteHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
        self.hourHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
        //start timer
        self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(tick) userInfo:nil repeats:YES];
        //set initial hand positions
        [self updateHandsAnimated:NO];
    }
    - (void)tick
    {
        [self updateHandsAnimated:YES];
    }
    - (void)updateHandsAnimated:(BOOL)animated
    {
        //convert time to hours, minutes and seconds
        NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
        NSUInteger units = NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit;
        NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];
        CGFloat hourAngle = (components.hour / 12.0) * M_PI * 2.0;
        //calculate hour hand angle //calculate minute hand angle
        CGFloat minuteAngle = (components.minute / 60.0) * M_PI * 2.0;
        //calculate second hand angle
        CGFloat secondAngle = (components.second / 60.0) * M_PI * 2.0;
        //rotate hands
        [self setAngle:hourAngle forHand:self.hourHand animated:animated];
        [self setAngle:minuteAngle forHand:self.minuteHand animated:animated];
        [self setAngle:secondAngle forHand:self.secondHand animated:animated];
    }
    - (void)setAngle:(CGFloat)angle forHand:(UIView *)handView animated:(BOOL)animated
    {
        //generate transform
        CATransform3D transform = CATransform3DMakeRotation(angle, 0, 0, 1);
        if (animated) {
            //create transform animation
            CABasicAnimation *animation = [CABasicAnimation animation];
            [self updateHandsAnimated:NO];
            animation.keyPath = @"transform";
            animation.toValue = [NSValue valueWithCATransform3D:transform];
            animation.duration = 0.5;
            animation.delegate = self;
            [animation setValue:handView forKey:@"handView"];
            [handView.layer addAnimation:animation forKey:nil];
        } else {
            //set transform directly
            handView.layer.transform = transform;
        }
    }
    - (void)animationDidStop:(CABasicAnimation *)anim finished:(BOOL)flag
    {
        //set final position for hand view
        UIView *handView = [anim valueForKey:@"handView"];
        handView.layer.transform = [anim.toValue CATransform3DValue];
    }

    我们成功的识别出每个图层停止动画的时间，然后更新它的变换到一个新值，很好。

    不幸的是，即使做了这些，还是有个问题，清单8.4在模拟器上运行的很好，但当真正跑在iOS设备上时，我们发现在-animationDidStop:finished:委托方法调用之前，指针会迅速返回到原始值，这个清单8.3图层颜色发生的情况一样。

    问题在于回调方法在动画完成之前已经被调用了，但不能保证这发生在属性动画返回初始状态之前。这同时也很好地说明了为什么要在真实的设备上测试动画代码，而不仅仅是模拟器。

    我们可以用一个fillMode属性来解决这个问题，下一章会详细说明，这里知道在动画之前设置它比在动画结束之后更新属性更加方便。

    关键帧动画

    CABasicAnimation揭示了大多数隐式动画背后依赖的机制，这的确很有趣，但是显式地给图层添加CABasicAnimation相较于隐式动画而言，只能说费力不讨好。

    CAKeyframeAnimation 是另一种UIKit没有暴露出来但功能强大的类。和CABasicAnimation类似，CAKeyframeAnimation同样是 CAPropertyAnimation的一个子类，它依然作用于单一的一个属性，但是和CABasicAnimation不一样的是，它不限制于设置一 个起始和结束的值，而是可以根据一连串随意的值来做动画。

    关键帧起源于传动动画，意思是指主导的动画在显著改变发生时重绘当前帧（也就是关 键帧），每帧之间剩下的绘制（可以通过关键帧推算出）将由熟练的艺术家来完成。CAKeyframeAnimation也是同样的道理：你提供了显著的 帧，然后Core Animation在每帧之间进行插入。

    我们可以用之前使用颜色图层的例子来演示，设置一个颜色的数组，然后通过关键帧动画播放出来（清单8.5）

    清单8.5 使用CAKeyframeAnimation应用一系列颜色的变化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    - (IBAction)changeColor
    {
        //create a keyframe animation
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
        animation.keyPath = @"backgroundColor";
        animation.duration = 2.0;
        animation.values = @[
                             (__bridge id)[UIColor blueColor].CGColor,
                             (__bridge id)[UIColor redColor].CGColor,
                             (__bridge id)[UIColor greenColor].CGColor,
                             (__bridge id)[UIColor blueColor].CGColor ];
        //apply animation to layer
        [self.colorLayer addAnimation:animation forKey:nil];
    }

    注 意到序列中开始和结束的颜色都是蓝色，这是因为CAKeyframeAnimation并不能自动把当前值作为第一帧（就像 CABasicAnimation那样把fromValue设为nil）。动画会在开始的时候突然跳转到第一帧的值，然后在动画结束的时候突然恢复到原始 的值。所以为了动画的平滑特性，我们需要开始和结束的关键帧来匹配当前属性的值。

    当然可以创建一个结束和开始值不同的动画，那样的话就需要在动画启动之前手动更新属性和最后一帧的值保持一致，就和之前讨论的一样。

    我 们用duration属性把动画时间从默认的0.25秒增加到2秒，以便于动画做的不那么快。运行它，你会发现动画通过颜色不断循环，但效果看起来有些奇 怪。原因在于动画以一个恒定的步调在运行。当在每个动画之间过渡的时候并没有减速，这就产生了一个略微奇怪的效果，为了让动画看起来更自然，我们需要调整 一下缓冲，第十章将会详细说明。

    提供一个数组的值就可以按照颜色变化做动画，但一般这不是直观的方式去描述一段运用。 CAKeyframeAnimation有另一种方式去指定动画，就是使用CGPath。path属性可以用一种直观的方式，使用Core Graphics函数定义运动的序列来绘制动画。

    我们来用一个宇宙飞船沿着一个简单曲线的实例演示一下。为了创建路径，我们需要使用一个三 次贝塞尔曲线，它是一种使用开始点，结束点和另外两个控制点来定义形状的曲线，可以通过使用一个基于C的Core Graphics绘图指令来创建，不过用UIKit提供的UIBezierPath类会更简单。

    我们这次用CAShapeLayer来在屏 幕上绘制曲线，尽管对动画来说并不是必须的，但这会让我们的动画更加形象。绘制完CGPath之后，我们用它来创建一个 CAKeyframeAnimation，然后用它来应用到我们的宇宙飞船。代码见清单8.6，结果见图8.1。

    清单8.6 沿着一个贝塞尔曲线对图层做动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIView *containerView;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //create a path
        UIBezierPath *bezierPath = [[UIBezierPath alloc] init];
        [bezierPath moveToPoint:CGPointMake(0, 150)];
        [bezierPath addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(75, 0) controlPoint2:CGPointMake(225, 300)];
        //draw the path using a CAShapeLayer
        CAShapeLayer *pathLayer = [CAShapeLayer layer];
        pathLayer.path = bezierPath.CGPath;
        pathLayer.fillColor = [UIColor clearColor].CGColor;
        pathLayer.strokeColor = [UIColor redColor].CGColor;
        pathLayer.lineWidth = 3.0f;
        [self.containerView.layer addSublayer:pathLayer];
        //add the ship
        CALayer *shipLayer = [CALayer layer];
        shipLayer.frame = CGRectMake(0, 0, 64, 64);
        shipLayer.position = CGPointMake(0, 150);
        shipLayer.contents = (__bridge id)[UIImage imageNamed: @"Ship.png"].CGImage;
        [self.containerView.layer addSublayer:shipLayer];
        //create the keyframe animation
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
        animation.keyPath = @"position";
        animation.duration = 4.0;
        animation.path = bezierPath.CGPath;
        [shipLayer addAnimation:animation forKey:nil];
    }
    @end

    8.1.jpeg

    图8.1 沿着一个贝塞尔曲线移动的宇宙飞船图片

    运行示例，你会发现飞船的动画有些不太真实，这是因为当它运动的时候永远指向右边，而不是指向曲线切线的方向。你可以调整它的affineTransform来对运动方向做动画，但很可能和其它的动画冲突。

    幸运的是，苹果预见到了这点，并且给CAKeyFrameAnimation添加了一个rotationMode的属性。设置它为常量kCAAnimationRotateAuto（清单8.7），图层将会根据曲线的切线自动旋转（图8.2）。

    清单8.7 通过rotationMode自动对齐图层到曲线

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //create a path
        ...
        //create the keyframe animation
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
        animation.keyPath = @"position";
        animation.duration = 4.0;
        animation.path = bezierPath.CGPath;
        animation.rotationMode = kCAAnimationRotateAuto;
        [shipLayer addAnimation:animation forKey:nil];
    }

    8.2.jpeg

    图8.2 匹配曲线切线方向的飞船图层

    虚拟属性

    之前提到过属性动画实际上是针对于关键路径而不是一个键，这就意味着可以对子属性甚至是虚拟属性做动画。但是虚拟属性到底是什么呢？

    考虑一个旋转的动画：如果想要对一个物体做旋转的动画，那就需要作用于transform属性，因为CALayer没有显式提供角度或者方向之类的属性，代码如清单8.8所示

    清单8.8 用transform属性对图层做动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIView *containerView;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //add the ship
        CALayer *shipLayer = [CALayer layer];
        shipLayer.frame = CGRectMake(0, 0, 128, 128);
        shipLayer.position = CGPointMake(150, 150);
        shipLayer.contents = (__bridge id)[UIImage imageNamed: @"Ship.png"].CGImage;
        [self.containerView.layer addSublayer:shipLayer];
        //animate the ship rotation
        CABasicAnimation *animation = [CABasicAnimation animation];
        animation.keyPath = @"transform";
        animation.duration = 2.0;
        animation.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI, 0, 0, 1)];
        [shipLayer addAnimation:animation forKey:nil];
    }
    @end

    这么做是可行的，但看起来更因为是运气而不是设计的原因，如果我们把旋转的值从M_PI（180度）调整到2 * M_PI（360度），然后运行程序，会发现这时候飞船完全不动了。这是因为这里的矩阵做了一次360度的旋转，和做了0度是一样的，所以最后的值根本没变。

    现在继续使用M_PI，但这次用byValue而不是toValue。也许你会认为这和设置toValue结果一样，因为0 + 90度 == 90度，但实际上飞船的图片变大了，并没有做任何旋转，这是因为变换矩阵不能像角度值那样叠加。

    那么如果需要独立于角度之外单独对平移或者缩放做动画呢？由于都需要我们来修改transform属性，实时地重新计算每个时间点的每个变换效果，然后根据这些创建一个复杂的关键帧动画，这一切都是为了对图层的一个独立做一个简单的动画。

    幸运的是，有一个更好的解决方案：为了旋转图层，我们可以对transform.rotation关键路径应用动画，而不是transform本身（清单8.9）。

    清单8.9 对虚拟的transform.rotation属性做动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIView *containerView;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //add the ship
        CALayer *shipLayer = [CALayer layer];
        shipLayer.frame = CGRectMake(0, 0, 128, 128);
        shipLayer.position = CGPointMake(150, 150);
        shipLayer.contents = (__bridge id)[UIImage imageNamed: @"Ship.png"].CGImage;
        [self.containerView.layer addSublayer:shipLayer];
        //animate the ship rotation
        CABasicAnimation *animation = [CABasicAnimation animation];
        animation.keyPath = @"transform.rotation";
        animation.duration = 2.0;
        animation.byValue = @(M_PI * 2);
        [shipLayer addAnimation:animation forKey:nil];
    }
    @end

    结果运行的特别好，用transform.rotation而不是transform做动画的好处如下：

    • 我们可以不通过关键帧一步旋转多于180度的动画。

    • 可以用相对值而不是绝对值旋转（设置byValue而不是toValue）。

    • 可以不用创建CATransform3D，而是使用一个简单的数值来指定角度。

    • 不会和transform.position或者transform.scale冲突（同样是使用关键路径来做独立的动画属性）。

    transform.rotation 属性有一个奇怪的问题是它其实并不存在。这是因为CATransform3D并不是一个对象，它实际上是一个结构体，也没有符合KVC相关属 性，transform.rotation实际上是一个CALayer用于处理动画变换的虚拟属性。

    你不可以直接设置transform.rotation或者transform.scale，他们不能被直接使用。当你对他们做动画时，Core Animation自动地根据通过CAValueFunction来计算的值来更新transform属性。

    CAValueFunction 用于把我们赋给虚拟的transform.rotation简单浮点值转换成真正的用于摆放图层的CATransform3D矩阵值。你可以通过设置 CAPropertyAnimation的valueFunction属性来改变，于是你设置的函数将会覆盖默认的函数。

    CAValueFunction 看起来似乎是对那些不能简单相加的属性（例如变换矩阵）做动画的非常有用的机制，但由于CAValueFunction的实现细节是私有的，所以目前不能 通过继承它来自定义。你可以通过使用苹果目前已近提供的常量（目前都是和变换矩阵的虚拟属性相关，所以没太多使用场景了，因为这些属性都有了默认的实现方 式）。

    动画组

    CABasicAnimation和 CAKeyframeAnimation仅仅作用于单独的属性，而CAAnimationGroup可以把这些动画组合在一起。 CAAnimationGroup是另一个继承于CAAnimation的子类，它添加了一个animations数组的属性，用来组合别的动画。我们把 清单8.6那种关键帧动画和调整图层背景色的基础动画组合起来（清单8.10），结果如图8.3所示。

    清单8.10 组合关键帧动画和基础动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //create a path
        UIBezierPath *bezierPath = [[UIBezierPath alloc] init];
        [bezierPath moveToPoint:CGPointMake(0, 150)];
        [bezierPath addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(75, 0) controlPoint2:CGPointMake(225, 300)];
        //draw the path using a CAShapeLayer
        CAShapeLayer *pathLayer = [CAShapeLayer layer];
        pathLayer.path = bezierPath.CGPath;
        pathLayer.fillColor = [UIColor clearColor].CGColor;
        pathLayer.strokeColor = [UIColor redColor].CGColor;
        pathLayer.lineWidth = 3.0f;
        [self.containerView.layer addSublayer:pathLayer];
        //add a colored layer
        CALayer *colorLayer = [CALayer layer];
        colorLayer.frame = CGRectMake(0, 0, 64, 64);
        colorLayer.position = CGPointMake(0, 150);
        colorLayer.backgroundColor = [UIColor greenColor].CGColor;
        [self.containerView.layer addSublayer:colorLayer];
        //create the position animation
        CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animation];
        animation1.keyPath = @"position";
        animation1.path = bezierPath.CGPath;
        animation1.rotationMode = kCAAnimationRotateAuto;
        //create the color animation
        CABasicAnimation *animation2 = [CABasicAnimation animation];
        animation2.keyPath = @"backgroundColor";
        animation2.toValue = (__bridge id)[UIColor redColor].CGColor;
        //create group animation
        CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
        groupAnimation.animations = @[animation1, animation2]; 
        groupAnimation.duration = 4.0;
        //add the animation to the color layer
        [colorLayer addAnimation:groupAnimation forKey:nil];
    }

    8.3.jpeg

    图8.3 关键帧路径和基础动画的组合

    过渡

    有 时候对于iOS应用程序来说，希望能通过属性动画来对比较难做动画的布局进行一些改变。比如交换一段文本和图片，或者用一段网格视图来替换，等等。属性动 画只对图层的可动画属性起作用，所以如果要改变一个不能动画的属性（比如图片），或者从层级关系中添加或者移除图层，属性动画将不起作用。

    于是就有了过渡的概念。过渡并不像属性动画那样平滑地在两个值之间做动画，而是影响到整个图层的变化。过渡动画首先展示之前的图层外观，然后通过一个交换过渡到新的外观。

    为了创建一个过渡动画，我们将使用CATransition，同样是另一个CAAnimation的子类，和别的子类不同，CAAnimation有一个type和subtype来标识变换效果。type属性是一个NSString类型，可以被设置成如下类型：

    1
    2
    3
    4
    kCATransitionFade 
    kCATransitionMoveIn 
    kCATransitionPush 
    kCATransitionReveal

    到目前为止你只能使用上述四种类型，但你可以通过一些别的方法来自定义过渡效果，后续会详细介绍。

    默认的过渡类型是kCATransitionFade，当你在改变图层属性之后，就创建了一个平滑的淡入淡出效果。

    我们在第七章的例子中就已经用到过kCATransitionPush，它创建了一个新的图层，从边缘的一侧滑动进来，把旧图层从另一侧推出去的效果。

    kCATransitionMoveIn 和kCATransitionReveal与kCATransitionPush类似，都实现了一个定向滑动的动画，但是有一些细微的不 同，kCATransitionMoveIn从顶部滑动进入，但不像推送动画那样把老土层推走，然而kCATransitionReveal把原始的图层 滑动出去来显示新的外观，而不是把新的图层滑动进入。

    后面三种过渡类型都有一个默认的动画方向，它们都从左侧滑入，但是你可以通过subtype来控制它们的方向，提供了如下四种类型：

    1
    2
    3
    4
    kCATransitionFromRight 
    kCATransitionFromLeft 
    kCATransitionFromTop 
    kCATransitionFromBottom

    一 个简单的用CATransition来对非动画属性做动画的例子如清单8.11所示，这里我们对UIImage的image属性做修改，但是隐式动画或者 CAPropertyAnimation都不能对它做动画，因为Core Animation不知道如何在插图图片。通过对图层应用一个淡入淡出的过渡，我们可以忽略它的内容来做平滑动画（图8.4），我们来尝试修改过渡的 type常量来观察其它效果。

    清单8.11 使用CATransition来对UIImageView做动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIImageView *imageView;
    @property (nonatomic, copy) NSArray *images;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //set up images
        self.images = @[[UIImage imageNamed:@"Anchor.png"],
                        [UIImage imageNamed:@"Cone.png"],
                        [UIImage imageNamed:@"Igloo.png"],
                        [UIImage imageNamed:@"Spaceship.png"]];
    }
    - (IBAction)switchImage
    {
        //set up crossfade transition
        CATransition *transition = [CATransition animation];
        transition.type = kCATransitionFade;
        //apply transition to imageview backing layer
        [self.imageView.layer addAnimation:transition forKey:nil];
        //cycle to next image
        UIImage *currentImage = self.imageView.image;
        NSUInteger index = [self.images indexOfObject:currentImage];
        index = (index + 1) % [self.images count];
        self.imageView.image = self.images[index];
    }
    @end

    你 可以从代码中看出，过渡动画和之前的属性动画或者动画组添加到图层上的方式一致，都是通过-addAnimation:forKey:方法。但是和属性动 画不同的是，对指定的图层一次只能使用一次CATransition，因此，无论你对动画的键设置什么值，过渡动画都会对它的键设置成 “transition”，也就是常量kCATransition。

    8.4.jpeg

    图8.4 使用CATransition对图像平滑淡入淡出

    隐式过渡

    CATransision 可以对图层任何变化平滑过渡的事实使得它成为那些不好做动画的属性图层行为的理想候选。苹果当然意识到了这点，并且当设置了CALayer的 content属性的时候，CATransition的确是默认的行为。但是对于视图关联的图层，或者是其他隐式动画的行为，这个特性依然是被禁用的，但 是对于你自己创建的图层，这意味着对图层contents图片做的改动都会自动附上淡入淡出的动画。

    我们在第七章使用CATransition作为一个图层行为来改变图层的背景色，当然backgroundColor属性可以通过正常的CAPropertyAnimation来实现，但这不是说不可以用CATransition来实行。

    对图层树的动画

    CATransition 并不作用于指定的图层属性，这就是说你可以在即使不能准确得知改变了什么的情况下对图层做动画，例如，在不知道UITableView哪一行被添加或者删 除的情况下，直接就可以平滑地刷新它，或者在不知道UIViewController内部的视图层级的情况下对两个不同的实例做过渡动画。

    这些例子和我们之前所讨论的情况完全不同，因为它们不仅涉及到图层的属性，而且是整个图层树的改变--我们在这种动画的过程中手动在层级关系中添加或者移除图层。

    这里用到了一个小诡计，要确保CATransition添加到的图层在过渡动画发生时不会在树状结构中被移除，否则CATransition将会和图层一起被移除。一般来说，你只需要将动画添加到被影响图层的superlayer。

    在 清单8.2中，我们展示了如何在UITabBarController切换标签的时候添加淡入淡出的动画。这里我们建立了默认的标签应用程序模板，然后用 UITabBarControllerDelegate的-tabBarController:didSelectViewController:方法来 应用过渡动画。我们把动画添加到UITabBarController的视图图层上，于是在标签被替换的时候动画不会被移除。

    清单8.12 对UITabBarController做动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    #import "AppDelegate.h"
    #import "FirstViewController.h" 
    #import "SecondViewController.h"
    #import @implementation AppDelegate
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        self.window = [[UIWindow alloc] initWithFrame: [[UIScreen mainScreen] bounds]];
        UIViewController *viewController1 = [[FirstViewController alloc] init];
        UIViewController *viewController2 = [[SecondViewController alloc] init];
        self.tabBarController = [[UITabBarController alloc] init];
        self.tabBarController.viewControllers = @[viewController1, viewController2];
        self.tabBarController.delegate = self;
        self.window.rootViewController = self.tabBarController;
        [self.window makeKeyAndVisible];
        return YES;
    }
    - (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController
    {
        ?//set up crossfade transition
        CATransition *transition = [CATransition animation];
        transition.type = kCATransitionFade;
        //apply transition to tab bar controller's view
        [self.tabBarController.view.layer addAnimation:transition forKey:nil];
    }
    @end

    自定义动画

    我们证实了过渡是一种对那些不太好做平滑动画属性的强大工具，但是CATransition的提供的动画类型太少了。

    更 奇怪的是苹果通过UIView +transitionFromView:toView:duration:options:completion: 和+transitionWithView:duration:options:animations:方法提供了Core Animation的过渡特性。但是这里的可用的过渡选项和CATransition的type属性提供的常量完全不同。UIView过渡方法中 options参数可以由如下常量指定：

    1
    2
    3
    4
    5
    6
    7
    UIViewAnimationOptionTransitionFlipFromLeft 
    UIViewAnimationOptionTransitionFlipFromRight
    UIViewAnimationOptionTransitionCurlUp 
    UIViewAnimationOptionTransitionCurlDown
    UIViewAnimationOptionTransitionCrossDissolve 
    UIViewAnimationOptionTransitionFlipFromTop 
    UIViewAnimationOptionTransitionFlipFromBottom

    除了UIViewAnimationOptionTransitionCrossDissolve之外，剩下的值和CATransition类型完全没关系。你可以用之前例子修改过的版本来测试一下（见清单8.13）。

    清单8.13 使用UIKit提供的方法来做过渡动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIImageView *imageView;
    @property (nonatomic, copy) NSArray *images;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad]; //set up images
        self.images = @[[UIImage imageNamed:@"Anchor.png"],
                        [UIImage imageNamed:@"Cone.png"],
                        [UIImage imageNamed:@"Igloo.png"],
                        [UIImage imageNamed:@"Spaceship.png"]];
    - (IBAction)switchImage
    {
        [UIView transitionWithView:self.imageView duration:1.0
                           options:UIViewAnimationOptionTransitionFlipFromLeft
                        animations:^{
                            //cycle to next image
                            UIImage *currentImage = self.imageView.image;
                            NSUInteger index = [self.images indexOfObject:currentImage];
                            index = (index + 1) % [self.images count];
                            self.imageView.image = self.images[index];
                        }
                        completion:NULL];
    }
    @end

    文 档暗示过在iOS5（带来了Core Image框架）之后，可以通过CATransition的filter属性，用CIFilter来创建其它的过渡效果。然是直到iOS6都做不到这点。 试图对CATransition使用Core Image的滤镜完全没效果（但是在Mac OS中是可行的，也许文档是想表达这个意思）。

    因此，根据要实现的效果，你只用关心是用CATransition还是用UIView的过渡方法就可以了。希望下个版本的iOS系统可以通过CATransition很好的支持Core Image的过渡滤镜效果（或许甚至会有新的方法）。

    但 这并不意味着在iOS上就不能实现自定义的过渡效果了。这只是意味着你需要做一些额外的工作。就像之前提到的那样，过渡动画做基础的原则就是对原始的图层 外观截图，然后添加一段动画，平滑过渡到图层改变之后那个截图的效果。如果我们知道如何对图层截图，我们就可以使用属性动画来代替 CATransition或者是UIKit的过渡方法来实现动画。

    事实证明，对图层做截图还是很简单的。CALayer有一个 -renderInContext:方法，可以通过把它绘制到Core Graphics的上下文中捕获当前内容的图片，然后在另外的视图中显示出来。如果我们把这个截屏视图置于原始视图之上，就可以遮住真实视图的所有变化， 于是重新创建了一个简单的过渡效果。

    清单8.14演示了一个基本的实现。我们对当前视图状态截图，然后在我们改变原始视图的背景色的时候对截图快速转动并且淡出，图8.5展示了我们自定义的过渡效果。

    为 了让事情更简单，我们用UIView -animateWithDuration:completion:方法来实现。虽然用CABasicAnimation可以达到同样的效果，但是那样的 话我们就需要对图层的变换和不透明属性创建单独的动画，然后当动画结束的是哦户在CAAnimationDelegate中把coverView从屏幕中 移除。

    清单8.14 用renderInContext:创建自定义过渡效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    @implementation ViewController
    - (IBAction)performTransition
    {
        //preserve the current view snapshot
        UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, YES, 0.0);
        [self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *coverImage = UIGraphicsGetImageFromCurrentImageContext();
        //insert snapshot view in front of this one
        UIView *coverView = [[UIImageView alloc] initWithImage:coverImage];
        coverView.frame = self.view.bounds;
        [self.view addSubview:coverView];
        //update the view (we'll simply randomize the layer background color)
        CGFloat red = arc4random() / (CGFloat)INT_MAX;
        CGFloat green = arc4random() / (CGFloat)INT_MAX;
        CGFloat blue = arc4random() / (CGFloat)INT_MAX;
        self.view.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
        //perform animation (anything you like)
        [UIView animateWithDuration:1.0 animations:^{
            //scale, rotate and fade the view
            CGAffineTransform transform = CGAffineTransformMakeScale(0.01, 0.01);
            transform = CGAffineTransformRotate(transform, M_PI_2);
            coverView.transform = transform;
            coverView.alpha = 0.0;
        } completion:^(BOOL finished) {
            //remove the cover view now we're finished with it
            [coverView removeFromSuperview];
        }];
    }
    @end

    8.5.jpeg

    图8.5 使用renderInContext:创建自定义过渡效果

    这里有个警告：-renderInContext:捕获了图层的图片和子图层，但是不能对子图层正确地处理变换效果，而且对视频和OpenGL内容也不起作用。但是用CATransition，或者用私有的截屏方式就没有这个限制了。

    在动画过程中取消动画

    之前提到过，你可以用-addAnimation:forKey:方法中的key参数来在添加动画之后检索一个动画，使用如下方法：

    1
    - (CAAnimation *)animationForKey:(NSString *)key;

    但并不支持在动画运行过程中修改动画，所以这个方法主要用来检测动画的属性，或者判断它是否被添加到当前图层中。

    为了终止一个指定的动画，你可以用如下方法把它从图层移除掉：

    1
    - (void)removeAnimationForKey:(NSString *)key;

    或者移除所有动画：

    1
    - (void)removeAllAnimations;

    动 画一旦被移除，图层的外观就立刻更新到当前的模型图层的值。一般说来，动画在结束之后被自动移除，除非设置removedOnCompletion为 NO，如果你设置动画在结束之后不被自动移除，那么当它不需要的时候你要手动移除它；否则它会一直存在于内存中，直到图层被销毁。

    我们来扩 展之前旋转飞船的示例，这里添加一个按钮来停止或者启动动画。这一次我们用一个非nil的值作为动画的键，以便之后可以移除它。- animationDidStop:finished:方法中的flag参数表明了动画是自然结束还是被打断，我们可以在控制台打印出来。如果你用停止按 钮来终止动画，它会打印NO，如果允许它完成，它会打印YES。

    清单8.15是更新后的示例代码，图8.6显示了结果。

    清单8.15 开始和停止一个动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIView *containerView;
    @property (nonatomic, strong) CALayer *shipLayer;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        //add the ship
        self.shipLayer = [CALayer layer];
        self.shipLayer.frame = CGRectMake(0, 0, 128, 128);
        self.shipLayer.position = CGPointMake(150, 150);
        self.shipLayer.contents = (__bridge id)[UIImage imageNamed: @"Ship.png"].CGImage;
        [self.containerView.layer addSublayer:self.shipLayer];
    }
    - (IBAction)start
    {
        //animate the ship rotation
        CABasicAnimation *animation = [CABasicAnimation animation];
        animation.keyPath = @"transform.rotation";
        animation.duration = 2.0;
        animation.byValue = @(M_PI * 2);
        animation.delegate = self;
        [self.shipLayer addAnimation:animation forKey:@"rotateAnimation"];
    }
    - (IBAction)stop
    {
        [self.shipLayer removeAnimationForKey:@"rotateAnimation"];
    }
    - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
    {
        //log that the animation stopped
        NSLog(@"The animation stopped (finished: %@)", flag? @"YES": @"NO");
    }
    @end

    8.6.jpeg

    图8.6 通过开始和停止按钮控制的旋转动画

    总结

    这一章中，我们涉及了属性动画（你可以对单独的图层属性动画有更加具体的控制），动画组（把多个属性动画组合成一个独立单元）以及过度（影响整个图层，可以用来对图层的任何内容做任何类型的动画，包括子图层的添加和移除）。

    在第九章中，我们继续学习CAMediaTiming协议，来看一看Core Animation是怎样处理逝去的时间。
  • 相关阅读:
    使用SandCastle生成代码注释文档
    如何修改默认的ModelState错误提示：字段{0}必须是一个数字
    2011总结 致：过去的30年
    CentOS下安装、配置Nginx，配合IIS做负载均衡
    灵活应用js调试技巧解决样式问题
    扩展IList对象，实现深拷贝扩展方法
    IE8对JS数组，采用属性遍历的解析差异
    如何开始Github
    Response.Clear 还是 Response.ClearHeaders
    URLRoutingModule如何处理静态文件?
  • 原文地址：https://www.cnblogs.com/A--G/p/4707780.html
Copyright © 2020-2023  润新知