CAMediaTiming 协议属性详解

 

CAMediaTiming 协议属性详解

我们都知道，CALayer和CAAnimation都实现了CAMediaTiming 协议，因此在Core Animation中，理解CAMediaTiming协议中的属性是非常必要的，但是苹果的文档中对于各个属性描述太简单，对初学者容易理解，这篇文章主要帮助理解CAMediaTiming协议中各个属性的含义。

CAMediaTiming Protocol提供了8个属性，下面将分别讲解。

duration

Specifies the basic duration of the animation, in seconds.

上面是官方文档的解释，这个属性一目了然，不需要做过多的解释，唯一有一点需要注意的是我们设置的duration可能和动画进行的真实duration不一样，这个依赖与superlayer的time space 或者就是speed。

speed

Specifies how time is mapped to receiver’s time space from the parent time space. (required)

其实也比较好理解，如果一个动画A :duration为1秒，speed为1；而另一个动画B：duration为2秒，speed为2。则两个动画的效果是相同的。不过前提是它们的super layer相同。

属性repeatCount , repeatDuration, autoreverses很容易理解，再此不在讲述。下面主要讨论剩下的三个属性

beginTime

Specifies the begin time of the receiver in relation to its parent object, if applicable.

如果一个animation是在一个animation group中，则beginTime就是其parent object——animation group 开始的一个偏移。如果一个animation 的 beginTime为5，则此动画在group aniamtion开始之后的5s在开始动画。

如果一个animation是直接添加在layer上，beginTime同样是是其parent object——layer 开始的一个偏移，但是一个layer的beginning是一个过去的时间（猜想layer的beginning可能是其被添加到layer tree上的时间），因此不能简单的设置beginTime为5去延迟动画5s之后开始，因为有可能layer的beginning加上5s之后也是一个过去的时间（很有可能），因此，当要延迟一个添加到layer上的动画的时候，需要定义一个addTime，因此

[cpp]  view plain copy

1. animation.beginTime = addTime + delay;  

通过使用CACurrentMediaTime去获取addTime：

[cpp]  view plain copy

1. addTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];  

如果一个layer他自己的beginTime已经设置，则animation的addTime的计算必须在layer的beginTime设置之后，因为要有一个时间的转移，具体看下面的例子：

[cpp]  view plain copy

1. CFTimeInterval currentTime = CACurrentMediaTime();  
2. CFTimeInterval currentTimeInSuperLayer = [superLayer convertTime:currentTime fromLayer:nil];  
3. layer.beginTime = currentTimeInSuperLayer + 2;  
4. CFTimeInterval currentTimeInLayer = [layer convertTime:currentTimeInSuperLayer fromLayer:superLayer];  
5. CFTimeInterval addTime = currentTimeInLayer;  
6. CAAnimationGroup *group = [CAAnimationGroup animation];  
7. group.beginTime = addTime + 1;  
8. group.animations = [NSArray arrayWithObject:anim];  
9. group.duration = 2;  
10. anim.beginTime = 0.5;  
11. [layer addAnimation:group forKey:nil];  

timeOffset

Specifies an additional time offset in active local time. (required)

此句话不太容易理解，但是通过一个例子很容易理解。

假定一个3s的动画，它的状态为t0,t1,t2,t3，当没有timeOffset的时候，正常的状态序列应该为：

t0->t1->t2->t3

当设置timeOffset为1的时候状态序列就变为

t1->t2->t3->t0

同理当timeOffset为2的时候状态序列就变为：

t2->t3->t0=>t2

是不是理解了？

下面举一个例子，效果图参见空间图片地址 http://my.csdn.net/my/album/detail/1651105 （不知道怎么直接嵌入的，因为是个gif，直接上传也不会播放，哪位同学知道好的处理方法可以告诉我）

主要代码如下：

[cpp]  view plain copy

