新概念科技（上海网站开发）：今天给大伙推荐的这篇文章是关于变速过渡成效的，看似简单，但真正想让动画当然流畅，还必须要深入清楚动画的基本原理。今天咋们将会逐步学习：基本概念、探讨加速减速，拆解缓冲曲线，较终学会运用到上海网站制作中。

你认为这两个球在做什么？

绿球弹跳很明显，不过红球在怎样运动？当然，它像绿球一样上下运动，落下和弹起所用的時间和绿球一样。然而，红球感觉很机械，而绿球让人感觉它确实在弹跳。为什么咋们会有这种感受上的差别呢？答复是变速过渡成效（Easing）。

1、時间和空间位移（Timing and Spacing）

*先，咋们必须要理解两个重要的概念——時间和空间，二者是紧密相应、密不可分的。为了使动画更有可读性，他们至关重要。注：“可读性”是说动画绘制者如何定义动画的有效度，用来清晰而简单地理解正在发生的事情。例如：不可读=不清楚发生的事情很易读=它特别清楚，立刻能懂

時间

在案例中，两个球在同一顶端同时落下，0.5秒到达地面， 1秒回到原位。这是球的時间 - 完成一个动作所用的時间耗时。两个球耗时相同，不过，等等……两个球全是1秒的动画，为什么感觉如此不同呢？

空间位移

这是使两个动画有效不同的关键差异。让咋们把先进个0.5秒的动画分解为较小的時间单位，这样子咋们可以更清楚地观察发生了什么。假如咋们把每0.1秒球的位置开展标记，咋们可以获得这张图：

看到两个時间单元之间的距离了嘛？这便是空间位移。很简单的东西，对吗？時间是耗时，空间是位移！

让咋们来讲红球的间距 ，特别均匀。每经过0.1秒，它就移动有效相同的距离。在运动中有效没有任何改变。然而，绿球每0.1秒都有不同的间隔。在先进个0.1s，它只移动特别小的间距，当它掉下来，间距变得越来越大，直到它终于打到地面。事实上，它耗费了0.4秒来完成前半程，仅用了0.1秒完成后半程！

故此，问题来了，为什么要用这样子的方法加长每秒的间距呢？

观察显示世界

观察弹跳一个球时会发生什么。自个尝试一下或者观察一部分YouTube上的相应视频。我发现两个问题：慢放的弹跳球和网球弹跳球。

弹跳背后的物理理论：

球刚开始被放开的时候，它有一个相对缓慢的速度。在重力的作用下，球的速度持续增长，直到接触地面的那一刻速度到达较大。地面给球反作用力，使它以差不多相同的速度反弹回去。当球移动时，两种力量作用正在球上 - 反弹的力、想把它拉下来的重力。反弹的力量正在慢慢释放，这使得球伴随着升高逐渐减0速度，直到它耗费掉所有的反作用力，较终到达反弹的较高点。它在顶部停留一微秒，直到重力把它拉下来，使它像以前一样加速下降。我用言语来描述这句话是有原因的。咋们试着将一种当然行为分解为具体的流程，这样子咋们就可以重新创造它。

有一些关键的注意事项：

1、当球在顶部，它是缓慢的。伴随着下降，它的速度随之增加。
2、在弹回来的时候，开始时球的速度很快。到达顶点时，速度就慢下来了。
3、在同一時间内，当球速很快时，位移会很长，当球速变慢时，位移就少得多。

较后那句话听起来多余，但这正是咋们感兴趣的：一个速度快的物体在一个单位時间内移动了很长的距离，而慢的物体在相同時间内覆盖较短的距离。

应用咋们观察到的结论

让咋们把这样的概念应用到动画中。再看一下位移图。在顶部间距小，每0.1s逐渐增加间距，较后，在底部到达较大间距。这正是咋们在以前的研究中所看到的。咋们简单地把这一原则“复制”到绿球，返回的时候开展逆向应用，瞧 ，这是个 弹跳的球！
注：不要羞于“照搬”大当然。你的观众会更快地与动画关联起来，从而更简单读懂动画。

让咋们再看迅速红球，为什么一点儿不觉得红球在弹跳？在理解了一个弹跳球的物理原理后，这样的问题就变得很清楚。每0.1秒内红球移动了相同的距离，不过从研究中咋们知道：一个跳跃的球不可能像那样移动。由于，它没有像弹跳球一样运动，看上去也感觉不像弹跳球。
那么，能有什么会像红球以一样如此有效的時间、—有效的间距开展运动呢？当然，机械机器人！红球在“复制”机械机器人的间距。换句话说，由于它像机器人一样运动，它就让人感觉很机械。道理真的很简单！

小结

听众会不自觉地把动画和他们已知的东西关联起来。假如动画让人联想到周围的世界，它会看上去很当然。假如它让人联想到机器人，它会感觉很机械。假如它让人联想不到任何东西，就意味着动画看上去“很奇怪”。

