IOS 之 CAKeyframeAnimation

参考传智课堂

•关键帧动画，也是CAPropertyAnimation的子类，与CABasicAnimation的区别是：

–CABasicAnimation只能从一个数值（fromValue）变到另一个数值（toValue），而CAKeyframeAnimation 会使用一个 NSArray 保存这些数值

•属性说明：

–values：上述的NSArray对象。里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间（duration）内，依次显示values数组中的每一个关键帧

–path：可以设置一个CGPathRef、CGMutablePathRef，让图层按照路径轨迹移动。path只对CALayer的anchorPoint和position起作用。如果设置了path，那么values将被忽略

–keyTimes：可以为对应的关键帧指定对应的时间点，其取值范围为0到1.0，keyTimes中的每一个时间值都对应values中的每一帧。如果没有设置keyTimes，各个关键帧的时间是平分的

理解

CABasicAnimation 既然是CAPropertyAnimation的子类 也就是说该类还是可以通过keyPath 的方式去访问对象的属性来更改动画轨迹。

使用方式

给多个值改变View 的运行轨迹 代码如下:

1.指定keypath路径

2.给定多个数据

3.添加到values 

4.添加到视图layer

  CAKeyframeAnimation *animation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
   NSValue *v1=[NSValue valueWithCGPoint:CGPointMake(160, 50)];
   NSValue *v2=[NSValue valueWithCGPoint:CGPointMake(320-50, 274)];
   NSValue *v3=[NSValue valueWithCGPoint:CGPointMake(160, 548-50)];
   NSValue *v4=[NSValue valueWithCGPoint:CGPointMake(50, 274)];
   animation.values=[NSArray arrayWithObjects:v1,v2,v3,v4,v1, nil];
   animation.duration =4.0f;

   animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
   animation.repeatCount=100000;
   [animatedview.layer addAnimation:animation forKey:nil];

按照路径的方式运动 代码如下

    CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    [anim setDuration:duration];
    CGMutablePathRef path = CGPathCreateMutable(); //创建路径
    CGRect rect = CGRectMake(self.center.x, self.center.y, 100, 100); //给定大小
    CGPathAddRect(path, nil, rect);
    [anim setPath:path];
    CGPathRelease(path);
    [self.layer addAnimation:anim forKey:nil];

贝赛尔曲线运动 轨迹

0.创建路径

1. CGPathMoveToPoint  设置起点

2.给一个控制点 根据该点 来话贝塞尔曲线

3.给一个终点 

 CGPathAddQuadCurveToPoint(path, NULL, 控制点X轴,  控制点Y轴,终点X轴,终点Y轴);

 CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    [anim setDuration:duration];
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, self.center.x, self.center.y);
    CGPathAddQuadCurveToPoint(path, NULL,100,100, 300, 500);
    [anim setPath:path];
    CGPathRelease(path);
    [anim setDelegate:self];
    [self.layer addAnimation:anim forKey:nil];

晃动动画  利用帧动画实现

 // 1. 实例化关键帧动画
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
    
    // 晃动
//    [anim setDuration:0.5f];
    // 1> 角度
    CGFloat angel = M_PI_4 / 12.0;
    [anim setValues:@[@(angel), @(-angel), @(angel)]];
    
    // 2> 循环晃
    [anim setRepeatCount:HUGE_VALF];
    
    // 3. 将动画添加到图层
    [self.layer addAnimation:anim forKey:nil];