iOS - 核心动画

作者:Mitchell 

---

一、基本概念

• CoreAnimation 可用在 Mac OS X和iOS平台
• CoreAnimation 的动画执行过程都是在后台操作的，不会阻塞主线程。
• CoreAnimation 是直接作用在CALayer 上的，并不是UIView。
• 用一张图来简要介绍一下核心动画成员之间的关系。

图1.png

• 为何要封装成这么多的类？
  • 体现了面向对象的特性，就是每个对象都控制着不同的特性，每个类控制动画一方面。

---

二、基本动画

• CAAnimation：
  • 是多有动画对象的父类，负责控制动画的持续时间和速度，是个抽象类，不能直接使用。
  • 属性的简单说明：
    • duration：动画的持续时间
    • repeatCount：重复次数，无线循环可设置为HUGE_VALF或者MAXFLOAT
    • removeOnCompletion：默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态，如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode为kCAFillMOdeForwards。
    • fillModes：决定当前对象在非 active 时间段的行为。比如动画开始之前或者动画结束之后
    • beginTime：可以用来设置动画延迟执行的时间，如果想延迟10S，就设置为CACurrentMediaTime（）+2。 CACurrentMediaTime（）为图层的当前时间
    • timingFunction：速度控制函数，控制画运行的节奏
    • delegate：动画代理
  • fillMode 属性值(要想 fillMode 有效，最好设置removedOnComletion = NO)
    • kCAFillModeRemoved 这个是默认值，也就是说当动画开始前和动画结束后，动画对layer都没有影响，动画结束后，layer会恢复到之前的状态
    • kCAFillModeForwards 当动画结束后，layer会一直保持着动画最后的状态
    • kCAFillModeBackwards 在动画开始前，只需要将动画加入了一个layer，layer便立即进入动画的初始状态并等待动画开始。
    • kCAFillModeBoth 这个其实就是上面两个的合成.动画加入后开始之前，layer便处于动画初始状态，动画结束后layer保持动画最后的状态
  • 速度控制函数（CAMediaTimingFunction）
    • kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉
    • kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开
    • kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地
    • kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是默认的动画行为。
• CAPropertyAnimation
  • 是 CAAnimation 的子类，也是抽象类，要想创建动画对象，应该使用它的两个子类：
    • CABasicAnimation
    • CAKeyframeAnimation
  • keyPath：通过指定 CALayer 的属性名称keyPath，对layer的这个属性的值进行修改，达到相应的动画效果。比如@“position” 是修改 position 达到移动的效果。
• CABasicAniamtion
  • 基本动画是 CAPropertyAnimation 的子类
  • 属性说明
    • fromValue：keyPath相应属性的初始值
    • toValue：keyPath相应属性的结束值

---

三、关键帧动画

• CAKeyframeAnimation
  • 关键帧动画，是CAPropertyAnimation的子类
  • 与 CABasicAniamtion 的区别是 CABasicAniamtion 是从fromValue 到 toValue 两个值的变化，而 CAKeyframeAnimation 可以使用 NSArray 来保存这些数值。
  • 属性说明：
    • values：NSArray 对象，里面的元素就是“关键帧”，动画会在指定的时间内，依次显示 values 数组中的每一个关键帧。
    • path：可以设置CGPathRef、CGMutablePathRef，让图层按照轨迹移动，path只对CALayer的 anchorPoint 和 point 起作用。如果设置了 path， 那么values将被忽略。
    • keyTimes：关键帧指定对应的时间点，取值范围从0~1，keyTimes中的每一个时间值对应values中的每一帧，如果没有设置，时间是平分的。
  • CABasicAniamtion 可看做 只有两个关键帧的 CAKeyframeAnimation。

---

四、动画组

• CAAnimationGroup
  • 是 CAAnimation 的子类，可以保存一组动画对象，将 CAAnimationGroup 对象加入层之后，族中所有的动画对象可以同时并发运行。
  • 属性说明：
    • animations：保存一组动画对象的NSArray。
    • 默认情况下，一组动画对象是同时运行的，也可以通过设置动画对象的 beginTimer 属性来更改动画的开始时间。

---

五、转场动画

