Core Animation中的关键帧动画

键帧动画就是在动画控制过程中开发者指定主要的动画状态，至于各个状态间动画如何进行则由系统自动运算补充（每两个关键帧之间系统形成的动画称为“补间动画”），这种动画的好处就是开发者不用逐个控制每个动画帧，而只要关心几个关键帧的状态即可。

关键帧动画开发分为两种形式：一种是通过设置不同的属性值进行关键帧控制，另一种是通过绘制路径进行关键帧控制。后者优先级高于前者，如果设置了路径则属性值就不再起作用。

//
//  ViewController.m
//  Demo02182
//
//  Created by wiseman on 16/2/18.
//  Copyright (c) 2016年 wiseman. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
{
    CALayer *_layer;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //自定义一个图层
    _layer=[[CALayer alloc]init];
    _layer.bounds=CGRectMake(0, 0, 10, 20);
    _layer.position=CGPointMake(50, 150);
    _layer.backgroundColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:_layer];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    //创建动画
//    [self translationAnimation];
    [self translationAnimationWithUIBezierPath];
}

#pragma mark - 关键帧动画,通过四个关键帧状态来改变动画效果
-(void)translationAnimation{
    //1.创建关键帧动画，并设置动画的属性
    CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    //2.设置关键帧
    NSValue *key1 = [NSValue valueWithCGPoint:_layer.position];//对于关键帧动画初始值不能省略
    NSValue *key2=[NSValue valueWithCGPoint:CGPointMake(80, 220)];
    NSValue *key3=[NSValue valueWithCGPoint:CGPointMake(45, 300)];
    NSValue *key4=[NSValue valueWithCGPoint:CGPointMake(55, 400)];
    NSArray *values=@[key1,key2,key3,key4];
    
    keyframeAnimation.values = values;
    keyframeAnimation.duration = 2.0;
    keyframeAnimation.beginTime = CACurrentMediaTime()+2;//设置延迟2秒执行
    
    //3.添加动画到图层，添加动画后就会执行动画
    [_layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"];
}

#pragma mark - 贝塞尔曲线，通过贝塞尔曲线来绘制路径对关键帧动画进行控制
-(void)translationAnimationWithUIBezierPath{
    UIBezierPath *path = [[UIBezierPath alloc]init];
    //设置起始端点
    [path moveToPoint:CGPointMake(20, 50)];
    [path addCurveToPoint:CGPointMake(20, 350) controlPoint1:CGPointMake(0, 200) controlPoint2:CGPointMake(40, 200)];
    
    //1.创建关键帧动画
    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //2.设置path
    keyAnima.path = path.CGPath;
    keyAnima.duration = 3.0;
    //3.添加动画到图层，添加动画后就会执行动画
    [_layer addAnimation:keyAnima forKey:@"KCKeyframeAnimation_Position"];
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

 

 

补充--其他属性

在关键帧动画中还有一些动画属性初学者往往比较容易混淆，这里专门针对这些属性做一下介绍。

keyTimes：各个关键帧的时间控制。前面使用values设置了四个关键帧，默认情况下每两帧之间的间隔为:8/(4-1)秒。如果想要控制 动画从第一帧到第二针占用时间4秒，从第二帧到第三帧时间为2秒，而从第三帧到第四帧时间2秒的话，就可以通过keyTimes进行设置。 keyTimes中存储的是时间占用比例点，此时可以设置keyTimes的值为0.0，0.5，0.75，1.0（当然必须转换为NSNumber）， 也就是说1到2帧运行到总时间的50%，2到3帧运行到总时间的75%，3到4帧运行到8秒结束。

caculationMode：动画计算模式。还拿上面keyValues动画举例，之所以1到2帧能形成连贯性动画而不是直接从第1帧经过8/3 秒到第2帧是因为动画模式是连续的（值为kCAAnimationLinear，这是计算模式的默认值）；而如果指定了动画模式为 kCAAnimationDiscrete离散的那么你会看到动画从第1帧经过8/3秒直接到第2帧，中间没有任何过渡。其他动画模式还 有：kCAAnimationPaced（均匀执行，会忽略keyTimes）、kCAAnimationCubic（平滑执行，对于位置变动关键帧动画 运行轨迹更平滑）、kCAAnimationCubicPaced（平滑均匀执行）。