Core Animation 文档翻译 （第六篇）—高级动画技巧

 

前言

配置属性动画或者关键帧动画的方式是多种多样的。需要同时执行多个动画或者顺序执行多个动画的APP，可以通过高级的方式同步这些动画的timing或者将这些动画绑定在一起。我们也可以使用其他类型的动画对象来创建可视化的transitions和别的有趣的动画效果。

 

过渡动画支持Layer可见性的变化

就像本级标题名字所说一样，一个transition动画对象为Layer创建一个动画性的过渡效果。transistion对象最常用的方法就是以协调的方式让一个Layer动画形式的出现，并让另外一个Layer动画形式的消失。和属性动画不一样，属性动画是改变Layer的一个属性；而transition动画操作layer缓存的image用来创建可视化效应，通过只调整属性这些可视化效应是很难或者几乎不肯能完成的。标准的transition类型可以用来实现渐显、push、移除或者交叉渐隐动画。在OSX上，我们也可以使用Core image filter创建具有特殊效应的transitions，例如擦拭、卷页、波纹或者自定义的其他效果。

为了执行transition动画，我们可以创建CATransition对象并将其添加到相关的Layers。我们在使用transition对象的时候可以指定transition的类型、开始和结束进度点。开始动画前，可以设置开始和结束进度值，这两个值可以让我们的transition动画看起来像从开始值开始，和结束值结束。

代码5-1展示了如何在两个View之间创建push 过渡动画。在这个例子中，myView1和myView2是在同一个父视图上相同的position，并且myView1是可见的在最初。动画效果为myView1想做滑出知道完全隐藏，同时myView2从右边滑入知道完全显示。为了确保在动画的结束时候两个view相应的可见性是正确的，我们需要更新两个view的hidden属性。

 

代码5-1在iOS中两个view之间过度动画

CATransition* transition = [CATransition animation];
transition.startProgress = 0;
transition.endProgress = 1.0;
transition.type = kCATransitionPush;
transition.subtype = kCATransitionFromRight;
transition.duration = 1.0;
 
// Add the transition animation to both layers
[myView1.layer addAnimation:transition forKey:@"transition"];
[myView2.layer addAnimation:transition forKey:@"transition"];
 
// Finally, change the visibility of the layers.
myView1.hidden = YES;
myView2.hidden = NO;

 

当两个layer都需要相同的过度动画时候，我们可以让他们使用相同的transition对象。使用相同的transition对象也能简化代码。

 

自定义动画时间函数

时间控制函数是动画的重要部分。通过核心动画中CAMediaTiming协议的方法和属性，我们可以为动画指定精确的时间信息。CAAnimation类遵守该协议，因此我们能够指定动画对象的时间信息，隐式动画对象默认封装了这些信息，并优先使用默认的信息。

对于如何理解时间信息和动画时，理解Layer对象和time之间关系是很重要的。每个Layer有他们自己的局部时间，Layer使用自己的局部时间来管理动画时间。通常情况下，两个不同Layer的局部时间是非常接近的，以至于在为这两个Layer指定相同的时间值时，用户也察觉不到。然而，Layer的局部时间能够被它的父Layer和它自身的时间参数所修改。例如，改变Layer的[speed]属性能够引起Layer（和他的sublayer）的动画的duration发生成比例的变化。

为了帮助我们确保时间值是恰当的，CALayer类定义了convertTime:fromLayer: and convertTime:toLayer:方法。我们可以使用这些方法将一个修正的时间值转换为layer的局部时间，或者将一个layer的时间值转换到另外一个Layer。这两个方法涉及到时间相关的属性并返回一个值，我们将这个值可以用于别的layer，这两个方法所涉及到的时间属性也会影响layer的局部时间。代码5-3展示了定期用于获得一个layer的当前局部时间。通过CACurrentMediaTime函数可以获取计算机当前时间，同时可将这个时间用于转换出Layer的局部时间。

 

代码5-3过的Layer的本地时间

CFTimeInterval localLayerTime = [myLayer convertTime:CACurrentMediaTime() fromLayer:nil];

 

一旦我们有了相对于layer局部时间的值，我们可以使用该值去更新动画对象或Layer的时间相关的属性。通过设置这些时间属性，我们可以获得许多有趣的动画行为，这些属性包含以下几种：

• 使用beginTime属性设置动画的开始时间。通常，动画在下个更新循环开始执行。我们可以使用beginTime参数去延迟几秒动画的开始。将两个动画顺序的关联在一起的方法就是，将一个动画的beginTime和另外一个动画的结束值设置为相同的值。
  如果我们延迟动画的开始时间，我们也应该设置fillModel属性的值为kCAFillModeBackwards。这个模式将会使Layer显式动画的开始值，及时图层树上的Layer对象具有不同的值。如果不设置这个模式，我们将会看到一个到最终值跳跃性的显式在动画开始执行前。其他的模式也是可用的。

• autoreverses属性将会引发动画以被指定的duration返回动画的开始值。我们将这个属性与repeatCount属性结合起来可以实现在开始值和结束值之间来回做动画。如果autoreversing为YES并为repeatCount属性设置整数值（例如1.0），那么将会引起动画停止在开始值；添加额外的一半动画（例如设置为1.5）将会使得动画停止在结束值的位置。

