在上一篇介绍的CABasicAnimation 中可以简单实现一个位置到另外一个位置的动画。但是在现实开发中这个基础动画并不能解决一些动画,如位置连续变动,图片渐入渐出等。所以本篇文章介绍另外一个动画类:CAKeyframeAnimation也叫关键帧动画。它可以实现某一属性按照一串的数值进行动画,有点类似动态图。
下面介绍CAKeyframeAnimation的两个常用属性:
1、values
它可以设置一组关键帧的值,让图层按照这些值动起来。
CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animation];
keyframeAnimation.keyPath = @"position";
NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(150, 0)];
NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(150, 150)];
NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(0, 150)];
//设置动画路线
keyframeAnimation.values = @[v1, v2, v3, v4];
//动画持续时间 每帧动画执行时长 = 总时长/(总帧数-1)
keyframeAnimation.duration = 2.0;
//设置每帧动画的时长(和duration配合用), 并且第一个必须是0.0,最后一个必须是1.0;所以第一帧动画时长为(0.5-0.0)*duration,后面以此类推。
//keyframeAnimation.keyTimes = @[@(0.0),@(0.5), @(0.7), @(1.0)];
//动画执行结束保持最后状态
keyframeAnimation.fillMode = kCAFillModeForwards;
keyframeAnimation.removedOnCompletion = NO;
//设置YES 则动画执行结束后会原路返回再执行一遍
//keyframeAnimation.autoreverses = YES;
[self.myView.layer addAnimation:keyframeAnimation forKey:nil];
2、path
CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animation];
keyframeAnimation.keyPath = @"position";
CGMutablePathRef pathRef = CGPathCreateMutable();
CGPathMoveToPoint(pathRef, NULL, 50, 100);
CGPathAddCurveToPoint(pathRef, NULL, 50, 200, 150, 300, 200, 200);
CGPathAddCurveToPoint(pathRef, NULL, 150, 300, 250, 400, 350, 350);
//设置曲线动画
keyframeAnimation.path = pathRef;
//动画持续时间 每帧动画执行时长 = 总时长/(总帧数-1)
keyframeAnimation.duration = 2.0;
//设置动画执行节奏
keyframeAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
/* 动画执行速度
kCAMediaTimingFunctionLinear 匀速
kCAMediaTimingFunctionEaseIn 渐入
kCAMediaTimingFunctionEaseOut 渐出
kCAMediaTimingFunctionEaseInEaseOut 渐入渐出 中间快
kCAMediaTimingFunctionDefault 默认
*/
//动画执行结束保持最后状态
keyframeAnimation.fillMode = kCAFillModeForwards;
keyframeAnimation.removedOnCompletion = NO;
[self.redView.layer addAnimation:keyframeAnimation forKey:nil];