CAKeyframeAnimation 动画学习

CAKeyframeAnimation 关键动画实现
第一种：通过设置不同的属性值来进行关键帧控制，
第二种：通过绘制路径进行关键帧控制,

（本文gif效果图感觉有延迟问题，实际可自行敲出来看看）

   CALayer *layer = [[CALayer alloc] init];
    layer.bounds            = CGRectMake(0, 0, 20, 20);
    layer.backgroundColor   = [UIColor blueColor].CGColor;
    layer.position          = CGPointMake(10, 10);
    [self.view.layer addSublayer:layer];

    CAKeyframeAnimation *KeyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *val1 = [NSValue valueWithCGPoint:CGPointMake((self.view.bounds.size.width-10)/2, 50)];
    NSValue *val2 = [NSValue valueWithCGPoint:CGPointMake(10, 200)];
    NSValue *val3 = [NSValue valueWithCGPoint:CGPointMake(self.view.bounds.size.width-10, 300)];
    NSValue *val4 = [NSValue valueWithCGPoint:CGPointMake(10, 500)];
    NSValue *val5 = [NSValue valueWithCGPoint:CGPointMake((self.view.bounds.size.width-20)/2, 700)];

    NSArray *values = @[val1,val2,val3,val4,val5];
    KeyframeAnimation.values = values;
    KeyframeAnimation.duration = 10.0;
    KeyframeAnimation.removedOnCompletion = NO;
    KeyframeAnimation.fillMode = kCAFillModeForwards;
    KeyframeAnimation.repeatCount = HUGE_VAL;
    [layer addAnimation:KeyframeAnimation forKey:@"keyAnimation"];

效果如下：图片

RPReplay_Final1645604097.gif

补充一些关键帧的特有属性:

keyTimes:各个关键帧的时间控制
比如 values 有四个关键帧, duration间隔为 6
那么每两个关键帧之间的时间间隔是: 6/(4-1),
如果我现在想让他们的时间间隔,这时候就需要用到 keyTimes,例如我设置如下：
animation.keyTimes = @[@0,@0.3,@0.8,@1];
第一帧到第二帧需要的时间到达总时间的 0.3,
第二帧到第三帧时,需要到达总时间的 0.8,
第三帧到最后一帧需要到达总时间 1,

[注意:到达很重要,意思就是占总时间的百分比]

caculationMode

动画常见的模式类型有：
kCAAnimationLinear 连续的,默认就是这种
kCAAnimationDiscrete 离散式,会直接跳转过去
kCAAnimationPaced 匀速执行,会忽略keyTimes
kCAAnimationCubic 平滑执行,运动轨迹更加平滑
kCAAnimationCubicPaced 平滑匀速执行

在上面代码中把caculationMode属性设置后看看效果：

    keyAnimation.calculationMode = kCAAnimationCubic;

效果如下：

![RPReplay_Final1645604288.gif](https://upload-images.jianshu.io/upload_images/1684093-9df01affca083145.gif?imageMogr2/auto-orient/strip)

现在我们看看第二种写法：

    CALayer *layer          = [[CALayer alloc] init];
    layer.bounds            = CGRectMake(0, 0, 20, 20);
    layer.backgroundColor   = [UIColor blueColor].CGColor;
    layer.position          = CGPointMake(5, 5);
    [self.view.layer addSublayer:layer];

    CAKeyframeAnimation *KeyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    UIBezierPath *bezier    = [UIBezierPath bezierPathWithRect:CGRectMake(50, 100, 300, 300)];
    KeyframeAnimation.path       = bezier.CGPath;
    KeyframeAnimation.duration   = 6.0;
    KeyframeAnimation.removedOnCompletion    = NO;
    KeyframeAnimation.fillMode               = kCAFillModeForwards;
    KeyframeAnimation.calculationMode        = kCAAnimationCubicPaced;
    [layer addAnimation:KeyframeAnimation forKey:@"KeyframeAnimation"];

效果如下：

RPReplay_Final1645604288.gif

缩放效果

UIView * view = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    view.backgroundColor = UIColor.blueColor;
    [self.view addSubview:view];
    
//    CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];//整体变化
    CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.x"];//宽变化
//    CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];//高变化
    animation.duration  = 0.6;// 动画时间
    NSMutableArray *values = [NSMutableArray array];
    // 前两个是控制view的大小的；[缩小效果]
//    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]];
//    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.8, 0.8, 1.0)]];
//    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]];
    
    // 前两个是控制view的大小的；[放大效果]
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.3, 1.3, 1.0)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]];
    
    animation.values = values;
    animation.repeatCount = HUGE;//重复
    [view.layer addAnimation:animation forKey:nil];

效果图：

RPReplay_Final1645605352.gif