三.理解easing

Vinci_D 2015-07-13

展开全文

http://www./css3/CSS3-animation.html

easing是什么？这一节都是关于easing的内容？没错！Easing是我觉得我们网页设计师目前还探讨得不够的内容之一。

“时间是动画的一部分，它为每一次移动赋予了意义。移动可以是通过简单地在两个不同的位置绘制相同的内容，然后在两者之间插入数个其它的图片来完成。但是这样屏幕上的看到的就只是单纯的移动，而不是动画。”——Harold Whitaker and John Halas, Timing for Animation

而Easing有足够的能力去影响动画的交流。某一个对象是重要的，但是它到达相应位置的方式可能更重要得多。事实上，Timing for Animation这本书详细地写了这方面的内容。虽然我们不太可能做到把动画绘制成像迪斯尼那样的，但是了解如果控制我们动画的移动还是很重要的。

这个移动传达的是对象什么样的情绪、分量和其它关键性格以及沟通的因素。这些移动或变化的过渡为我们提供了一个很好的激流的机会，尽管它们可能只会停留不到一秒的时间。

根据定义，Easing是速率被分配到整个动画过程中的方式。在CSS中，我们的easing是用animation-timing-function属性处理的。我们有三种定义timing的方式：关键字；自定义三次贝塞尔曲线；steps。steps在这里是奇数的，因为它们有自己独特的概念，所以它实际上并没有做任何的easing。我们将在最后的一部分内容中简要地探讨一下steps。

easing关键字

首先，我们来仔细地看一下预定义的关键字选项，来对幕后发生的事情有更进一步的了解。我们预定义的easing关键字是：ease(默认); linear; ease-in; ease-out和ease-in-out。

如果我们要使用linear Easing创建一个在两个关键帧之间一帧一帧线性移动的小球，它的运动效果如下：

easing关键字

对象以保持相同的速度在两个关键帧之间移动。速度从整个动画的开始到结束都是不变的。这通常会被视为非常机械的不自然的移动，因为在现实生活中，没有东西会像它这样以恒定的速度移动。

如果我们用ease-in创建相同类型的插图：

easing关键字

该移动在一开始的时候比较慢，然后在接近终点的时候慢慢加快速度。在一般情况下，这种easing类型创造了一种蓄势待发的加速感。对象在移动过程中的速度加快可以暗示其重量，还可以加上其他的外力来同它配合。

使用ease-out给了我们相反的感受。动画在一开始的时候速度比较快，然后随着慢慢接近终点，速度越来越慢：

easing关键字

结合ease-in和ease-out的概念，我们得到了ease-in-out，这个值会让对象在中点的时候速度上升到最快，在开始和结束的时候速度较慢。从ease值得到的Easing移动是ease-in-out的变体；ease在结束的时候有一个更剧烈的减速，但是你可以看到它们其实看起来是很相似的。个人而言，我更喜欢ease-in-out，因为在大多数情况下运动比较平衡。

贝塞尔曲线

值得庆幸的是，easing的值我们有不止五个关键字可以选择。在我们希望能够有更多的easing选择的时候，三次贝塞尔曲线来拯救我们了！上面的几个关键字也可以被定义为三次贝塞尔曲线。这些关键字有点像常见贝塞尔曲线的快捷方式。当你需要的控制比上边五个关键字提供的更多的时候，你可以为你的timing函数创建三次贝塞尔曲线，这样easing可选择的值就几乎是无限的！

创建曲线时，我们根据时间来计算动画的进展，然后得到这样的一条代表了动画过程中的速率的曲线。

easing关键字

linear easing关键字对应的贝塞尔曲线

我们不需要去纠结它们背后的所有计算，因为我们的目的不在于此，尽管你对贝塞尔曲线的基础充满好奇心，想要研究它的每个数学方面的细节。理解曲线的关键是：曲线越陡峭代表速度越快，曲线越平坦代表速度越慢。下边这条曲线是ease-in-out关键字对应的贝塞尔曲线。中间是最陡峭，所以移动得最快，最后是平缓的，所以速度变慢了。

easing关键字

ease-in-out关键字对应的贝塞尔曲线

对曲线形状的小调整都会影响导致我们动画的细微差异。每条三次贝塞尔曲线都是通过四个在0和1这个范围之间的值定义的，这四个值用于表达曲线该如何绘制。

cubic-bezier(0.165, 0.840, 0.440, 1.000)

如果是像上边这样写，那它们对我们大多数人是没有意义的，因为根本不明白它们代表的意思。想要让你打破在数学课上使用旧图形计算器的习惯是需要相当一段时间的。幸运的是，我们可以使用一些工具来让这些数字的意义可视化，也更直观，方便我们理解。

创建三次贝塞尔曲线的工具

我最喜欢的三次贝塞尔曲线生成工具是，Matthew Lein 的 Ceaser，提供了各种不同的预设，并允许你拖动点来创建你自己的贝塞尔曲线，还可以预览你创建的easing。当你对生成的东西满意的时候，你就可以复制它动态生成的代码，并把它放在你的CSS中使用。Ceaser还提供了和Penner easing方程（常用于Flash中，现已被移植到JavaScript、CSS等地方使用）等同的CSS。

创建三次贝塞尔曲线的工具

在Ceaser中创建贝塞尔曲线

Ceaser不是唯一可以取得easing信息的地方，Easings.net展示了一些可选的三次贝塞尔曲线的交互版本，以及由此产生的移动都在同一个地方。Lea Verou的也可以让你创建、比较和分享三次贝塞尔函数。动画是一个可视化的东西，所以有这些可视化编辑器和工具来帮助你取得你想要的移动效果是非常好的。这比靠猜数字来想象更有效得多。

现在我们已经对CSS中的easing有了相对深入的了解，你可以通过对你的动画进行微调，做出合适的easing选择，让你得到需要的运动和信息。

如果这里讨论的easing，timing和动画原则激起了你的兴趣，我强烈推荐你阅读一下迪斯尼动画的十二个基础原则，还有Timing for Animation、The Animator’s Survival Kit这两本书。传统动画工艺有非常丰富的历史，值得我们去学习。

Timing函数并不是万能的

经过前面关于timing函数可以做的东西的这么多的介绍，有一个更重要的点是，CSS要如何使用我们定义的timing函数。对于关键帧动画，timing函数是在关键帧之间应用的。在很多情况下，你只能给每个动画指定一个timing函数：

.someClass { animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }

在这种情况下，你的三次贝塞尔函数会在动画中的每个关键帧之间应用。这将决定所有属性之间的移动样式，都会按照你在keyframes中定义的函数运动。

但这并不总是理想的，尤其是那些复杂一些的动画。当你要制作的是比较复杂的运动时，在所有的关键帧之间应用相同的easing，几乎是不可能的。一开始的时候它看起来可能会很奇怪，但是我们可以改变timing函数，将它应用于@keyframes声明块中的中期动画。

@keyframes myAnimation {
    0% { 
        opacity: 0.5; 
    }
    50% {
        opacity: 0.3;
        animation-timing-function: ease-in-out;
    }
    100% { 
        opacity: 1; 
    }
}