2、渐快与渐慢（Ease-in and Ease-out）

现在你知道咋们为什么为跳跃的球设置不均匀的间距了。这种不均匀间距的技术术语叫做变速过渡成效。依据你将它用于动画开始还是结束，它被称为渐快或渐慢。

渐快

当球以慢速开始并积累速度时，这一过程被称为渐快。

渐慢

当球以迅速开始并降0速度时，这一过程被称为渐慢。

为了理解缓冲这一词的定义，咋们已经查找了大批理论！

注意：这一术语有可能与其它术语混淆。假如你正在阅读传统的卡通书，例如迪斯尼的《生命的幻象》或《动画师的生存工具》，那么这些书会告知你，当一个物体开始减速然后加速时，这一过程被称为渐慢（ease-out），由于它的姿态在“缓慢输出”。不过，在软件产业（CSS动画，Adobe Edge等），这一过程被称为渐快（ease in）！我不确定这一不同之处是怎么来的，不过不幸的是，这便是它的形成过程。故此，当你在阅读一篇文章时，而这篇文章把它们把“渐快”称为“渐慢”，那么不要觉得困惑。看一眼你所在的网站你就懂了:D。

阅读变速过渡的曲线图

你会注意到，当你打开软件包的时候，渐进的基本功能不可能为你呈现像上图那样线性的层次。相反，你会获得这样子的曲线：

那么，这一曲线与咋们到现在为止谈论的一切事情有什么关系呢？让咋们将曲线画在图表上，然后看一看咋们较终画出了什么。这只是基础数学罢了——咋们（应该）在学校里已经学过了。

这是咋们的图表——咋们将要沿着x轴绘制時间，y轴绘制球的位置。为了方便起见，咋们选择了4个单位x轴，表示0.1秒，选择1个单位y轴表示球在垂直运动中的10个像素。（图6）

我测量了红球的运动，并记录了每经过0.1秒时y的位置。这里是记录的值：

時间 Y轴的位置（秒） : （像素）—————-0.0 : 00.1 : 34

0.2 : 68
0.3 : 102
0.4 : 136
0.5 : 170

咋们注意到，每经过0.1秒，红球正好移动了34个像素。假如咋们把这一过程绘制在图表上，并连点成线，咋们就会获得一条直线。咋们突然发现，这便是你在大多数软件中看到的线性渐变图形。

现在，让咋们对绿球做相同处置。

時间 Y轴的位置（秒） : （像素）—————-0.0 : 00.1 : 2

0.2 : 10
0.3 : 36
0.4 : 87
0.5 : 170

我获得的值是：每0.1秒，球在垂直位置的改变量都会不同。开始时，它的改变很小（只有2个像素），然后缓慢增加。在较后0.1秒，它增加了高达83个像素。在图表上绘制这些点，咋们获得了这条曲线。

现在这幅图看起来熟悉吗？这便是那些图标的由来。它们表示改变率，或者咋们现在已经清楚的间隔。

注意：你会在软件中看到越来越多用于设置缓冲的选项，例如二次的、三次的、四次的等等。它们只是缓和水平更高的选择，不过概念是相同的。只需记住——缓和的水平越高，你就会获得越来越多的缓和度。

3、变速过渡成效应用在UI设计中

较后，让咋们看一看这些怎么用在UI设计中。

并不是规则，只是工具（There are no rules. Only tools）- Glenn Vilppu

我并不十分建议在你的上海网站开发中应用渐慢、渐快的好多规则。但我可以提供一部分它是如何被应用在当下时髦的网站制作里的常见的例子。在上海网站开发中，你能看到的较常见的运用是菜单滑动。假如移动端的网站开发没有运用这些变速过渡的成效，就会像是一下的例子：

有一些乏味，难道不是吗？让咋们应用一部分变速过渡的成效，看一瞧会发生什么？

恩~好多了！屏幕向外滑动时咋们应用了渐快成效，当向内滑动时咋们应用了渐慢的成效。不过，为什么不能在屏幕向外滑动时应用渐慢的成效呢？

从技术上说你是可以的，但这样子你会发现：当顾客点击一个按钮时，固定的屏幕就会移动。

当画面回滚的时候，屏幕就像一辆从制动到停止前进的汽车。它开始时很快，然后减速到停止——这是一个渐慢过程。故此，假如你在解决一个特别元素活动方面存在问题，可以尝试将其与物理行为关联。这样子，相对如何使顾客界面元素活动的问题就会迎刃而解。

现在你知道了这些动态成效为什么会感觉很当然，你可以在网站开发中去到达一样的感觉成效。很愉快看到你把这些观念应用到你的设计中。

【推荐阅读】：《经验总结！咋们为什么必须要动效设计？》