iOS核心动画高级技巧 - 3

7. 隐式动画

隐式动画

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

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

7.1 事务

事务

core animation基于一个假设，说屏幕上的任何东西都可以（或者可能）做动画。动画并不需要你在core animation中手动打开，相反需要明确地关闭，否则他会一直存在。当你改变calayer的一个可做动画的属性，它并不能立刻在屏幕上体现出来。相反，它是从先前的值平滑过渡到新的值。这一切都是默认的行为，你不需要做额外的操作。这看起来这太棒了，似乎不太真实，我们来用一个demo解释一下：首先和第一章“图层树”一样创建一个蓝色的方块，然后添加一个按钮，随机改变它的颜色。代码见清单7.1。点击按钮，你会发现图层的颜色平滑过渡到一个新值，而不是跳变（图7.1）。

一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个我的ios交流群：1012951431， 分享bat,阿里面试题、面试经验，讨论技术， 大家一起交流学习成长！希望帮助开发者少走弯路。

清单7.1 随机改变图层颜色

复制代码

7.2 完成块

完成块

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

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

- (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.3 图层行为

图层行为

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

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

@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:实现

@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

 

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

$ layertest[21215:c07] outside: <null>
$ layertest[21215:c07] inside: <cabasicanimation: 0x757f090>

 

于是我们可以预言，当属性在动画块之外发生改变，uiview直接通过返回nil来禁用隐式动画。但如果在动画块范围之内，根据动画具体类型返回相应的属性，在这个例子就是cabasicanimation（第八章“显式动画”将会提到）。当然返回nil并不是禁用隐式动画唯一的办法，catransacition有个方法叫做+setdisableactions:，可以用来对所有属性打开或者关闭隐式动画。如果在清单7.2的[catransaction begin]之后添加下面的代码，同样也会阻止动画的发生：

[catransaction setdisableactions:yes];复制代码

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

• uiview关联的图层禁用了隐式动画，对这种图层做动画的唯一办法就是使用uiview的动画函数（而不是依赖catransaction），或者继承uiview，并覆盖-actionforlayer:forkey:方法，或者直接创建一个显式动画（具体细节见第八章）。
• 对于单独存在的图层，我们可以通过实现图层的-actionforlayer:forkey:委托方法，或者提供一个actions字典来控制隐式动画。 我们来对颜色渐变的例子使用一个不同的行为，通过给colorlayer设置一个自定义的actions字典。我们也可以使用委托来实现，但是actions字典可以写更少的代码。那么到底改如何创建一个合适的行为对象呢？

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

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

清单7.6 实现自定义行为

@interface viewcontroller ()

@property (nonatomic, weak) iboutlet uiview *layerview;
@property (nonatomic, weak) iboutlet calayer *colorlayer;/*热心人发现这里应该改为@property (nonatomic, strong)  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.4 呈现与模型

呈现与模型

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.5 总结

总结

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

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