iOS 动画整理

Core Animation

Core Animation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做Layer Kit这么一个不怎么和动画有关的名字演变而来,所以做动画这只是Core Animation特性的冰山一角。

CALayer 有一个属性叫做contents,这个属性的类型被定义为id,意味着它可以是任何类型的对象。在这种情况下,你可以给contents属性赋任何值,你的app仍然能够编译通过。但是,在实践中,如果你给contents赋的不是CGImage,那么你得到的图层将是空白的。
contents这个奇怪的表现是由Mac OS的历史原因造成的。它之所以被定义为id类型,是因为在Mac OS系统上,这个属性对CGImage和NSImage类型的值都起作用,而如果你试图在iOS平台上将UIImage的值赋给它,只能得到一个空白的图层。

在iOS上,一个图层的position位于父图层的左上角,由于锚点(anchorpoint默认为(0.5,0.5))但是在Mac OS上,通常是位于左下角。Core Animation可以通过geometryFlipped属性来适配这两种情况,它决定了一个图层的坐标是否相对于父图层垂直翻转,是一个BOOL类型。在iOS上通过设置它为YES意味着它的子图层将会被垂直翻转,因此有时候会出现图像倒置的原因。
和UIView严格的二维坐标系不同,CALayer存在于一个三维空间当中。
CATransform3D 3D变化,以及改变图层的显示顺序。

显示形态

  • 隐式动画
  • 显示动画
  • 过渡
    iOS 5 带来 CoreImage后,可以通过 CATransition 的 filter属性,CIFilter 创建过渡动画。
    (自定义过渡效果:过渡动画的基础原则就是对原始图层的外观截图,然后添加一段动画后平滑的过渡到图层改变之后的效果。 CALayer 的 -renderInContext: 把它绘制到当前上下文中捕获的内容图片,然后在另外的视图中显示出来,将截图放置在原始视图之上)

动画类别

  • Layer动画
  • UIView控件
  • UIViewConroller转场动画 Secret制造商最近发布了一个新App叫做Ping,用户可以收到他们感兴趣内容的消息,主屏幕和菜单之间的动画 ping
  • icon间的过渡动画 icon 过渡
    Link "Animation"

Core Animation 维护了两个平行 layer 层次结构: model layer tree(模型层树) 和 presentation layer tree(表示层树)。前者中的 layers 反映了我们能直接看到的 layers 的状态,而后者的 layers 则是动画正在表现的值的近似。虽然你可能不会去直接设置 presentation layer 的属性,但是使用它的当前值来创建新的动画或者在动画发生时与 layers 交互是非常有用的。

通过使用 -[CALayer presentationLayer] 和 -[CALayer modelLayer],你可以在两个 layer 之间轻松切换。
基本动画
x(t) = x0 + t△x; 线性插值的方法来实现的
CABasicAnimation 路径的实现存在 完整路径

多步动画
CAKeyframeAnimation
关键帧(keyframe)使我们能够定义动画中任意的一个点,然后让 Core Animation 填充所谓的中间帧。

CATranstion(事务) 整个图层内容过渡的效果。
begin -> commit

沿路径的动画
复杂的路径实现,需要在关键帧values中存储大量的CGPoint。 而更加便利的path属性,
例如 CGPathCreateWithEllipseInRect(),我们创建一个圆形的 CGPath 作为我们的关键帧动画的 path。

模拟物理现实的动画

easing 函数是 linear。它在整个动画上维持一个恒定的速度。在 Core Animation 中,这个功能由 CAMediaTimingFunction 类表示。
在一定限度内,你也可以使用 +functionWithControlPoints:::: 创建自己的 easing 函数。通过传递 cubic Bézier 曲线的两个控制点的 x 和 y 坐标,你可以轻松的创建自定义 easing 函数。

时间轴和插值函数的输入值,其锁定在【0,1】,不能达到物理效果, git :<RBBAnimation> .
IOS 7 UIKit Dynamics 物理模拟框架, Pop , Core Animation
动画类的时间函数:
CADisplayLink
NSTimer
dispatch_queue-t _time
Quartz Core FrameWork
UIBezierPath + CADisplayLink
UIViewAnimationWithBlocks

POP

基本的静态动画,Pop还支持spring和decay动画,有助于打造一个逼真的,基于物理的交互.key可以用来查询现有的动画。Pop接口作为一个NSObject上附加类别执行。任何NSObject或者子类可以被动画。

Pop有四个具体的动画类型:spring, decay, basic和custom;

通过处理CADisplayLink和相关的time-step管理,POPCustomAnimation使创建自定义动画和过渡变得更加容易。
最理想的动画应该是专门负责交互的设计师使用Quartz Composer或者AE之类的设计工具。
View层次的动画,到 Layer 层次的动画。动画无非就是layer层的再次渲染。Pop 就不一样了。如果说 Canvas 是对 Core Animation 的封装,Pop 则是对 Core Animation(以及 UIDynamics)的再实现。模拟现实世界的物理交互是很麻烦的,动画的本质是根据时间函数来做插值。 不仅限制在Core Animation 的属性中,Pop则可以自定义属性来实现。好消息是 现在iOS9中添加了公开的 CASpringAnimation ,大家可以使用 弹性动画。

弹性动画:
“如何用阻尼振动函数创建出60个关键帧”,从而实现CALayer产生类似[UIView animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion] 的弹性动画。
pop 动画的流畅性,在于 Engine 的POPAnimator ,POP 是通过CADisplayLink 60 FPS 的特性进行设计。

NSTimer 用于我们定义任务的执行周期、资料的更新周期,他的执行受到 CPU 的阻塞影响,而 CADisplayLink 则用于定义画面的重绘、动画的演变,他的执行基于 frames 的间隔。
通过 CADisplayLink,Apple 允许你将 App 的重绘速度设定到和屏幕刷新频率一致,由此你可以获得非常流畅的交互动画。
Decay Animation 就是 POP 提供的另外一个非常特别的动画,他实现了一个衰减的效果。这个动画有一个重要的参数 velocity(速率),一般并不用于物体的自发动画,而是与用户的交互共生。这个和 iOS7 引入的 UIDynamic 非常相似,如果你想实现一些物理效果,这个也是非常不错的选择。

deceleration (负加速度) 是一个你会很少用到的值,默认是就是我们地球的 0.998,如果你开发给火星人用,那么这个值你使用 0.376 会更合适。

原理:
Facebook Pop其实是基于CADisplayLink(Mac平台上使用的CVDisplayLink)实现的独立于Core Animation之外的动画方案。
CAMediaTimingFunction 离散的进行插值计算。

App 动效

好看的外观还要有流畅的体验:惯性,重力,均匀变速,碎片化运动;
内在美(优化交互和提升体验的作用)
(1)引导

  • 动态聚焦
  • 示意过渡
  • 空间转场 (为了避免两个页面之间的跳转过于生硬,利用动效填补上了页面跳转的中间过程,使得体验更加流畅和自然。)

(2)简化
隐藏二级菜单,按钮的动效化;
(3)反馈
抖动是增强反馈的方法之一,用动效反馈替代图形文字的静态提示,更加自然和引人注目;

相关

UIKit Dynamics 喵神
ShapeLayer
核心动画高级技巧
合集
从Core Animation到Facebook‘s Pop
POP动画实例
CALayer

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

推荐阅读更多精彩内容