关键帧动画CAKeyframeAnimation

来源：互联网发布：手机扫描端口编辑：程序博客网时间：2024/04/28 07:10

之所以叫做关键帧动画是因为，这个类可以实现，某一属性按照一串的数值进行动画，就好像制作动画的时候一帧一帧的制作一样。

一般使用的时候首先通过 animationWithKeyPath 方法创建一个CAKeyframeAnimation实例，

CAKeyframeAnimation 的一些比较重要的属性

1. path

这是一个 CGPathRef 对象，默认是空的，当我们创建好CAKeyframeAnimation的实例的时候，可以通过制定一个自己定义的path来让某一个物体按照这个路径进行动画。这个值默认是nil 当其被设定的时候 values 这个属性就被覆盖

2. values

一个数组，提供了一组关键帧的值，当使用path的时候 values的值自动被忽略。

下面是一个简单的例子效果为动画的连续移动一个block到不同的位置

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
CGMutablePathRef path = CGPathCreateMutable();
    //将路径的起点定位到  （50  120）  
    CGPathMoveToPoint(path,NULL,50.0,120.0);
    //下面5行添加5条直线的路径到path中
    CGPathAddLineToPoint(path, NULL, 60, 130);
    CGPathAddLineToPoint(path, NULL, 70, 140);
    CGPathAddLineToPoint(path, NULL, 80, 150);
    CGPathAddLineToPoint(path, NULL, 90, 160);
    CGPathAddLineToPoint(path, NULL, 100, 170);
    //下面四行添加四条曲线路径到path
    CGPathAddCurveToPoint(path,NULL,50.0,275.0,150.0,275.0,70.0,120.0);
    CGPathAddCurveToPoint(path,NULL,150.0,275.0,250.0,275.0,90.0,120.0);
    CGPathAddCurveToPoint(path,NULL,250.0,275.0,350.0,275.0,110.0,120.0);
    CGPathAddCurveToPoint(path,NULL,350.0,275.0,450.0,275.0,130.0,120.0);
    //以“position”为关键字 创建 实例
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //设置path属性
    [animation setPath:path];
    [animation setDuration:3.0];
    //这句代码 表示 是否动画回到原位
   // [animation setAutoreverses:YES];
    CFRelease(path);
    [self.block.layer addAnimation:animation forKey:NULL];

运行后 block会先沿着直线移动，之后再沿着设定的曲线移动，完全按照我们设定的“关键帧”移动。

下面一个例子是利用values制作的动画

?
1
2
3
4
5
6
7
8
9
10
11
CGPoint p1=CGPointMake(50, 120);
    CGPoint p2=CGPointMake(80, 170);
    CGPoint p3=CGPointMake(30, 100);
    CGPoint p4=CGPointMake(100, 190);
    CGPoint p5=CGPointMake(200, 10);
    NSArray *values=[NSArray arrayWithObjects:[NSValue valueWithCGPoint:p1],[NSValue valueWithCGPoint:p2],[NSValue valueWithCGPoint:p3],[NSValue valueWithCGPoint:p4],[NSValue valueWithCGPoint:p5], nil];
    CAKeyframeAnimation
    *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; [animation setValues:values];
    [animation setDuration:3.0];
    [animation setAutoreverses:YES];
    [self.block.layer addAnimation:animation forKey:NULL];

也非常简单，到目前位置，只用到了CAKeyframeAnimation的两个关键属性就能完成动画，下面的一些属性提供了更加细致化，更加强大的功能。

设定每一帧的时间

默认情况下,一帧动画的播放,分割的时间是动画的总时间除以帧数减去一。你可以通过下面的公式决定每帧动画的时间:总时间/(总帧数-1)。例如,如果你指定了一个 5 帧,10 秒的动画,那么每帧的时间就是 2.5 秒钟:10/(5-1)=2.5。你可以做更多的控制通过使用 keyTimes 关键字,你可以给每帧动画指定总时间之内的某个时间点。

通过设置属性keyTimes，能实现这个功能，这个属性是一个数组，其成员必须是NSNumber。

同时这个属性的设定值要与calculationMode属性相结合，同时他们有一定的规则，

The appropriate values in the keyTimes array are dependent on the calculationMode property.

If the calculationMode is set to kCAAnimationLinear, the first value in the array must be 0.0 and the last value must be 1.0. Values are interpolated between the specified key times.
If the calculationMode is set to kCAAnimationDiscrete, the first value in the array must be 0.0.
If the calculationMode is set to kCAAnimationPaced or kCAAnimationCubicPaced, the keyTimes array is ignored。

如果keyTimes的值不合法，或者不符合上面的规则，那么就会被忽略。

?
1
2
3
4
5
[animation setCalculationMode:kCAAnimationLinear]; [animation setKeyTimes:
[NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.25], [NSNumber numberWithFloat:0.50],
[NSNumber numberWithFloat:0.75], [NSNumber numberWithFloat:1.0], nil]];

calculationMode

这个属性用来设定关键帧中间的值是怎么被计算的

可选的值有

NSString * const kCAAnimationLinear;NSString * const kCAAnimationDiscrete;   只展示关键帧的状态，没有中间过程，没有动画。NSString * const kCAAnimationPaced;NSString * const kCAAnimationCubic;NSString * const kCAAnimationCubicPaced;




关键帧动画的基础步骤

1.决定你想要做动画的属性(例如,框架,背景,锚点,位置,边框,等等) 2.在动画对象值的区域中,指定开始,结束,和中间的值。这些都是你的关键帧(看清单 4-2)
3.使用 duration 这个字段指定动画的时间
4.通常来讲,通过使用 times 这个字段,来给每帧动画指定一个时间。如果你没有指定这些,核心动画就

会通过你在 values 这个字段指定的值分割出时间段。
5.通常,指定时间功能来控制步调。这些都是你需要做的。你创建你的动画和增加他们到层中。调用-addAnimation 就开始了动画。