iOS开发之 关键帧动画

1、关键帧动画也属于属性动画 CAKeyframeAnimation
也属于CAPropertyAnimation

2、关键帧动画
可以让我们精准的控制动画效果
它的原理是把动画序列里面比较关键的帧提取出来
设置他的动画效果

values 属性，执行动画属性的数组

path 属性
，执行轨迹动画的路径

一、我们来看看关键帧动画的 values属性的使用
我们使用个花瓣掉落的例子来展示
1、定义一个uiimage，添加到一个calayer上，整个calayer又添加在self.view.layer上

<span style="font-size:14px;">    UIImage *photo = [UIImage imageNamed:@"花瓣.png"];

photoLayer = [[CALayer alloc]init];
photoLayer.position = CGPointMake(self.view.center.x, 200);
photoLayer.bounds = CGRectMake(0, 0, photo.size.width*2, photo.size.height*2);
photoLayer.contents = (id)photo.CGImage;

[self.view.layer addSublayer:photoLayer];</span>

2、在点击屏幕的时候触发关键帧动画的方法

<span style="font-size:14px;">- (void)addAnimation
{
CAKeyframeAnimation *dropkfAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
dropkfAnimation.duration = 6;
dropkfAnimation.values = @[[self getPointWithX:0 andY:0],[self getPointWithX:50 andY:-50],[self getPointWithX:100 andY:-65],[self getPointWithX:120 andY:-50],[self getPointWithX:170 andY:0],[self getPointWithX:120 andY:100],[self getPointWithX:0 andY:200],[self getPointWithX:-120 andY:100],[self getPointWithX:-170 andY:0],[self getPointWithX:-120 andY:-50],[self getPointWithX:-100 andY:-65],[self getPointWithX:-50 andY:-50],[self getPointWithX:0 andY:0]];

[photoLayer addAnimation:dropkfAnimation forKey:@"drop"];

}

#pragma mark  -----------把CGPoint 转换成 NSValue --------------
- (NSValue *)getPointWithX:(CGFloat)x andY:(CGFloat)y
{
return [NSValue valueWithCGPoint:CGPointMake(x+photoLayer.position.x, y+photoLayer.position.y)];
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
[self addAnimation];
}</span>

切记，在我们初始化动画的时候，后面所带的字符串必须得是动画的属性，是不能写错的

二、我们来看看关键帧动画的
values属性的使用
1、先设置一个背景图片，在设置一个CALayer，上面添加一张花瓣的图片

<span style="color:#cc33cc;">   </span><span style="color:#333333;"> UIImageView *bgView = [[UIImageView alloc]initWithFrame:[UIScreen mainScreen].bounds];
bgView.image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle]pathForResource:@"背景.jpg" ofType:nil]];

[self.view addSubview:bgView];</span>

UIImage *petal = [UIImage imageNamed:@"花瓣.png"];

petalLayer = [[CALayer alloc]init];
petalLayer.bounds = CGRectMake(0, 0, petal.size.width, petal.size.height);
petalLayer.position = CGPointMake(100, 200);
petalLayer.contents = (id)petal.CGImage;

[self.view.layer addSublayer:petalLayer];

2、点击屏幕的时候触发花瓣下落的的动画

<span style="color:#333333;">- (void)dropAnimation
{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

animation.duration = 5;

</span><span style="color:#33cc00;"> //    设置落地之后不返回</span><span style="color:#333333;">
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
</span><span style="color:#33cc00;">
//    创建路径</span><span style="color:#333333;">
CGMutablePathRef path = CGPathCreateMutable();
</span><span style="color:#33cc00;">//    给路劲添加一个起始点</span><span style="color:#333333;">
CGPathMoveToPoint(path, NULL, petalLayer.position.x, petalLayer.position.y);
CGPathAddLineToPoint(path, NULL, petalLayer.position.x+100, petalLayer.position.y+100);
CGPathAddLineToPoint(path, NULL, petalLayer.position.x-100, petalLayer.position.y+300);

animation.path = path;

</span><span style="color:#33cc00;">//    释放路径</span><span style="color:#333333;">
CGPathRelease(path);
path = nil;

[petalLayer addAnimation:animation forKey:@"drop"];
}</span><span style="color:#cc33cc;">
</span><span style="color:#333333;">
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[self dropAnimation];
}</span><span style="color:#cc33cc;">
</span>