转载

[译]Easing (ease 舒适、缓解) / Path (path 路径) Easing

这篇文章是关于精确计时函数控制的 path easing 函数。

demo on CodePen
demo's repo on GitHub
mo·js on GitHub

Easing (或称计时函数) 就像蜜汁，让我们的运动看起来自然且令人愉悦。线性运动看起来很不自然，因为我们的物质世界中没有线性运动。

Using a term (term 术语) like nonlinear (nonlinear 非线性) science is like referring to the bulk of zoology as the study of non-elephant animals. -- Stanislaw Ulam

等间动画 ( 即 linear easing) 显得愚蠢，或者让我们的大脑带着怀疑响应。相比之下，出色的制作 easing 吸引用户的注意，并引发他们的好奇心，从而吸引他们。那就是为什么接受全控制 easing 函数如此重要。

幸运的是在现代网络中 mo·js 拥有最全面的 easing 可用函数集合。此外，你会在其他网络动画库中发现， mo·js 拥有超精密的 easing 函数类型 -- path easing。它允许你绘制自己的计时方法。That's what this tutorial is dedicated to, hang tight!

First things first

看一下下面这个例子，一个我们需要在 easing 函数精确控制的情况。起点是一个简单的下降方块：

<!--html-->   <div class="square" id="js-square"></div>

/*css*/ body, html {     padding: 0; }  body {     background: rgba(241, 226, 215, 0.2); }  .square {   width:      50px;   height:     50px;   background: #F64040;   position:   absolute;   top:        10px;   left:       50%;   margin-left: -25px;   margin-top:  -25px; }

//js var square = document.querySelector('#js-square');  new mojs.Tween({     repeat:   999,   delay:    2000,   onUpdate: function (progress) {     square.style.transform = 'translateY(' + 200*progress + 'px)';   } }).run();

Note: No vendor prefixes are used in the code above for clarity's sake but some browsers still do need them.

我们通过 mojs.Tween 类创造了一个 tween (tween 非离子活性剂)（line 2）。在每一帧更新时，我们用 tween 的进度（范围0-1）乘以 200，并将结果设置在我们的 square 对象（line 1）的当前 translateY 属性上（line 6）。

结果我们在这里拥有了一个单调的运动，看起来真的一点也不像有东西在掉落。因此让我们加入 bounce (bounce 弹跳) easing。

译者注: html、css 保持不变

var square = document.querySelector('#js-square');   new mojs.Tween({     repeat:   999,   delay:    2000,   onUpdate: function (progress) {     var bounceProgress = mojs.easing.bounce.out(progress);     square.style.transform = 'translateY(' + 200*bounceProgress + 'px)';   } }).run();

The bounce easing was added by passing the linear progress through a bounce.out function (line 6) that is available on mojs.easing object - the place where all easing functions and helpers are stored. The outcome is pretty obvious - you've probably seen it before - we have something that kind of looks like a falling object with it’s own physics, despite the fact that it doesn't obey any physics laws. It's behavior is hardcoded into this graph:

译者注: 本段不易理解，建议阅读原文

译者注: 此处缺少原文动画

If you think about it, this common bounce easing graph represents composition of an object's parameters like the material it is made of or it's weight or acceleration. Savvy readers starting to grasp the main issue of this widespread easing function - you are unable to change individual properties on demand, so it is quite limited.

译者注: 本段不易理解，建议阅读原文

What if we want to change the weight parameter of our object so it will have much wider bouncing amplitude range? That’s the point where the path easing become irreplaceable. Lets jump to a vector graphics editor with this common graph as a bootstrap.

译者注: 本段不易理解，建议阅读原文

Note: Any vector editor will do here, I prefer to use Sketch lately, but any that can produce a SVG path works.

我们将增强弹跳曲线一点，让我们的运动感觉它属于一个较轻的对象（或更弹性的一个 -- 由橡胶制作而不是木头）。这就是看起来像的弹性图：

译者注: 此处缺少原文动画

Note: This path easing is used in the final demo (with small tweaks), particularly when the white cube bounces on the floor.

这里是我这弹性图的 .svg 文件。现在我们可以通过这个 SVG path 生成我们自定义 easing 函数。来，从 d attribute 复制 Path 的源码，然后放在 mojs.easing.path 函数中（line 2），然后你将获得一个新生成的 easing 方法返回：

译者注: html、css 保持不变

var square = document.querySelector('#js-square');   var bouncyEasing = mojs.easing.path('M0,100 C6.50461245,96.8525391 12.6278439,88.3497543 16.6678547,0 C16.6678547,-1.79459817 31.6478577,115.871587 44.1008572,0 C44.1008572,-0.762447191 54.8688736,57.613472 63.0182497,0 C63.0182497,-0.96434046 70.1500549,29.0348701 76.4643231,0 C76.4643231,0 81.9085007,16.5050125 85.8902733,0 C85.8902733,-0.762447191 89.4362183,8.93311024 92.132216,0 C92.132216,-0.156767385 95.0157166,4.59766248 96.918051,0 C96.918051,-0.156767385 98.7040751,1.93815588 100,0');  new mojs.Tween({     repeat:   999,   delay:    2000,   duration: 1500,   onUpdate: function (progress) {     var bounceProgress = bouncyEasing(progress);     square.style.transform = 'translateY(' + 200*bounceProgress + 'px)';   } }).run();

耶！我们已经绘制了我们自定义的 path easing -- 现在我们的方块感觉更加有弹性了！

你可以真正的照着 Path easing 绘制你的 easing 函数。

译者注：未完待续...