iOS动画基础

导语

这段时间我们部门组织学习分享Core Animation,所以我就稍微整理了下关于动画这块的分享。

Core Animation其实是一个令人误解的命名,大多数人认为它只是用来做动画的,但实际上市一个叫做Layer Kit演变而来,所以动画只是Core Animation特性的冰山一角而已,接下来我们就讨论下这个冰山一角的常规用法,纯粹是抛砖引玉。

一、基础知识

1、动画的本质
  • 一定时间内属性值的变化,属性为位置、透明度、旋转等
2、动画实现方式
  • 逐帧:需要处理动画的每一帧,这样的实现动画的方式叫做逐帧动画
  • 关键帧:我们只需给定几个关键帧的画面,其余过度帧都由计算机自动生成

二、动画实现

关键帧动画
1、CABasicAnimation

1、动画的属性


1485148932685541.png

2、属性值的解释

  • repeatCount:一直不断重复:swift:Float.infinity,OC:HUGE_VALF
  • timingFunction:
    kCAMediaTimingFunctionLinear:匀速改变
    kCAMediaTimingFunctionEaseIn:渐入
    kCAMediaTimingFunctionEaseOut: 渐出
    kCAMediaTimingFunctionEaseInEaseOut:渐入渐出
    kCAMediaTimingFunctionDefault:隐式动画更加适合
使用方法
    pathAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
  • fillMode
    kCAFillModeForwards:动画开始之后layer的状态将保持在动画的最后一帧,而removedOnCompletion的默认属性值是 YES,所以为了使动画结束之后layer保持结束状态,应将removedOnCompletion设置为NO。
    kCAFillModeBackwards:将会立即执行动画的第一帧,不论是否设置了 beginTime属性。观察发现,设置该值,刚开始视图不见,还不知道应用在哪里。
    kCAFillModeBoth:该值是 kCAFillModeForwards 和kCAFillModeBackwards的组合状态
    kCAFillModeRemoved:动画将在设置的 beginTime 开始执行(如没有设置beginTime属性,则动画立即执行),动画执行完成后将会layer的改变恢复原状。
示例
  • 旋转动画
旋转动画.gif
  • 位移动画


    位移动画.gif
  • 背景颜色变化动画、背景图片变化动画、圆角变化动画
背景颜色变化动画.gif
  • 比例缩放动画
1485149752466446.gif
  • size大小缩放、透明值变化动画(可用作闪烁效果)
size大小缩放、透明值变化动画.gif
2、CAKeyframeAnimation

CAKeyframeAnimation是核心动画里面的帧动画,它提供了按照指定的一串值进行动画,好像拍电影一样的一帧一帧的效果

 UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 250, 250)];
    
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:tempView.frame];
    UIView *animView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 70, 80)];
    animView.backgroundColor = [UIColor redColor];
    [self.view addSubview:animView];
    
    CAKeyframeAnimation *orbitAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    orbitAnim.duration = 5;
    orbitAnim.path = bezierPath.CGPath;
    orbitAnim.calculationMode = kCAAnimationPaced;
    orbitAnim.fillMode = kCAFillModeForwards;
    orbitAnim.repeatCount = INFINITY;
    orbitAnim.rotationMode = kCAAnimationRotateAutoReverse;
    [animView.layer addAnimation:orbitAnim forKey:@"orbitAnim"];
    
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    shapeLayer.strokeColor = [UIColor purpleColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 0.5;
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = bezierPath.CGPath;
    [self.view.layer addSublayer:shapeLayer];
  • 示例
CAKeyframeAnimation路径动画.gif
3、CATransition

主要用于转场动画从一个场景以动画的形式过渡到另一个场景

另外还有一些系统未公开的动画效果:

["cube", "suckEffect", "rippleEffect", "pageCurl", "pageUnCurl", "oglFlip", "cameraIrisHollowOpen", "cameraIrisHollowClose", "spewEffect","genieEffect","unGenieEffect","twist","tubey","swirl","charminUltra", "zoomyIn", "zoomyOut", "oglApplicationSuspend"]

代码示例:

CATransition *pageCurlAnim = [[CATransition alloc] init];
    pageCurlAnim.delegate = self;
    pageCurlAnim.duration = 1.0;
    pageCurlAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    pageCurlAnim.type = animArr[index];
    pageCurlAnim.subtype = kCATransitionFromLeft;
    pageCurlAnim.repeatCount = 1;
    [pageCurlAnim setValue:@"transitionAnim" forKey:@"anim"];
    [transitionLab.layer addAnimation:pageCurlAnim forKey:@"transition"];
4、CASpringAnimation

iOS9才引入的动画类,在以前我们都是使用facebook的pop来做这种弹簧效果,它继承于CABaseAnimation,用于制作弹簧动画

参数说明
  • mass:质量,影响图层运动时的弹簧惯性,质量越大,弹簧拉伸和压缩的幅度越大,动画的速度变慢,并且波动幅度变大
  • stiffness:刚度系数(劲度系数/弹性系数),刚度系数越大,形变产生的力就越大,运动越快
  • damping:阻尼系数,阻止弹簧伸缩的系数,阻尼系数越大,停止越快
  • initialVelocity:初始速率,动画视图的初始速度大小速率为正数时,速度方向与运动方向一致,速率为负数时,速度方向与运动方向相反如果
  • settlingDuration:结算时间 返回弹簧动画到停止时的估算时间,根据当前的动画参数估算通常弹簧动画的时间使用结算时间比较准确
  • 示例


    弹簧.gif
逐帧动画

实际就是周期性的(CADisplayLink)对UIView背后的CALayer的修改
著名的facebook的pop动画框架,就是使用CADisplayLink这种逐帧绘制的方式。

三、关键帧与逐帧对比

  • 关键帧:只需要修改某个属性值,简单方便,但涉及深层次内容较多,需要更多的理解和联系。
  • 逐帧:实现原理简单,但绘制动画的过程复杂,处理的事情多开销大,绘制过程中需要数学、物理学知识计算中间量。

四、一些有意思的动画

  • 曲线划线动画


    曲线划线动画.gif
  • 利用正弦曲线做的,也是逐帧动画,相信很多人都做过:

正弦曲线.gif
  • 粒子动画
粒子动画.gif

最后附 demohttps://github.com/yangbin911213/YBAnimation

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

推荐阅读更多精彩内容