CAKeyframeAnimation—关键帧动画

一、简介

• 关键帧动画，也是CAPropertyAnimation的子类

结构图.png

二、与CABasicAnimation的区别

• CABasicAnimation：

  • 只能从一个数值（fromValue）变到另一个数值（toValue）

• CAKeyframeAnimation：

  • 会使用一个NSArray保存这些数值

• CABasicAnimation可看做是只有2个关键帧的CAKeyframeAnimation关键帧动画

三、属性说明

values 关键帧数组

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

path 路径轨迹

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

keyTimes：关键帧所对应的时间点

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

四、实例

• 实例：

  
  
  

  关键帧动画.gif
  • 控制器的view上，1.绿色的view，椭圆路径位移；2._redLayer 抖动动画

• 代码实现：如下

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *greenView;

@property (nonatomic, weak) CALayer *redLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 1. 添加redLayer图层 到view.layer上
    CALayer *layer = [CALayer layer];
    
    _redLayer = layer;
    
    layer.backgroundColor = [UIColor redColor].CGColor;
    
    layer.frame = CGRectMake(50, 50, 200, 200);
    
    [self.view.layer addSublayer:_redLayer];
}

- (void)touchesBegan:(nonnull NSSet *)touches withEvent:(nullable UIEvent *)event{
    
    /** 2. 绿色的view，椭圆路径位移  */
    [self positionChange];
    
    /** _redLayer 抖动 动画 */
     
    [self anim];
}

- (void)positionChange{
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    
    anim.keyPath = @"position";
    
    anim.duration = 2;
    
    // 取消反弹
    // 告诉在动画结束的时候不要移除
    anim.removedOnCompletion = NO;
    // 始终保持最新的效果
    anim.fillMode = kCAFillModeForwards;
    
    // Oval 椭圆  路径轨迹
    anim.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 300, 300)].CGPath;
    
    // 将动画对象添加到 绿色视图的layer上去
    [_greenView.layer addAnimation:anim forKey:nil];
}


/**
 * _redLayer 抖动动画
 */
- (void)anim{
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    
    anim.duration = 0.3;
    anim.keyPath = @"transform";
    NSValue *value =  [NSValue valueWithCATransform3D:CATransform3DMakeRotation((-15) / 180.0 * M_PI, 0, 0, 1)];
    NSValue *value1 =  [NSValue valueWithCATransform3D:CATransform3DMakeRotation((15) / 180.0 * M_PI, 0, 0, 1)];
    NSValue *value2 =  [NSValue valueWithCATransform3D:CATransform3DMakeRotation((-15) / 180.0 * M_PI, 0, 0, 1)];
    anim.values = @[value,value1,value2];
    
    anim.repeatCount = MAXFLOAT;
    
    [_redLayer addAnimation:anim forKey:nil];
}
@end