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

  • 相关阅读:
    What are the difference between DDL, DML and DCL commands?
    Dingjun123 :使用Partitioned Outer Join实现稠化报表
    Oracle Clusters
    Google实验室能力倾向测试(第一题及解答)
    搜索系统中基于字典的逆向中文分词
    vc++ 深入浅出 窗口创建过程
    计算机网络基础知识1
    线性代数学习之对称矩阵与矩阵的SVD分解
    珍爱生命
    str2hash
  • 原文地址:https://www.cnblogs.com/YouXianMing/p/4014601.html
Copyright © 2020-2023  润新知