之二：CAKeyframeAnimation - 关键帧动画

是CApropertyAnimation的子类，跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值，就可以实现CALayer的某一属性按照一串的数值进行动画，就好像制作动画的时候一帧一帧的制作一样。

几个关键属性：

  • values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧
  • path：设置一个CGPathRef\CGMutablePathRef的路径对象，默认nil，让CALayer跟着路径移动。path只对CALayer的anchorPoint(锚点)和position(位置)起作用。如果你设置了path，那么values将被忽略
  • keyTimes：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的

说明：CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

- Values方式

 1 // 创建5个关键帧的点对象
 2 CGPoint p1 = CGPointMake(50, 120);
 3 CGPoint p2 = CGPointMake(80, 170);
 4 CGPoint p3 = CGPointMake(30, 100);
 5 CGPoint p4 = CGPointMake(100, 190);
 6 CGPoint p5 = CGPointMake(200, 10);
 7 
 8 // 将创建的关键帧放入数组中，用NSValue结构体类型转化成对象
 9 NSArray *values = [NSArray arrayWithObjects:[NSValue valueWithCGPoint:p1], [NSValue valueWithCGPoint:p2], [NSValue valueWithCGPoint:p3], [NSValue valueWithCGPoint:p4], [NSValue valueWithCGPoint:p5], nil];
10 
11 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
12 
13 // 给Values属性赋值
14 [animation setValues:values];
15 
16 // 动画完成后保持最新状态
17 animation.removedOnCompletion = NO;
18 animation.fillMode = kCAFillModeForwards;
19 
20 animation.duration = 4.0;
21 
22 // 动画定时函数属性
23 animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
24 
25 animation.delegate=self;
26 
27 [self.myView.layer addAnimation:animation forKey:nil];
  • 第23行：timingFunction 用于变化起点和终点之间的插值计算,形象点说它决定了动画运行的节奏
  1. kCAMediaTimingFunctionLinear            线性,即匀速 
  2. kCAMediaTimingFunctionEaseIn            先慢后快 
  3. kCAMediaTimingFunctionEaseOut           先快后慢 
  4. kCAMediaTimingFunctionEaseInEaseOut     先慢后快再慢 
  5. kCAMediaTimingFunctionDefault           实际效果是动画中间比较快. 
  • 注意：当上面的预置不能满足你的需求的时候,你可以使用下面的两个方法来自定义你的timingFunction 

     *  + (id)functionWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y; 

     *  - (id)initWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y; 

- Path方式：

 1 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
 2 
 3 CGMutablePathRef myPath = CGPathCreateMutable();
 4 
 5 // 将路径的起点定位到（50, 120）  
 6 CGPathMoveToPoint(myPath, NULL, 50.0, 120.0);
 7 
 8 // 添加5条直线的路径到myPath中
 9 CGPathAddLineToPoint(myPath, NULL, 60, 130);
10 CGPathAddLineToPoint(myPath, NULL, 70, 140);
11 CGPathAddLineToPoint(myPath, NULL, 80, 150);
12 CGPathAddLineToPoint(myPath, NULL, 90, 160);
13 CGPathAddLineToPoint(myPath, NULL, 100, 170);
14 
15 // 添加4条曲线路径到myPath中
16 CGPathAddCurveToPoint(myPath,NULL,50.0,275.0,150.0,275.0,70.0,120.0);
17 CGPathAddCurveToPoint(myPath,NULL,150.0,275.0,250.0,275.0,90.0,120.0);
18 CGPathAddCurveToPoint(myPath,NULL,250.0,275.0,350.0,275.0,110.0,120.0);
19 CGPathAddCurveToPoint(myPath,NULL,350.0,275.0,450.0,275.0,130.0,120.0);
20 
21 //以"position"为关键字创建 实例
22 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
23 
24 // 是否动画回到原位
25 [animation setAutoreverses:YES];
26 
27 // 设置path属性
28 animation.path = myPath;
29 
30 // 释放路径
31 CGPathRelease(myPath);
32 
33 animation.removedOnCompletion = NO;
34 animation.fillMode = kCAFillModeForwards;
35 
36 animation.duration = 4.0;
37 
38 animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
39 
40 animation.delegate=self;
41 
42 [self.myView.layer addAnimation:animation forKey:nil];

 - 其他属性

  • calculationMode 这个属性用来设定 关键帧中间的值是怎么被计算的
posted @ 2016-02-18 15:29  多两口  阅读(607)  评论(0)  编辑  收藏  举报