iOS - 核心动画

作者: Mitchell | 来源:发表于2015-08-26 19:17 被阅读954次

作者: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 用在需要交互的地方
- 核心动画用在不需要交互的地方。

iOS - 核心动画

一、基本概念

二、基本动画

三、关键帧动画

四、动画组

五、转场动画

六、实际应用

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS Developer - Animation

笔记

iOS移动开发社区

iOS Developer

iOS

iOS Dev