CAKeyframeAnimation实用笔记

上一篇CABasicAnimation实用笔记我们对CABasicAnimation做了相关介绍，今天我们来简单了解一下CAKeyframeAnimation（关键帧动画）。
CAPropertyAnimation的子类，和CABasicAnimation类似，用法有区别。CABasicAnimation的变化可以通过其属性fromValue/toValue来设置，而CAKeyframeAnimation则可以借助于一个数组（values）来存放动画的属性数值/或者通过一条路径（path）来完成动画。

属性

以下是CAPropertyAnimation有以下一些常用的属性：

//上文提到的数值数组
@property(nullable, copy) NSArray *values;

//上文提到的帧路径 可以设置成CGPathRef\CGMutablePathRef
@property(nullable) CGPathRef path;

//保存时间数组和values个数相等 取之范围是0---1，其表示在相邻两个值之间变化所占的时间百分比。默认是平分。
@property(nullable, copy) NSArray<NSNumber *> *keyTimes;

//一个时间函数定义动画的节奏。默认为nil表示线性踱来踱去。
{
CA_EXTERN NSString * const kCAMediaTimingFunctionLinear
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseIn
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseOut
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseInEaseOut
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAMediaTimingFunctionDefault
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
}
@property(nullable, copy) NSArray<CAMediaTimingFunction *> *timingFunctions;
//计算模式
{
kCAAnimationLinear calculationMode的默认值,表示当关键帧为座标点的时候,关键帧之间直接直线相连进行插值计算;
kCAAnimationDiscrete 离散的,就是不进行插值计算,所有关键帧直接逐个进行显示;
kCAAnimationPaced 使得动画均匀进行,而不是按keyTimes设置的或者按关键帧平分时间,此时keyTimes和timingFunctions无效;
kCAAnimationCubic 对关键帧为座标点的关键帧进行圆滑曲线相连后插值计算,对于曲线的形状还可以通过tensionValues,continuityValues,biasValues来进行调整自定义,这里的数学原理是Kochanek–Bartels spline,这里的主要目的是使得运行的轨迹变得圆滑;
kCAAnimationCubicPaced 看这个名字就知道和kCAAnimationCubic有一定联系,其实就是在kCAAnimationCubic的基础上使得动画运行变得均匀,就是系统时间内运动的距离相同,此时keyTimes以及timingFunctions也是无效的.
}
@property(copy) NSString *calculationMode;

//曲线的形状 还可以通过tensionValues,continuityValues,biasValues进行调整自定义
@property(nullable, copy) NSArray<NSNumber *> *tensionValues;//此属性仅用于立方计算模式。正值表明严格的曲线,负值表示圆曲线。第一个值定义的行为切第一个控制点,第二个值控制第二点的切线,等等。如果你不指定一个值对于一个给定的控制点,使用值0。

@property(nullable, copy) NSArray<NSNumber *> *continuityValues;//此属性仅用于立方计算模式。正值导致尖锐角落而负创建倒角。第一个值定义的行为切第一个控制点,第二个值控制第二点的切线,等等。如果你不指定一个值对于一个给定的控制点,使用值0。

@property(nullable, copy) NSArray<NSNumber *> *biasValues;//此属性仅用于立方计算模式。正值移动前的曲线控制点,控制点后负移动它。第一个值定义的行为切第一个控制点,第二个值控制第二点的切线,等等。如果你不指定一个值对于一个给定的控制点,使用值0。

//定义对象的动画是否沿着路径旋转以匹配路径的切线。可能的值是auto和autoreverse。默认值零。将此属性设置为非零值时的效果。没有提供未定义的路径对象。autoreverse旋转匹配切线加180度。
{
CA_EXTERN NSString * const kCAAnimationRotateAuto
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationRotateAutoReverse
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
}
@property(nullable, copy) NSString *rotationMod
此外，CAKeyframeAnimation的一些属性：autoreverses，repeatCount，duration，removedOnCompletion……和CABasicAnimation使用方法相同，在此不再介绍。

动画实现

//values

-(void)test6{
    CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value_point = [NSValue valueWithCGPoint:CGPointMake(50, SCREEN_HEIGHT/2-100)];
    NSValue *value_point1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-100)];
    NSValue *value_point2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+100)];
    NSValue *value_point3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3*2, SCREEN_HEIGHT/2+100)];
    NSValue *value_point4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3*2, SCREEN_HEIGHT/2-100)];
    NSValue *value_point5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH - 50, SCREEN_HEIGHT/2-100)];
    keyframeAnimation.values = @[value_point,value_point1,value_point2,value_point3,value_point4,value_point5];
    keyframeAnimation.duration = 2.0f;
    [self.testView.layer addAnimation:keyframeAnimation forKey:@"positionAnimation"];
}

//path

-(void)test7{
    CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //圆
    UIBezierPath *bezier = [UIBezierPath bezierPathWithArcCenter:CGPointMake(SCREEN_WIDTH / 2, SCREEN_HEIGHT/2) radius:100.0f startAngle:0 endAngle:M_PI*2 clockwise:YES];
    keyframeAnimation.duration = 1.0f;
    keyframeAnimation.path = bezier.CGPath;
    [self.testView.layer addAnimation:keyframeAnimation forKey:@"positionAnimation"];
}

//窗口抖动效果

-(void)test8{
    CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
    NSValue *value1 = [NSNumber numberWithFloat:-M_PI/180*5];
    NSValue *value2 = [NSNumber numberWithFloat:M_PI/180*5];
    NSValue *value3 = [NSNumber numberWithFloat:-M_PI/180*5];
    keyframeAnimation.values = @[value1,value2,value3];
    keyframeAnimation.repeatCount = MAXFLOAT;
    [self.testView.layer addAnimation:keyframeAnimation forKey:@"shakeAnimation"];
}