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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355

推荐阅读更多精彩内容

  • Core Animation Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,...
    45b645c5912e阅读 3,032评论 0 21
  • "小画板程序"完成"小画板"程序。 下载地址:http://git.oschina.net/changyou/my...
    _浅墨_阅读 693评论 0 5
  • 在iOS实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,102评论 1 23
  • 核心动画(Core Animation) 一、Core animation简单介绍 1.Core Animatio...
    亦晴工作室阅读 546评论 0 0
  • 一、关于核心动画的介绍 1、核心动画作用于layer层, layer有两个属性Position和achroPoin...
    GPUImage阅读 313评论 0 0