深度解析界面设计中的动效原理【ui设计】

《深度解析界面设计中的动效原理【ui设计】》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、深度解析界面设计中的动效原理【UI设计】作者:一网学   最后更新时间：2015-08-2410:55:48这篇文章是关于变速过渡效果的，看似简单，但真正想让动画自然流畅，还需要深入了解动画的基本原理。今天我们将会逐步学习：基本概念、探讨加速减速，拆解缓冲曲线，最终学会运用到界面设计中。你认为这两个球在做什么？绿球弹跳很明显，但是红球在怎样运动？当然，它像绿球一样上下运动，落下和弹起所用的时间和绿球一样。然而，红球感觉很机械，而绿球让人感觉它确实在弹跳。为什么我们会有这种感受上的差异呢？答案是变速过渡效果（Easing）。1、时间和空间位移（

2、TimingandSpacing）首先，我们需要理解两个重要的概念——时间和空间，二者是紧密相关、密不可分的。为了使动画更有可读性，他们至关重要。注：“可读性”是说动画绘制者如何定义动画的精准度，用来清晰而容易地理解正在发生的事情。例如：不可读=不清楚发生的事情很易读=它非常清楚，立刻能懂时间在案例中，两个球在同一顶端同时落下，0.5秒到达地面，1秒回到原位。这是球的时间 - 完成一个动作所用的时间耗时。两个球耗时相同，但是，等等……两个球都是1秒的动画，为什么感觉如此不同呢？空间位移这是使两个动画完全不同的关键区别。让我们把第一个0.5秒的

3、动画分解为较小的时间单位，这样我们可以更清楚地观察发生了什么。如果我们把每0.1秒球的位置进行标记，我们可以得到这张图：看到两个时间单元之间的距离了嘛？这就是空间位移。很容易的东西，对吗？时间是耗时，空间是位移！让我们来看红球的间距 ，非常均匀。每经过0.1秒，它就移动完全相同的距离。在运动中完全没有任何变化。然而，绿球每0.1秒都有不同的间隔。在第一个0.1s，它只移动非常小的间距，当它掉下来，间距变得越来越大，直到它终于打到地面。事实上，它耗费了0.4秒来完成前半程，仅用了0.1秒完成后半程！所以，问题来了，为什么要用这样的方式加长每秒的

4、间距呢？观察显示世界观察弹跳一个球时会发生什么。自己尝试一下或者观察一些YouTube上的相关视频。我发现两个问题：慢放的弹跳球和网球弹跳球。弹跳背后的物理理论：球刚开始被放开的时候，它有一个相对缓慢的速度。在重力的作用下，球的速度持续增长，直到接触地面的那一刻速度达到最大。地面给球反作用力，使它以几乎相同的速度反弹回去。当球移动时，两种力量作用正在球上 - 反弹的力、想把它拉下来的重力。反弹的力量正在慢慢释放，这使得球随着升高逐渐减低速度，直到它耗费掉所有的反作用力，最终到达反弹的最高点。它在顶部停留一微秒，直到重力把它拉下来，使它像之前一

5、样加速下降。我用言语来描述这句话是有原因的。我们试着将一种自然行为分解为具体的步骤，这样我们就可以重新创造它。有些关键的注意事项：1、当球在顶部，它是缓慢的。随着下降，它的速度随之增加。2、在弹回来的时候，开始时球的速度很快。到达顶点时，速度就慢下来了。3、在同一时间内，当球速很快时，位移会很长，当球速变慢时，位移就少得多。最后那句话听起来多余，但这正是我们感兴趣的：一个速度快的物体在一个单位时间内移动了很长的距离，而慢的物体在相同时间内覆盖较短的距离。应用我们观察到的结论让我们把这个概念应用到动画中。再看一下位移图。在顶部间距小，每0.1s

6、逐渐增加间距，最后，在底部达到最大间距。这正是我们在之前的研究中所看到的。我们简单地把这一原则“复制”到绿球，返回的时候进行逆向应用，瞧 ，这是个 弹跳的球！注：不要羞于“照搬”大自然。你的观众会更快地与动画关联起来，从而更容易读懂动画。让我们再看一次红球，为什么一点儿不觉得红球在弹跳？在理解了一个弹跳球的物理原理后，这个问题就变得很清楚。每0.1秒内红球移动了相同的距离，但是从研究中我们知道：一个跳跃的球不会像那样移动。因为，它没有像弹跳球一样运动，看上去也感觉不像弹跳球。那么，能有什么会像红球以同样如此精准的时间、精确的间距进行运动呢？当

7、然，机械机器人！红球在“复制”机械机器人的间距。换句话说，因为它像机器人一样运动，它就让人感觉很机械。道理真的很简单！小结听众会不自觉地把动画和他们已知的东西关联起来。如果动画让人联想到周围的世界，它会看上去很自然。如果它让人联想到机器人，它会感觉很机械。如果它让人联想不到任何东西，就意味着动画看上去“很奇怪”。2、渐快与渐慢（Ease-inandEase-out）现在你知道我们为什么为跳跃的球设置不均匀的间距了。这种不均匀间距的技术术语叫做变速过渡效果。根据你将它用于动画开始还是结束，它被称为渐快或渐慢。渐快当球以慢速开始并积累速度时，这一

8、过程被称为渐快。渐慢当球以快速开始并降低速度时，这一过程被称为渐慢。为了理解缓冲这一词的定义，我们已经查找了大量理论！注意：这一术语有可能与其它术语混淆。如果你正在