• CATransition
  • 为层提供移出屏幕和移入屏幕的动画效果。
  • UINavigationController就是通过CATransition实现了将控制器推入屏幕的动画效果
  • 动画属性：
    • type：动画过渡类型
    • subtype：动画过渡方向
    • startProgress：动画起点
    • endProgress：动画终点

---

六、实际应用

• CABasicAnimation:

CABasicAnimation *ani3 = [CABasicAnimation animation];
    ani3.keyPath = @"opacity";
    ani3.fromValue = @1;
    ani3.toValue = @0;
    ani3.duration = 1;
    ani3.repeatCount = MAXFLOAT;
    ani3.removedOnCompletion = NO;
    ani3.fillMode = kCAFillModeBackwards;

• CAKeyframeAnimation
  • 按照路径移动

CAKeyframeAnimation* ani = [CAKeyframeAnimation animation];
    ani.keyPath = @"position";
    UIBezierPath *path =[UIBezierPath bezierPathWithArcCenter:_img.center radius:100 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    ani.path = path.CGPath;
    ani.repeatCount = MAXFLOAT;
    ani.duration = 2;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeBoth;

- 抖动

#define angle2Radion(angle) (angle / 180.0 * M_PI)
CAKeyframeAnimation*ani2 = [CAKeyframeAnimation animation];
    ani2.keyPath = @"transform.rotation";
    ani2.values = @[@(angle2Radion(-5)),@(angle2Radion(5)),@(angle2Radion(-5))];
    ani2.duration = 0.15;
    ani2.repeatCount = MAXFLOAT;

• CAAnimationGroup

• `注意`：每一次group循环内的动画仍旧是由每个动画各自的属性控制，`有一点需要注意就是duration这个属性，为了保证动画的连贯性，group的duration属性最好设置成与动画数组内时间最长的动画一致。` 
  

 //group
    CAAnimationGroup *group = [CAAnimationGroup animation];
 //位移
    CAKeyframeAnimation* ani = [CAKeyframeAnimation animation];
    ani.keyPath = @"position";
    UIBezierPath *path =[UIBezierPath bezierPathWithArcCenter:_img.center radius:100 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    ani.path = path.CGPath;
    ani.repeatCount = MAXFLOAT;
    ani.duration = 2;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeBoth;
 //抖动
    CAKeyframeAnimation*ani2 = [CAKeyframeAnimation animation];
    ani2.keyPath = @"transform.rotation";
    ani2.values = @[@(angle2Radion(-5)),@(angle2Radion(5)),@(angle2Radion(-5))];
    ani2.duration = 0.15;
    ani2.repeatCount = MAXFLOAT;
//透明度
    CABasicAnimation *ani3 = [CABasicAnimation animation];
    ani3.keyPath = @"opacity";
    ani3.fromValue = @1;
    ani3.toValue = @0;
    ani3.duration = 1;
    ani3.repeatCount = MAXFLOAT;
    ani3.removedOnCompletion = NO;
    ani3.fillMode = kCAFillModeBackwards;
//将动画添加进group
    group.animations = @[ani,ani2,ani3];
    group.duration = 2;
    group.repeatCount = MAXFLOAT;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeBackwards;
    [_img.layer addAnimation:group forKey:nil];

• CATransition

// 界面切换的代码
    static int i = 2;
    NSString *imageName = [NSString stringWithFormat:@"%d",i];
    _imageView.image = [UIImage imageNamed:imageName];
    i++;
    if (i > 3) {
        i = 1;
    }
    // 只要切换界面 都可以使用转场动画
    // 谁切换界面 就添加到谁上
    // 转场动画代码必须和界面切换的代码放在一起
    // 转场动画
    CATransition *anim = [CATransition animation];
    // 指定转场类型
    anim.type = @"pageCurl";
    // 设置转场的方向
    anim.subtype = kCATransitionFromLeft;
    // 设置动画的进度
    anim.startProgress = 0;
    anim.endProgress = 1;
    anim.duration = 0.5;
    [_imageView.layer addAnimation:anim forKey:nil];

---

七、核心动画与UIView动画的区别

• 核心动画的一切都是假象，并不会真是改变layer的值
• UIView 真实改变属性才能有动画
• 使用场景：
  • UIView 用在需要交互的地方
  • 核心动画用在不需要交互的地方。

---