layer 动画解释笔记

一个个Layer通过tree的结构组织起来，在Display的过程中实际上有3种Layer tree。

1. model layer tree (模型层树)

   我们通常意义说的Layer。当我们修改layer中的属性时，就会立刻修改model layer tree。

2. presentation tree (表示层树)

   Layer在屏幕中的真实位置，或者说在动画的过程中，layer 的位置

3. render tree (渲染树)

   apple的render server进程中，是真正处理动画的地方。而且线程的优先级也比我们主线程优先级高。所以有时候即使我们的App主线程busy，依然不会影响到手机屏幕的绘制工作

基本动画

CABasicAnimation 简单的为图层的属性提供修改。

场景，简单的位移动画

1 2 3 4 5 6 7 8

CABasicAnimation * animation = [CABasicAnimation animation]; animation. keyPath = @ "position.x"; animation. fromValue = @ 77; animation. toValue = @ 200; animation. duration = 3; [self.v.layer addAnimation:animation forKey:@ "basic"]; self.v.layer. position = CGPointMake( 200, 25);

多步动画

CAKeyframeAnimation 支持关键帧动画,你可以指定的图层属性的关键路径
动画,包括动画的每个阶段的价值,以及关键帧时间和计时功能的一系列值。在 动画运行是,每个值被特定的插入值替代。

场景 动画定义超过两个步骤。

1 2 3 4 5 6 7 8 9

CAKeyframeAnimation *animation = [ CAKeyframeAnimation animation]; animation.keyPath = @ "position.x"; animation.values = @[ @0, @10, @- 10, @10, @0 ]; animation.keyTimes = @[ @0, @( 1 / 6.0), @( 3 / 6.0), @( 5 / 6.0), @1 ]; animation.duration = 0. 4; animation.additive = YES; [form.layer addAnimation:animation forKey:@ "shake"];

1. values 数组定义了表单应该到哪些位置。
2. 设置 keyTimes 属性让我们能够指定关键帧动画发生的时间。它们被指定为关键帧动画总持续时间的一个分数。我们看到是要去 5 个位置，就是 6 步操作，为了保证恒速，我们每 10pt 用 1/6 的keytime
3. 设置 additive 属性为 YES 使 Core Animation 在更新presentation layer 之前将动画的值添加到 model layer 中去。这使我们能够对所有形式的需要更新的元素重用相同的动画，且无需提前知道它们的位置。因为这个属性从 CAPropertyAnimation 继承，所以你也可以在使用 CABasicAnimation 时使用它。 additive ，动画被设置成相对的。

沿路径动画

虽然用代码实现一个简单的水平晃动并不难，但是沿着复杂路径的动画就需要我们在关键帧的 values 数组中存储大量 box 化的 CGPoint。 值得庆幸的是，CAKeyframeAnimation 提供了更加便利的 path 属性作为代替。

1 2 3 4 5 6 7 8 9 10 11 12

CGRect boundingRect = CGRectMake(- 150, - 150, 300, 300); CAKeyframeAnimation * orbit = [CAKeyframeAnimation animation]; orbit. keyPath = @ "position"; orbit. path = CFAutorelease(CGPathCreateWithEllipseInRect(boundingRect, NULL)); orbit. duration = 4; orbit. additive = YES; orbit. repeatCount = HUGE_VALF; orbit. calculationMode = kCAAnimationPaced; orbit. rotationMode = kCAAnimationRotateAuto; [satellite.layer addAnimation:orbit forKey:@ "orbit"];

1. CGPathCreateWithEllipseInRect()，创建一个椭圆形的不可改变的路径，我们创建一个圆形的 CGPath 作为我们的关键帧动画的 path。
2. calculationMode 是控制关键帧动画时间的另一种方法。我们通过将其设置为 kCAAnimationPaced，让 Core Animation 向被驱动的对象施加一个恒定速度，不管路径的各个线段有多长。将其设置为 kCAAnimationPaced 将无视所有我们已经设置的 keyTimes。
3. rotationMode 属性为 kCAAnimationRotateAuto 确保飞船沿着路径旋转。作为对比，如果我们将该属性设置为 nil 那动画会是什么样的呢