• 在组动画中使用timeOffset属性能够让一些动画在组内某些动画之后开始。

 

暂停和重启动画

为了暂停动画，我们可以利用Layer遵守的CAMediaTiming协议，并设置Layer动画的speed为0.0。将speed设置为0将引起动画暂停，直到我们改变这个值为非0值动画才会结束暂停。代码5-4展示了简单的示例关于如何暂停和在暂停后重启动画。

 

5-4暂停和重启Layer的动画

-(void)pauseLayer:(CALayer*)layer {
   CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
   layer.speed = 0.0;
   layer.timeOffset = pausedTime;
}
 
-(void)resumeLayer:(CALayer*)layer {
   CFTimeInterval pausedTime = [layer timeOffset];
   layer.speed = 1.0;
   layer.timeOffset = 0.0;
   layer.beginTime = 0.0;
   CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
   layer.beginTime = timeSincePause;
}

 

显式动画帮助我们改变动画的参数

为Layer做的每一个改变必须是transaction的一部分。[CATransaction]类管理动画的创建、将动画组合在一起并将组合的动画以恰当的时间执行。大部分情况下，我们不需要创建自己的transactions。无论何时你为Layer添加显式和隐式动画，核心动画自动创建隐式transaction。然而，我们也能创建显式transactions去更准确的管理这些动画。

使用CATransaction类的方法，我们可以创建和管理transactions。调用begin类方法开始（隐式的创建）新的transaction;调用commit类方法结束transaction。在这两个方法之间调用我们想要作为transaction其中的变化。例如我们使用代码5-5变化layer的两个属性。

 

5-5创建显式的transaction

[CATransaction begin];
theLayer.zPosition=200.0;
theLayer.opacity=0.0;
[CATransaction commit];

 

使用transactions最主要的原因就是在transaction的beginTime和commit中间，我们可以改变duration，timing函数和其他参数。我们能够也能够为transaction关联一个完成后执行的block，方便我们的APP能够在这组动画结束后的到通知。改变动画的参数，需要通过修改在使用setValue:forKey:方法修改transaction字典里面对应的key。例如，改变默认duration为10秒，我们应该改变kCATransactionAnimationDuration key，例如代码5-6展示

 

5-6改变动画的默认duration

[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithFloat:10.0f]
                 forKey:kCATransactionAnimationDuration];
// Perform the animations
[CATransaction commit];

 

当我们想要为不同的动画集合提供不同的值时，我们可以嵌套transactions。如果想要嵌套，只需要在begin类方法之后再次调用begin方法。每一个begin调用必须和-个commit方法对应。仅当我们提交最后一个最外层的commit方法时，核心动画才会开始相关的动画。

代码5-7展示了两个transaction的嵌套。在这个例子中这个内层的和外层的transaction改变相同的动画参数，但是使用不同的值。

 

5-7嵌套显式的transaction

[CATransaction begin]; // Outer transaction
 
// Change the animation duration to two seconds
[CATransaction setValue:[NSNumber numberWithFloat:2.0f]
                forKey:kCATransactionAnimationDuration];
// Move the layer to a new position
theLayer.position = CGPointMake(0.0,0.0);
 
[CATransaction begin]; // Inner transaction
// Change the animation duration to five seconds
[CATransaction setValue:[NSNumber numberWithFloat:5.0f]
                 forKey:kCATransactionAnimationDuration];
 
// Change the zPosition and opacity
theLayer.zPosition=200.0;
theLayer.opacity=0.0;
 
[CATransaction commit]; // Inner transaction
 
[CATransaction commit]; // Outer transaction

 

为动画添加观看者视角

APP可以在三个维度控制Layer；简单的核心动画所展示的Layers是使用了平面投射，本质就是核心动画将3维空间投射到2维平面上了。默认情况下，具有相同尺寸和不同zPosition的Layers看起来像是一样大的，即使他们在Z轴上的坐标是不同的，也就是说我们不能想正常的人眼视角观看这些三维场景。然而，我们可以通过修改Layers的transformation矩阵，加入人眼观看视角。
当调整一个三维场景的视角时，我们需要调整superlayer的sublayerTransform矩阵（superlayer包含这些可被看到的layers），通过调整superlayer能够简化代码的工作量（如果不通过调整superlayer那么我们就需要把相同的视角相关信息应用到所有的子Layer），同时他也确保了视角是正确应用到同级的sublayers上（同级的sublayers可能在不同的平面重叠交叉）。

代码5-8展示了为父Layer创建简单的视角transform。在这种情况下，自定义的人眼视角的变化将会改变沿着Z轴到Layer的距离。通常为了保证Layers以期望的方式，我们为人眼视角指定一个正数值。数值越大看到的越远，数值越小看到的会越细致。

 

代码5-8为父Layer添加视角transform

CATransform3D perspective = CATransform3DIdentity;
perspective.m34 = -1.0/eyePosition;
 
// Apply the transform to a parent layer.

 

在类似之上配置了父Layer情况下，我们可以改变任何子Layer的zPosition属性，并观察它们的尺寸（在基于它们到人眼位置）是如何变化的。