界面设计中的动画原理：可理解的变速过渡效果-深入研究加速和减速.pdf

界面设计中的动画原理 ：可理解的变速过渡效果-深入研究加速和减速 你认为这两 球在做什么 绿球弹跳很明显 ，但是红球在怎样运动 ？当然 ，它像绿球一样上下运动 ，落下和弹起所用的时间和 绿球一样。然而 ，红球感觉很机械 ，而绿球让人感觉它确实在弹跳。为什么我们会有这种感受上的 差异呢 ？ 答案是变速过渡效果(Easing)。 这篇文章就是关于变速过渡效果的 ，貌似这是显而易见的 ，但要了解真正发生的事情 ，还需要深入 了解动画的基本原理。文章中 ，我们将会逐步学习 ：基本概念、探讨加速减速 ，拆解缓冲曲线 ，最 终学习到这一切是如何应用于UI设计的。 时间和空间位移(Timing and Spacing) 首先 ，我们需要理解两 重要的概念——时间和空间 ，二者是紧密相关、密不可分的。为了使动画 更有可读性 ，他们至关重要。 注 ：“可读性”是说动画绘制者如何定义动画的精准度 ，用来清晰而容易地理解正在发生的 事情。例如 ：不可读=不清楚发生的事情很易读=它非常清楚 ，立刻能懂 时间 在案例中 ，两 球在同一顶端同时落下 ，0.5秒到达地面 ， 1秒回到原位。这是球的时间 - 完成一 动 作所用的时间耗时。两 球耗时相同 ，但是 ，等等……两 球都是1秒的动画 ，为什么感觉如此不 同呢 ？ 空间位移 这是使两 动画完全不同的关键区别。让我们把第一 0.5秒的动画分解为较小的时间单位 ，这样我 们可以更清楚地观察发生了什么。如果我们把每0.1秒球的位置进行标记 ，我们可以得到这张图 ： 看到两 时间单元之间的距离了嘛 ？这就是空间位移。很容易的东西 ，对吗 ？时间是耗时 ，空间是 位移 ！ 让我们来看红球的间距  ，非常均匀。每经过0.1秒 ，它就移动完全相同的距离。在运动中完全没有任 何变化。然而 ，绿球每0.1秒都有不同的间隔。在第一 0.1s ，它只移动非常小的间距 ，当它掉下来 ，间距变得越来越大 ，直到它终于打到地面。事实上 ，它耗费了0.4秒来完成前半程 ，仅用了0.1秒 完成后半程 ！ 所以 ，问题来了 ，为什么要用这样的方式加长每秒的间距呢? 观察显示世界 观察弹跳一 球时会发生什么。自己尝试一下或者观察一些Y uT ube上的相关视频。我发现两 问题 ：慢放的弹跳球和网球弹跳球 弹跳背后的物理理论 ：球刚开始被放开的时候 ，它有一 相对缓慢的速度。在重力的作用下 ，球的速度持续增长 ，直到接触地面的那一刻速度达到最大。地面给球反作用力 ，使它以几 乎相同的速度反弹回去。当球移动时 ，两种力量作用正在球上 - 反弹的力、想把它拉下来的 重力。反弹的力量正在慢慢释放 ，这使得球随着升高逐渐减低速度 ，直到它耗费掉所有的反 作用力 ，最终到达反弹的最高点。它在顶部停留一微秒 ，直到重力把它拉下来 ，使它像之前 一样加速下降。我用言语来描述这句话是有原因的。我们试着将一种自然行为分解为具体的 步骤 ，这样我们就可以重新创造它。 有些关键的注意事项 ： 1. 当球在顶部 ，它是缓慢的。随着下降 ，它的速度随之增加。 2. 在弹回来的时候 ，开始时球的速度很快。到达顶点时 ，速度就慢下来了。 3. 在同一时间内 ，当球速很快时 ，位移会很长 ，当球速变慢时 ，位移就少得多。 最后那句话听起来多余 ，但这正是我们感兴趣的 ：一 速度快的物体在一 单位时间内移动了很长 的距离 ，而慢的物体在相同时间内覆盖较短的距离。 应用我们观察到的结论 让我们把这 概念应用到动画中。再看一下位移图。在顶部间距小 ，每0.1s逐渐增加间距 ，最后 ， 在底部达到最大间距。这正是我们在之前的研究中所看到的。我们简单地把这一原则“复制”到绿球 ， 返回的时候进行逆向应用 ，瞧  ，这是  弹跳的球 ！ 注 ：不要羞于“照搬”大自然。你的观众会更快地与动画关联起来 ，从而更容易读懂动画。 让我们再看一次红球 ，为什么一点儿不觉得红球在弹跳 ？在理解了一 弹跳球的物理原理后 ，这 问题就变得很清楚。每0.1秒内红球移动了相同的距离 ，但是从研究中我们知道 ：一 跳跃的球不会 像那样移动。因为 ，它没有像弹跳球一样运动 ，看上去也感觉不像弹跳球。 那么 ，能有什么会像红球以同样如此精准的时间、精确的间距进行运动呢 ？当然 ，机械机器人 ！红 球在“复制”机械机器人的间距。换句话说 ，因为它像机器人一样运动 ，它就让人感觉很机械。道理 真的很简单 ！ 小结 听众会不自觉地把动画和他们已知的东西关联起来。如果动画让人联想到周围的世