[转] 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 的厉害之处正在这里。

 

时间: 2024-10-31 00:30:43

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

tween.js 用户指南 - 与 Three.js 配合使用的补间动画库

tween.js 用户指南 - 与 Three.js 配合使用的补间动画库 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. Learning Three.js - Tween.js for Sm

css3常用动画+动画库

一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现.   查看演示: https://daneden.github.io/animate.css/  github地址: https://github.com/daneden/animate.css  二.magic.css动

2016年九大前端必备动画库

  进入2016年,随着各种类型网络技术的快速发展,动画 库能为我们的网页设计 增添很多视觉趣味.作为前/后端的开发人员来说,熟悉及掌握好各种动画 库(甚至抽取搭建成自己优化的动画库)代码,便能轻松省时省力地完成各种工作需求.即使客户或用户的UI设计需求越来越多,再加上设计大神们提交的动画动效DEMO,本文推荐的这些动画库基本都能在浏览器里面实现出来咯.希望对各位开发童鞋来说能有所帮助. 1. Animate.css 创建者:Daniel Eden 发布日期:2013年 最新版本:3.4.0 关

常用手势小动画库 for AE

  Hello大家好!这次我要分享一款原创的手势小动画库(就是Demo中的那个小圆点点).既然能称之为"库",那一定要符合随时调用,可复用的特点.我也是为此琢磨了好一阵,制作了这么一款手势库(很可惜我不会制作脚本插件,只能以ape工程文件的形式调用,脚步插件是接下来的努力方向!). 那么先简单介绍一下这个手势小动画库吧.里面包含:单击.双击.长按.拖拽.缩放.旋转等常用手势;单击.长按和拖拽支持单指.双指.三指.功能不多,但基本符合大部分场景需要. [常用手势] [使用方法] 首先将手

CSS3下Animations动画库示例

一.CSS3动画库 Animatable 什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3带来了圆角,半透明,阴影,渐变,多背景图等新的特征,轻松实现了设计稿中常见的图层样式,用简洁的代码替代图片,代替了多余的空标签. 现成的CSS3动画库: http://leaverou.github.io/animatable/ background-color .background-color { backgr

【转载】GitHub Top 100 简介(IOS框架)

GitHub Top 100 简介 主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况.              原文链接:https://github.com/Aufree/trip-to-iOS/blob/master/Top-100.md Android 版本的在此: https://github.com/Freelander/Android_Data/blob/master/Android-Li

iOS GitHub Top 100 简介

主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况. 项目名称 项目信息 1. AFNetworking 作者是 NSHipster 的博主, iOS 开发界的大神级人物, 毕业于卡内基·梅隆大学, 开源了许多牛逼的项目, 这个便是其中之一, AFNetworking 采用 NSURLConnection + NSOperation, 主要方便与服务端 API 进行数据交换, 操作简单, 功能强大, 现在

微软、谷歌、Facebook等硅谷大厂91个开源软件盘点(附下载地址)

开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的组织.这十二个月以来,有超过 81 万的人发起了人生第一个 PR,更有 280 万人创造了他自己的第一个仓库,而中国,成为新注册增长最多的国家. Facebook开源项目负责人曾说过: 一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼Facebook的工程

GitHub 上有哪些完整的 iOS-App 源码值得参考?

GitHub 上有哪些完整的 iOS-App 源码值得参考? http://mobdevgroup.com/ ProducthuntOSX Mac 上开源的 Product Hunt OSX 客户端软件 GanHuoCode 干货集中营的第三方iOS客户端 ESTMusicPlayer 一款基于 DOUAudioStreamer 开发的一款优雅简洁的音乐播放器. beautifulApp 用Swift做的一个高仿最美应用 Geofancy The Geofancy iOS app. Helpin