上一章学习的是 CABasicAnimation, 其实 CABasicAnimation 和 CAKeyframeAnimation 都是属于 CAPropertyAnimation(属性动画),
只不过 CAKeyframeAnimation 相对于 CABasicAnimation 来说能够设置很多属性值作为他的动画路径,
关键帧动画开发分为两类:
一种是通过设置不同的属性值来进行关键帧控制
第二种是通过绘制路径进行关键帧控制,
第二种优先级比第一种高,
我们先来看看第一种,直接上实例,
CALayer *layer = [[CALayer alloc] init];
layer.bounds = CGRectMake(0, 0, 20, 20);
layer.backgroundColor = [UIColor redColor].CGColor;
layer.position = CGPointMake(5, 5);
[self.view.layer addSublayer:layer];
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
NSValue *val1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
NSValue *val2 = [NSValue valueWithCGPoint:CGPointMake(0, 200)];
NSValue *val3 = [NSValue valueWithCGPoint:CGPointMake(370, 300)];
NSValue *val4 = [NSValue valueWithCGPoint:CGPointMake(0, 520)];
NSArray *values = @[val1,val2,val3,val4];
keyAnimation.values = values;
keyAnimation.duration = 6.0;
keyAnimation.removedOnCompletion = NO;
keyAnimation.fillMode = kCAFillModeForwards;
[layer addAnimation:keyAnimation forKey:@"keyAnimation"];
效果图为:
可以发现我们传入的路径是一个数组,数组的每一个元素其实就是一关键帧,每两个关键帧之间的动画由系统运算补充(又称作补间动画),
可以看出它跟 CABasicAnimation最大的区别是 CABasicAnimation 只能设置 起始和结束的位置
补充一些关键帧的特有属性:
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 平滑匀速执行
我们把上面的例子再进行补充后看看效果,
CALayer *layer = [[CALayer alloc] init];
layer.bounds = CGRectMake(0, 0, 20, 20);
layer.backgroundColor = [UIColor redColor].CGColor;
layer.position = CGPointMake(5, 5);
[self.view.layer addSublayer:layer];
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
NSValue *val1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
NSValue *val2 = [NSValue valueWithCGPoint:CGPointMake(0, 200)];
NSValue *val3 = [NSValue valueWithCGPoint:CGPointMake(370, 300)];
NSValue *val4 = [NSValue valueWithCGPoint:CGPointMake(0, 520)];
NSArray *values = @[val1,val2,val3,val4];
keyAnimation.values = values;
keyAnimation.duration = 6.0;
keyAnimation.removedOnCompletion = NO;
keyAnimation.fillMode = kCAFillModeForwards;
keyAnimation.calculationMode = kCAAnimationCubic;
keyAnimation.keyTimes = @[@0,@0.3,@0.8,@1];
[layer addAnimation:keyAnimation forKey:@"keyAnimation"];
效果图为:
看完了第一种给他一个数组后,我们再来看看第二种,通过给他一个路径,
直接上代码:
CALayer *layer = [[CALayer alloc] init];
layer.bounds = CGRectMake(0, 0, 20, 20);
layer.backgroundColor = [UIColor redColor].CGColor;
layer.position = CGPointMake(5, 5);
[self.view.layer addSublayer:layer];
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
UIBezierPath *bezier = [UIBezierPath bezierPathWithRect:CGRectMake(10, 100, 300, 300)];
keyAnimation.path = bezier.CGPath;
keyAnimation.duration = 6.0;
keyAnimation.removedOnCompletion = NO;
keyAnimation.fillMode = kCAFillModeForwards;
keyAnimation.calculationMode = kCAAnimationCubic;
[layer addAnimation:keyAnimation forKey:@"keyAnimation"];
效果图为:
并且第二种比第一种的优先级高,