CAKeyframeAnimation—关键帧动画

96
iOS_成才录
2015.11.12 19:25* 字数 324

一、简介

  • 关键帧动画,也是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<UITouch *> *)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
核心动画
Web note ad 1