1. // Add layer.  
2.         CATextLayer *A = [CATextLayer layer];  
3.         A.string = @"A";  
4.         A.fontSize = 48;  
5.         A.foregroundColor = [UIColor blackColor].CGColor;  
6.         A.bounds = CGRectMake(0, 0, 48, 48);  
7.         A.position = self.center;  
8.         [self.layer addSublayer:A];  
9.           
10.         // Move animation.  
11.         CAKeyframeAnimation *move = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
12.         move.values = [NSArray arrayWithObjects:[NSValue valueWithCGPoint:CGPointMake(CGRectGetMinX(self.bounds), CGRectGetMaxY(self.bounds))], [NSValue valueWithCGPoint:CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMinY(self.bounds))], [NSValue valueWithCGPoint:CGPointMake(CGRectGetMaxX(self.bounds), CGRectGetMaxY(self.bounds))], nil];  
13.         move.calculationMode = kCAAnimationCubic;  
14.         move.duration = 10;  
15.         move.speed = 2;  
16.           
17.         // Opacity animation.  
18.         CABasicAnimation *opacity = [CABasicAnimation animationWithKeyPath:@"opacity"];  
19.         opacity.toValue = [NSNumber numberWithFloat:0];  
20.         opacity.duration = 2.5;  
21.         opacity.beginTime = 2.5; // Fade from the half way.  
22.           
23.         // Animatin group.  
24.         CAAnimationGroup *group = [CAAnimationGroup animation];  
25.         group.animations = [NSArray arrayWithObjects:move, opacity, nil];  
26.         group.duration = 8;  
27.         group.repeatCount = HUGE_VALF;  
28.           
29.         // Time warp.  
30.         CFTimeInterval currentTime = CACurrentMediaTime();  
31.         CFTimeInterval currentTimeInSuperLayer = [self.layer convertTime:currentTime fromLayer:nil];  
32.         A.beginTime = currentTimeInSuperLayer + 5; // Delay the appearance of A.  
33.         CFTimeInterval currentTimeInLayer = [A convertTime:currentTimeInSuperLayer fromLayer:self.layer];  
34.         CFTimeInterval addTime = currentTimeInLayer;  
35.         group.beginTime = addTime + 3; // Delay the animatin group.  
36.           
37.         [A addAnimation:group forKey:nil];  
38.           
39.         // Timer. For nice visual effect. Optional.  
40.         CATextLayer *timer = [CATextLayer layer];  
41.         timer.fontSize = 48;  
42.         timer.foregroundColor = [UIColor redColor].CGColor;  
43.         timer.bounds = CGRectMake(0, 0, 48, 48);  
44.         timer.position = self.center;  
45.         [self.layer addSublayer:timer];  
46.         CAKeyframeAnimation *count = [CAKeyframeAnimation animationWithKeyPath:@"string"];  
47.         count.values = [NSArray arrayWithObjects:@"5", @"4", @"3", @"2", @"1", nil];  
48.         CABasicAnimation *fade = [CABasicAnimation animationWithKeyPath:@"transform.scale"];  
49.         fade.toValue = [NSNumber numberWithFloat:0.2];  
50.         group = [CAAnimationGroup animation];  
51.         group.animations = [NSArray arrayWithObjects:count, fade, nil];  
52.         group.duration = 5;  
53.         [timer addAnimation:group forKey:nil];  

大概解释一下，其实就是先播放一个倒计时5-4-3-2-1的动画，之后在显示layer A，因为A的beginTime为5，而当A显示3秒之后，A上才开始做group的动画。

fillMode

文档中关于fillMode的讲解也不是很清楚，fillMode有4中类型

kCAFillModeRemoved (default)

kCAFillModeForwards

kCAFillModeBackwards

kCAFillModeBoth

用语言去解释这些属性，会让人难以理解，所以这里用例子去解释，看下面代码：

[cpp]  view plain copy

1. CALayer *colorLayer = [[ CALayer alloc] init];  
2. colorLayer.position = self.center;  
3. colorLayer.backgroundColor = [UIColor redColor].CGColor;  
4. colorLayer.bounds = CGRectMake(0.0f, 0.0f, 20.0f, 20.0f);  
5. [self.layer addSublayer:colorLayer];  
6.           
7. CABasicAnimation *boundAn = [CABasicAnimation animationWithKeyPath:@"bounds"];  
8. boundAn.fromValue = [NSValue valueWithCGRect:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)];  
9. boundAn.toValue = [NSValue valueWithCGRect:CGRectMake(0.0f, 0.0f, 400.0f, 400.0f)];  
10. boundAn.beginTime = 2.0f;  
11. boundAn.duration = 5.0f;  
12. boundAn.fillMode = kCAFillModeRemoved;  
13. CAAnimationGroup *group = [CAAnimationGroup animation];  
14. group.animations = [NSArray arrayWithObject:boundAn];  
15. group.duration = 10.0f;  
16.           
17. [colorLayer addAnimation:group forKey:nil];  

kCAFillModeRemoved也是fillMode的默认属性，此时动画的效果：开始时，colorLayer的size为（20，20），当到2s的时候，colorLayer的size突然就变为（100，100），然后开始做动画，当到7s的时候colorLayer的duration已经完成，此时colorLayer的size会突然 变为（20，20），然后在持续3s，当总时间到10s时结束。

当fillMode的属性设置为kCAFillModeForwards的时候，动画效果为：开始时，colorLayer的size为（20，20），当到2s的时候，colorLayer的size突然就变为（100，100），然后开始做动画，之前都和kCAFillModeRemoved都一样，不一样的时当到7s的时候colorLayer的duration已经完成，此时colorLayer的size还会保持在（400，400），然后在持续3s，当总时间到10s时结束，此时size才变为（20，20）

当fillMode的属性设置为kCAFillModeBackwards的时候，动画效果为：开始时，colorLayer的size就为（100，100），当到2s的时候，colorLayer开始做动画，当到7s的时候colorLayer的duration已经完成，此时colorLayer的size会突然 变为（20，20），然后在持续3s，当总时间到10s时结束。

kCAFillModeBoth就不在解释了，猜都能猜到应该是kCAFillModeForwards和kCAFillModeBackwards的结合。

至此，应该对CAMediaTiming 协议中的属性应该有一定了解了。