简介
CAKeyframeAnimation是核心动画里的关键帧动画,允许我们在起点与终点间自定义 更多内容来达到我们的实际应用需求。CAKeyframeAnimation和CABaseAnimation都属CAPropertyAnimatin的子类。
属性
| 属性 | 解释 |
|---|---|
| values | 关键帧数组对象，里面每一个元素即为一个关键帧，动画会在对应的时间段内，依次执行数组中每一个关键帧的动画。 只有在path属性值为nil的时候才有作用 |
| path | 动画路径对象，可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。 path只对CALayer的anchorPoint和position起作用。 如果设置了path，那么values将被忽略 |
| keyTimes | 设置关键帧对应的时间点，范围：0-1。 如果没有设置该属性，则每一帧的时间平分。 |
| cacluationMode | 在关键帧动画中还有一个非常重要的参数,那便是calculationMode,计算模式.其主要针对的是每一帧的内容为一个座标点的情况,也就是对anchorPoint 和 position 进行的动画.当在平面座标系中有多个离散的点的时候,可以是离散的,也可以直线相连后进行插值计算,也可以使用圆滑的曲线将他们相连后进行插值计算. kCAAnimationLinear calculationMode的默认值,r自定义控制动画的时间（线性）可以设置keyTimes,表示当关键帧为座标点的时候,关键帧之间直接直线相连进行插值计算; kCAAnimationDiscrete 离散的,就是不进行插值计算,所有关键帧直接逐个进行显示; kCAAnimationPaced 节奏动画自动计算动画的运动时间,使得动画均匀进行,而不是按keyTimes设置的或者按关键帧平分时间,此时keyTimes和timingFunctions无效; kCAAnimationCubic 对关键帧为座标点的关键帧进行圆滑曲线相连后插值计算,对于曲线的形状还可以通过tensionValues,continuityValues,biasValues来进行调整自定义,这里的数学原理是Kochanek–Bartels spline,这里的主要目的是使得运行的轨迹变得圆滑,曲线动画需要设置timingFunctions kCAAnimationCubicPaced 看这个名字就知道和kCAAnimationCubic有一定联系,其实就是在kCAAnimationCubic的基础上使得动画运行变得均匀,就是系统时间内运动的距离相同,此时keyTimes以及timingFunctions也是无效的. |
| keyTimes | 一个包含若干NSNumber对象值的数组，用来区分动画的分割时机。值得注意的是,这些NSNumber对象的浮点型值在0.0~1.0之间。里面的值后一个比前一个要大或者相等。最好的结果是这个数组中的值和values里面的值或者path控制的值对应，否则可能会出现不了你想要的结果。属性为应用在每一关键帧指定应用到每一个关键帧上的计时器。该属性只在calculationMode属性被设置为kCAAnimationLinear，kCAAnimaitonDiscrete，kCAAnimationCubic时被使用。它不使用在节奏动画中。keyTimes定义了应用在每一关键帧的时间点。所有中间值的定时由定时函数控制，定时函数允许你对各个部分应用缓入或缓出曲线定时。如果你不指定任何定时函数，动画将会是线性的 |
| rotationMode | 旋转样式 kCAAnimationRotateAuto 根据路径自动旋转 kCAAnimationRotateAutoReverse 根据路径自动翻转 |
实践
多个路径点动画
self.animationView = [[UIView alloc]init];
self.animationView.frame = CGRectMake(0, kHeight/2-50, 50, 50);
self.animationView.backgroundColor = [UIColor greenColor];
[self.view addSubview:self.animationView];
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
NSValue *key1 = [NSValue valueWithCGPoint:CGPointMake(16, 16)];
NSValue *key2 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
NSValue *key3 = [NSValue valueWithCGPoint:CGPointMake(150, 50)];
NSValue *key4 = [NSValue valueWithCGPoint:CGPointMake(300, 250)];
animation.values = @[key1, key2, key3, key4];
animation.duration = 5;
animation.delegate = nil;
animation.autoreverses = YES;//是否执行反方向动画
animation.repeatCount = HUGE_VALF;//重复执行次数
animation.removedOnCompletion = NO;//执行后移除动画
animation.fillMode = kCAFillModeBoth;
[self.animationView.layer addAnimation:animation forKey:@"keyframeAnimation"];
图标抖动动画
self.animationView = [[UIView alloc]init];
self.animationView.frame = CGRectMake(0, kHeight/2-50, 50, 50);
self.animationView.backgroundColor = [UIColor greenColor];
[self.view addSubview:self.animationView];
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
anim.values = @[@(-M_PI_4 * 0.2),@(M_PI_4 * 0.2), @(-M_PI_4 * 0.2)];
anim.duration = 0;
anim.repeatCount = CGFLOAT_MAX;
[self.animationView.layer addAnimation:anim forKey:@"keyframeAnimation"];
路径移动
设置了 animation 的 path 属性后 values 属性就会失效。
self.animationView = [[UIView alloc]init];
self.animationView.frame = CGRectMake(0, kHeight/2-50, 50, 50);
self.animationView.backgroundColor = [UIColor greenColor];
[self.view addSubview:self.animationView];
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(kWidth/2-100, kHeight/2-100, 200, 200)];
animation.path = path.CGPath;
animation.duration = 2.0f;
animation.autoreverses = YES;//是否执行反方向动画
animation.repeatCount = HUGE_VALF;//重复执行次数
animation.removedOnCompletion = NO;//执行后移除动画
animation.fillMode = kCAFillModeBoth;
[self.animationView.layer addAnimation:animation forKey:@"keyframeAnimation"];
