[转] iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么？-白红宇

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

拿 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 在里说到，触屏使得操作更加直接，因此也让人们对屏幕这个媒介的期待更高：如果一个物体能响应我的点按，它也需要能响应我的轻轻一划。

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