UI基础 - CAAnination：关键帧动画 | 基础动画 | 过渡动画

CAAnination

1 - CAAnination 类中封装了 iOS 中所有的动画效果，其动画都是添加在 CALayer 上的，是动画的触发核心，它是抽象父类，通常使用其子类实现动画效果

2 - 它的三个子类分别是：CAPropertyAnimation、CAAnimationGroup、CATransition。其中 CAPropertyAnimation 同样是抽象类，有两个子类 CABasicAnimation、CAKeyFrameAnimation，用来给 CALayer 部分属性添加动画

3 - 常用 API

①  给 layer 添加、移除动画

- (void)addAnimation:(CAAnimation *)anim forKey:(NSString *)key;
- (void)removeAnimationForKey:(NSString *)key;
- (void)removeAllAnimations;

② CABasicAnimation 通过设定初始值和结束值执行动画

+ (id)animationWithKeyPath:(NSString *)path; //系统提供的构造方法
@property(copy) NSString *keyPath; // 只能填写 CALayer 动画中能够用动画的属性名
@property(retain) id fromValue;// 起始值
@property(retain) id toValue;  // 结束值
@property(retain) id byValue;  // 相对值

③ CAKeyFrameAnimation：关键帧动画可以让你的 view 的 layer 按照预定轨迹做动画

+ (id)animationWithKeyPath:(NSString *)path;// 构造方法
@property CGPathRef path;// 动画路径
@property(copy) NSArray *values;  // 提供了一组关键帧的值，当使用 path 的时候，values 会被忽略
@property(copy) NSArray *keyTimes;// 每一帧的时间，其成员必须是 NNSNumber
@property(copy) NSString *rotationMode;// 设定关键帧中的值如何计算

④ CAAnimationGroup 只有一个数组属性：添加多个 CAAnimation 一起执行

⑤ CATransition：用作 layer 动画过渡，它有两个主要属性：type（动画过渡效果）和 subType（动画过渡方向）

4 - 代码示例

#import "ViewController.h"
@interface ViewController ()
// 动画视图
@property(nonatomic,strong)UIView *animationView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor redColor];
    
    // animationView
    self.animationView = [[UIView alloc] initWithFrame:CGRectMake(30, 50, 90, 80)];
    self.animationView.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:self.animationView];
    // 初始化状态
    self.animationView.layer.cornerRadius = 20;
    self.animationView.layer.borderWidth = 5;
    self.animationView.layer.borderColor = [UIColor yellowColor].CGColor;
    self.animationView.layer.shadowOpacity = 1.0;
    self.animationView.layer.shadowOffset = CGSizeMake(8, 8);           // 阴影偏移量
    self.animationView.layer.shadowColor = [UIColor greenColor].CGColor;// 阴影颜色

    // 基本动画
    // [self testBasicAnimation];

    // 关键帧动画
    // [self testKeyFrameAnimation];

    // 过渡动画
    // [self testTransitionAnimation];

}

// 基本动画
-(void)testBasicAnimation{

//---------------------------------CABasicAnimation
//    // 效果一：控制 y 的值
//    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
//    basicAnimation.duration = 1.0;
//    basicAnimation.repeatCount = 1;
//    basicAnimation.autoreverses = YES;
//    // 动画的起始值
//    basicAnimation.fromValue = [NSNumber numberWithFloat:90];
//    // 动画的结束值
//    basicAnimation.toValue = [NSNumber numberWithFloat:200];
//    // 添加动画
//    [self.animationView.layer addAnimation:basicAnimation forKey:nil];


//    // 效果二：控制 position
//    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
//    basicAnimation.duration = 1.0;
//    basicAnimation.repeatCount = 1;
//    basicAnimation.autoreverses = YES;
//    basicAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(160, 90)];
//    basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
//    [self.animationView.layer addAnimation:basicAnimation forKey:nil];


//    // 效果三：颜色渐变
//    CABasicAnimation *animationColor = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
//    animationColor.duration = 1.0;
//    animationColor.repeatCount = 1;
//    animationColor.autoreverses = YES;
//    animationColor.fromValue = (id)[UIColor orangeColor].CGColor;
//    animationColor.toValue = (id)[UIColor cyanColor].CGColor;
//    [self.animationView.layer addAnimation:animationColor forKey:nil];


//------------------------------------CAAnimationGroup
    // 效果二：控制 position
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    basicAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(160, 90)];
    basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];

    // 效果三：颜色渐变
    CABasicAnimation *animationColor = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    animationColor.fromValue = (id)[UIColor orangeColor].CGColor;
    animationColor.toValue = (id)[UIColor cyanColor].CGColor;


    // 注：效果二、三，我们可以使用 CAAnimationGroup 进行优化
    // 重复的属性有 duration、autoreverses、repeatCount 以及两个 addAnimation
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations  = @[basicAnimation,animationColor];
    // 重复的属性
    group.duration = 2;
    group.repeatCount = 2;
    group.autoreverses = YES;
    [self.animationView.layer addAnimation:group forKey:nil];

 }


// 关键帧动画
- (void)testKeyFrameAnimation{

    CAKeyframeAnimation * keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 指定 6 个帧数
    keyFrameAnimation.values = @[[NSValue valueWithCGPoint:CGPointMake(50, 50)],
                                 [NSValue valueWithCGPoint:CGPointMake(200, 400)],
                                 [NSValue valueWithCGPoint:CGPointMake(180, 210)],
                                 [NSValue valueWithCGPoint:CGPointMake(100, 300)],
                                 [NSValue valueWithCGPoint:CGPointMake(50, 50)],
                                 [NSValue valueWithCGPoint:CGPointMake(200, 400)]];

    keyFrameAnimation.duration = 15;// 默认每个动画时间 15.0 /（6.0-1.0）
    // 每帧结束占总时长百分比：
    keyFrameAnimation.keyTimes = @[@0,@0.1,@0.2,@0.65,@0.8,@1.0];// 每个间段所占比 = 后一个的比 - 前一个的比
    keyFrameAnimation.repeatCount = 1;
    [self.animationView.layer addAnimation:keyFrameAnimation forKey:nil];
}


// 过渡动画
 - (void)testTransitionAnimation{

    CATransition * transition = [CATransition animation];
    transition.type = @"moveIn";
    transition.duration = 2.0;

    // 代理：监听开始和结束
    // transition.delegate = self;// 此处不在演示，使用时引入头文件、实现代理方法即可
    transition.subtype = kCATransitionFromRight;
    // 注意，使用的是 self.view
    [self.view.layer addAnimation:transition forKey:nil];

    /*----------- 动画效果

        @"cube"                     立方体翻滚效果
        @"moveIn"                   新视图移到旧视图上面
        @"reveal"                   显露效果(将旧视图移开,显示下面的新视图)
        @"fade"                     交叉淡化过渡(不支持过渡方向)             (默认为此效果
        @"pageCurl"                 向上翻一页
        @"pageUnCurl"               向下翻一页
        @"suckEffect"               收缩效果，类似系统最小化窗口时的神奇效果(不支持过渡方向)
        @"rippleEffect"             滴水效果,(不支持过渡方向)
        @"oglFlip"                  上下左右翻转效果
        @"rotate"                   旋转效果
        @"push"
        @"cameraIrisHollowOpen"     相机镜头打开效果(不支持过渡方向)
        @"cameraIrisHollowClose"    相机镜头关上效果(不支持过渡方向)
     */
 }
 @end

运行效果：初始视图