文档介绍：------------------------------------校验:_____________--------------------------------日期:_____________深度解析界面设计中的动效原理【UI设计】深度解析界面设计中的动效原理【UI设计】作者:一网学   最后更新时间:2015-08-2410:55:48这篇文章是关于变速过渡效果的,看似简单,但真正想让动画自然流畅,还需要深入了解动画的基本原理。今天我们将会逐步学****基本概念、探讨加速减速,拆解缓冲曲线,最终学会运用到界面设计中。你认为这两个球在做什么?绿球弹跳很明显,但是红球在怎样运动?当然,它像绿球一样上下运动,落下和弹起所用的时间和绿球一样。然而,红球感觉很机械,而绿球让人感觉它确实在弹跳。为什么我们会有这种感受上的差异呢?答案是变速过渡效果(Easing)。1、时间和空间位移(TimingandSpacing)首先,我们需要理解两个重要的概念——时间和空间,二者是紧密相关、密不可分的。为了使动画更有可读性,他们至关重要。注:“可读性”是说动画绘制者如何定义动画的精准度,用来清晰而容易地理解正在发生的事情。例如:不可读=不清楚发生的事情很易读=它非常清楚,立刻能懂时间在案例中,两个球在同一顶端同时落下,,1秒回到原位。这是球的时间 - 完成一个动作所用的时间耗时。两个球耗时相同,但是,等等……两个球都是1秒的动画,为什么感觉如此不同呢?空间位移这是使两个动画完全不同的关键区别。,这样我们可以更清楚地观察发生了什么。,我们可以得到这张图:看到两个时间单元之间的距离了嘛?这就是空间位移。很容易的东西,对吗?时间是耗时,空间是位移!让我们来看红球的间距 ,非常均匀。,它就移动完全相同的距离。在运动中完全没有任何变化。然而,。,它只移动非常小的间距,当它掉下来,间距变得越来越大,直到它终于打到地面。事实上,,!所以,问题来了,为什么要用这样的方式加长每秒的间距呢?观察显示世界观察弹跳一个球时会发生什么。自己尝试一下或者观察一些YouTube上的相关视频。我发现两个问题:慢放的弹跳球和网球弹跳球。弹跳背后的物理理论:球刚开始被放开的时候,它有一个相对缓慢的速度。在重力的作用下,球的速度持续增长,直到接触地面的那一刻速度达到最大。地面给球反作用力,使它以几乎相同的速度反弹回去。当球移动时,两种力量作用正在球上 - 反弹的力、想把它拉下来的重力。反弹的力量正在慢慢释放,这使得球随着升高逐渐减低速度,直到它耗费掉所有的反作用力,最终到达反弹的最高点。它在顶部停留一微秒,直到重力把它拉下来,使它像之前一样加速下降。我用言语来描述这句话是有原因的。我们试着将一种自然行为分解为具体的步骤,这样我们就可以重新创造它。有些关键的注意事项:1、当球在顶部,它是缓慢的。随着下降,它的速度随之增加。2、在弹回来的时候,开始时球的速度很快。到达顶点时,速度就慢下来了。3、在同一时间内,当球速很快时,位移会很长,当球速变慢时,位移就少得多。最后那句话听起来多余,但这正是我们感兴趣的