我个人更建议这么写

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

CGPoint arcCenter=CGPointMake( 100, 100); // 中心锚点 int radius = 100; // 半径 UIBezierPath * circlePath = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:radius startAngle:DEGREES_TO_RADIANS(- 180) endAngle:DEGREES_TO_RADIANS( 180) clockwise:YES]; CAKeyframeAnimation * orbit = [CAKeyframeAnimation animation]; orbit. keyPath = @ "position"; orbit. path = circlePath.CGPath; orbit. duration = 4; orbit. additive = YES; orbit. repeatCount = HUGE_VALF; orbit. calculationMode = kCAAnimationPaced; orbit. rotationMode = kCAAnimationRotateAuto; [self.v.layer addAnimation:orbit forKey:@ "orbit"];

bezierPathWithArcCenter 方法在 api 里写的很清楚，clockwise 为 YES 为顺时针，NO 为逆时针

同样，看图

时间函数

之前的动画都是匀速的，如何让动画更生动通过引入一个 时间函数 (timing function) （有时也被称为 easing 函数）来实现这个目标。该函数通过修改持续时间的分数来控制动画的速度。
最简单的 easing 函数是 linear。它在整个动画上维持一个恒定的速度。在 Core Animation 中，这个功能由 CAMediaTimingFunction 类表示。

1 2 3 4 5 6 7 8 9 10 11

CABasicAnimation * animation = [CABasicAnimation animation]; animation. keyPath = @ "position.x"; animation. fromValue = @ 50; animation. toValue = @ 150; animation. duration = 1; animation. timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; [rectangle.layer addAnimation:animation forKey:@ "basic"]; rectangle.layer. position = CGPointMake( 150, 0);

这部分不再细说，直接看 RBBAnimation， 它包含一个允许使用 更多复杂 easing 函数 的自定义子类 CAKeyframeAnimation

动画组

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

CABasicAnimation * zPosition = [CABasicAnimation animation]; zPosition. keyPath = @ "zPosition"; zPosition. fromValue = @- 1; zPosition. toValue = @ 1; zPosition. duration = 1.2; CAKeyframeAnimation * rotation = [CAKeyframeAnimation animation]; rotation. keyPath = @ "transform.rotation"; rotation. values = @[ @ 0, @ 0.14, @ 0 ]; rotation. duration = 1.2; rotation. timingFunctions = @[ [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut], [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut] ]; CAKeyframeAnimation * position = [CAKeyframeAnimation animation]; position. keyPath = @ "position"; position. values = @[ [NSValue valueWithCGPoint:CGPointZero], [NSValue valueWithCGPoint:CGPointMake( 110, - 20)], [NSValue valueWithCGPoint:CGPointZero] ]; position. timingFunctions = @[ [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut], [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut] ]; position. additive = YES; position. duration = 1.2; CAAnimationGroup * group = [[CAAnimationGroup alloc] init]; group. animations = @[ zPosition, rotation, position ]; group. duration = 1.2; // group. beginTime = 0.5; 这里如果设置了会出错，原文章设置 [card.layer addAnimation:group forKey:@ "shuffle"]; card.layer. zPosition = 1;

一些属性

position

图层的 position 属性是一个 CGPoint 的值,它指定图层相当于它父图层的位置, 该值基于父图层的坐标系。
在不修改layer其他属性的情况下，layer.position = view.center
可看图

提到的其他有趣的文章

1.  关于动画时间的一篇很棒的文章
2.  CAShapeLayer路径动画

参考

1. http://www.cocoachina.com/industry/20140701/8995.html

声明

1. 这是一篇关于 http://objccn.io/issue-12-1/ 的学习笔记，概念大多copy原著，如有侵权，请联系本人删除。