美文网首页我依然爱iOS
[译]《Motion Design for iOS》(十三)

[译]《Motion Design for iOS》(十三)

作者: Cloudox_ | 来源:发表于2017-11-20 09:40 被阅读9次

    让我们看看类似弹簧动作的物体。红色的圆仿佛附有非常有弹性的弹簧一般在移动。绿色的圆带着稍微平滑一些的弹性移动。蓝色的不带有弹性,但会在接近终点值时以指数级衰退速度的动画变得非常的缓慢。


    image

    第三个球实际上并没有弹性,但它的动画依然被现实世界的弹簧物理法则所管理,是怎么回事呢?弹簧不是应该有弹性么?如我之前所说,附有弹簧的物体的动作实际上由弹簧的特性决定。想象一个弹簧,组成弹簧的线非常的细。这个弹簧的拉力是非常的松额,如果你在其底部挂上一个小物体,并松开它,你就会看到如红球演示的弹性动作。比较一个拥有更多线圈和更大拉力的更加高强度类型的弹簧。挂在这种类型弹簧上的物体动作会很没有弹性,因为弹簧的属性非常不同。


    image

    类似弹簧动作的动画曲线和简单类型动作的动画曲线可能看起来相似(至少他们都是曲线!),但是它们背后的数学运算是非常不同的。如前所说,简单曲线通过三维贝塞尔函数来定义绘制曲线控制点的位置。不幸的是,很多高级类型的曲线不能用贝塞曲线来描述。其中一种曲线就是阻尼弹簧系统。

    使用好的拥有弹簧感觉动画的动作类型一般模仿阻尼谐振,其可以调整弹簧末端方块质量、弹簧的刚度、阻尼强度等不同值。


    image

    质量是指挂在弹簧末端物体的质量。刚度是指拉伸弹簧的难度,一般由弹簧的厚度和盘绕的密度决定。阻尼强度是指抵抗力度或者摩擦力,就如你尝试在水中快速拖动你的手时受到的阻力。这些是定义一个弹簧动作的关键属性。

    如果你想要从头构建起你对web、iOS或其他平台的动画库,并且想要支持类似弹簧的动画,你就需要理解弹簧系统背后大量的数学知识才能正确地实现它。幸运的是,对于iOS,有很多已经存在的优秀的动画框架(由苹果公司或其他人创建)可以用来创建自然的、类似弹簧的动画。

    在我们投入动画编码之前,让我们从头开始讨论开发iOS app的基本原则,然后进入界面开发和iOS动画。

    查看完整合集:https://github.com/Cloudox/Motion-Design-for-iOS


    查看作者首页

    相关文章

      网友评论

        本文标题:[译]《Motion Design for iOS》(十三)

        本文链接:https://www.haomeiwen.com/subject/elimvxtx.html