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