|
图/文 百度MUX 这篇文章是关于变速过渡效果的，看似简单，但真正想让动画自然流畅，还需要深入了解动画的基本原理。今天我们将会逐步学习：基本概念、探讨加速减速，拆解缓冲曲线，最终学会运用到界面设计中。 你认为这两个球在做什么？ 绿球弹跳很明显，但是红球在怎样运动？当然，它像绿球一样上下运动，落下和弹起所用的时间和绿球一样。然而，红球感觉很机械，而绿球让人感觉它确实在弹跳。为什么我们会有这种感受上的差异呢？答案是变速过渡效果（Easing）。 1、时间和空间位移（Timing and Spacing）首先，我们需要理解两个重要的概念——时间和空间，二者是紧密相关、密不可分的。为了使动画更有可读性，他们至关重要。 注：“可读性”是说动画绘制者如何定义动画的精准度，用来清晰而容易地理解正在发生的事情。例如：不可读=不清楚发生的事情很易读=它非常清楚，立刻能懂 时间 在案例中，两个球在同一顶端同时落下，0.5秒到达地面， 1秒回到原位。这是球的时间?-?完成一个动作所用的时间耗时。两个球耗时相同，但是，等等……两个球都是1秒的动画，为什么感觉如此不同呢？ 空间位移 这是使两个动画完全不同的关键区别。让我们把第一个0.5秒的动画分解为较小的时间单位，这样我们可以更清楚地观察发生了什么。如果我们把每0.1秒球的位置进行标记，我们可以得到这张图： 看到两个时间单元之间的距离了嘛？这就是空间位移。很容易的东西，对吗？时间是耗时，空间是位移！ 弹跳背后的物理理论： 球刚开始被放开的时候，它有一个相对缓慢的速度。在重力的作用下，球的速度持续增长，直到接触地面的那一刻速度达到最大。地面给球反作用力，使它以几乎相同的速度反弹回去。当球移动时，两种力量作用正在球上?-?反弹的力、想把它拉下来的重力。步骤，这样我们就可以重新创造它。 渐快与渐慢（Ease-in and Ease-out） 现在你知道我们为什么为跳跃的球设置不均匀的间距了。这种不均匀间距的技术术语叫做变速过渡效果。根据你将它用于动画开始还是结束，它被称为渐快或渐慢。 渐快 当球以慢速开始并积累速度时，这一过程被称为渐快。 渐慢 当球以快速开始并降低速度时，这一过程被称为渐慢。 为了理解缓冲这一词的定义，我们已经查找了大量理论！ 阅读变速过渡的曲线图 你会注意到，当你打开软件包的时候，渐进的功能不会为你展示像上图那样线性的层次。相反，你会得到这样的曲线： 我测量了红球的运动，并记录了每经过0.1秒时y的位置。我们注意到，每经过0.1秒，红球正好移动了34个像素。如果我们把这一过程绘制在图表上，并连点成线，我们就会得到一条直线。我们突然发现，这就是你在大多数软件中看到的线性渐变图形。 现在，让我们对绿球做相同处理。 我得到的值是：每0.1秒，球在垂直位置的变化量都会不同。开始时，它的变化很小（只有2个像素），然后缓慢增加。在最后0.1秒，它增加了高达83个像素。在图表上绘制这些点，我们得到了这条曲线。 现在这幅图看起来熟悉吗？这就是那些图标的由来。它们表示变化率，或者我们现在已经了解的间隔。 变速过渡效果应用在UI设计中 最后，让我们看看这些怎么用在UI设计中。我并不十分建议在你的app设计中应用渐慢、渐快的很多规则。但我可以提供一些它是如何被应用在当下时髦App里的常见的例子。 在移动App中，你能看到的最常见的运用是菜单滑动。如果App没有运用这些变速过渡的效果，就会像是一下的例子： 有些乏味，难道不是吗？让我们应用一些变速过渡的效果，看一看会发生什么？ 恩~好多了！屏幕向外滑动时我们应用了渐快效果，当向内滑动时我们应用了渐慢的效果。但是，为什么不能在屏幕向外滑动时应用渐慢的效果呢？ 从技术上说你是可以的，但这样你会发现：当用户点击一个按钮时，固定的屏幕就会移动。 当画面回滚的时候，屏幕就像一辆从制动到停止前进的汽车。它开始时很快，然后减速到停止——这是一个渐慢过程。 这篇文章篇幅较长！希望它能帮助你更好的理解变速过渡效果。 |
|
|
