[转] iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么?

简介:

iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么?

http://www.zhihu.com/question/23654895/answer/25541037

拿 Canvas 来和 Pop 比其实不大合适,虽然两者都自称「动画库」,但是「库」这个词的含义有所区别。本质上 Canvas 是一个「动画合集」而 Pop 是一个「动画引擎」。

先说 Canvas。Canvas 的目的是「Animate in Xcode Without Code」。开发者可以通过在 Storyboard 中指定 User Defined Runtime Attributes 来实现一些 Canvas 中预设的动画,也就是他网站上能看到的那些。但是除了更改动画的 delay 和 duration 基本上不能调整其他的参数(网站上有写未来准备支持不过都五个月了……)

我们来考虑一个 bounce left 的动画,其实无外乎就是某个物体从右到左再小幅震荡然后停止的过程。Canvas 里是这么做的:

+ (void)performAnimationOnView:(UIView *)view duration:(NSTimeInterval)duration delay:(NSTimeInterval)delay { // Start view.transform = CGAffineTransformMakeTranslation(300, 0); [UIView animateKeyframesWithDuration:duration/4 delay:delay options:0 animations:^{ // End view.transform = CGAffineTransformMakeTranslation(-10, 0); } completion:^(BOOL finished) { [UIView animateKeyframesWithDuration:duration/4 delay:0 options:0 animations:^{ // End view.transform = CGAffineTransformMakeTranslation(5, 0); } completion:^(BOOL finished) { [UIView animateKeyframesWithDuration:duration/4 delay:0 options:0 animations:^{ // End view.transform = CGAffineTransformMakeTranslation(-2, 0); } completion:^(BOOL finished) { [UIView animateKeyframesWithDuration:duration/4 delay:0 options:0 animations:^{ // End view.transform = CGAffineTransformMakeTranslation(0, 0); } completion:^(BOOL finished) { }]; }]; }]; }]; } 


没有任何特别之处(除了 callback 嵌套得有点壮观)。但是对于一般开发者来说最头痛的大概就是调动画里的参数,Canvas 直接把参数写死,虽然效果略为生硬,对动画苦手来说还是有帮助的。

而 Canvas 的 components 也差不多,通过在 Storyboard 中指定属性来自定义字体或者是毛玻璃背景(通过插 UIToolbar 来实现的,比较粗糙)等效果。其实也就是省了几行代码的事——当然这也正是它所追求的。

Pop 就不一样了。如果说 Canvas 是对 Core Animation 的封装,Pop 则是对 Core Animation(以及 UIDynamics)的再实现。

为什么要再实现?回到 2010 年 Mike Matas 和 Kimon Tsinteris 创办 Push Pop Press 时。那时(其实一直到 iOS 7 之前都是)Core Animation 只能做所谓的「静态动画」——系统只提供了四种时间函数:线性、慢入、慢出、慢入慢出。要用这些模拟现实世界的物理交互是很麻烦的。现实的交互就像 Apple 已经实现好的 UIScrollView:拉到头了还能再拉一段然后松手后弹回去,轻轻一划松手后会自动滑动一段距离之后慢慢停下来。Kimon Tsinteris 在 Introducing Pop, the animation engine behind Paper 里说到,触屏使得操作更加直接,因此也让人们对屏幕这个媒介的期待更高:如果一个物体能响应我的点按,它也需要能响应我的轻轻一划。

但是很遗憾,苹果并没有公开他们用于实现 UIScrollView 的技术。大家可能不大好想象一个没有「弹性」的 scroll view 是什么样,刚好 Ole Begemann 前段时间自己重制了一个。在 Understanding UIScrollView 这篇文章末尾的图片中可以看到,这是一个松手即停,到头即无法再拖动的 scroll view。

而 Kimon 他们希望在 Push Pop Press 里的每一个元素都能有像 UIScrollView 一样的体验。于是他们创造了一个自己的动画引擎,在这个引擎里需要加入两种额外的动画效果:Spring(弹性)和 Decay(衰减)。后来在开发 Paper 的时候他们又进一步完善了这个引擎,便是我们现在看到的 Pop。

举个例子,同样一个 bounce left 的效果,在 Pop 中是这样实现的:

POPSpringAnimation *animation = [POPSpringAnimation animation]; animation.property = [POPAnimatableProperty propertyWithName:kPOPLayerTranslationX]; animation.fromValue = @300.0; animation.toValue = @0.0; animation.springBounciness = 10.0; animation.springSpeed = 12.0; [view.layer pop_addAnimation:animation forKey:@"pop"]; 


Pop 语法上和 Core Animation 相似,效果上则不像 Canvas 那么生硬(时间四等分,振幅硬编码)。这使得对 Core Animation 有了解的程序员可以很轻松地把原来的「静态动画」转换成「动态动画」。

同时 Pop 又往前多走了一步。既然动画的本质是根据时间函数来做插值,那么理论上任何一个对象的任何一个值都可以用来做插值,而不仅仅是 Core Animation 里定死的那一堆大小、位移、旋转、缩放等 animatable properties。比如说某个标签的文字颜色要从黄色渐变成紫色,之前在 Core Animation 里无法做到,而通过 Pop 则可以自定义一个属性来较为轻松地实现。又或者说同样是动态更改一个 view 的大小,之前只能更改它的 frame,而现在可以更改 Auto Layout 的 constraints,对于使用 Auto Layout 的人来说这是更直观的做法。

当然使用 Pop 的问题就在于对交互设计师的要求更高了。一个弹性动画要有多「弹」,一个衰减动画要以什么样的速度衰减,什么样的动画让用户觉得恰到好处不喧宾夺主,这都是设计师需要考虑的问题。Mike Matas 的厉害之处正在这里。

 

目录
相关文章
|
编译器 iOS开发 异构计算
读iOS核心动画笔记
读iOS核心动画笔记
50 0
|
4月前
|
安全 Java Android开发
Android 与 iOS:探索两大操作系统的差异与优势
本文将深入探讨安卓和iOS这两大主流移动操作系统的差异与优势。我们将分别从用户界面、应用生态系统、开发者支持以及性能与安全方面进行比较,帮助读者更好地了解并选择适合自己的操作系统。
86 0
|
1月前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
48 11
|
2月前
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
45 7
|
3月前
|
Java Android开发 iOS开发
探索iOS与安卓在移动应用开发中的差异及优势
在数字时代的浪潮下,移动应用开发成为技术前沿的重要领域。本文旨在深入分析iOS与安卓这两大主流操作系统在移动应用开发过程中的显著差异及各自的独特优势。通过对比两者的开发环境、工具、语言和用户群体等方面,揭示它们如何塑造开发者的选择并影响最终的应用产品。我们不仅关注技术层面的区别,也着眼于市场动态和用户体验的不同需求,以期为开发者提供全面而实用的视角。
|
4月前
|
安全 Java Android开发
探索Android与iOS开发平台的差异与优势
【6月更文挑战第7天】在移动应用开发的广阔天地中,Android和iOS两大平台如同双子星般熠熠生辉。本文将深入探讨这两个系统在开发环境、用户界面设计、市场策略及安全性方面的不同之处,旨在为开发者提供一个清晰的指南,帮助他们根据项目需求和目标受众选择最合适的平台。
|
5月前
|
iOS开发
iOS使用.framework类型的静态库
iOS使用.framework类型的静态库
39 1
|
5月前
|
开发工具 iOS开发
iOS制作.framework静态库
iOS制作.framework静态库
51 1
|
5月前
|
iOS开发 Perl
iOS使用.a类型的静态库
iOS使用.a类型的静态库
44 1
|
5月前
|
开发工具 iOS开发
iOS制作.a类型的静态库
iOS制作.a类型的静态库
39 1