在前端开发中，动画效果是一个重要的部分。而如何实现动画效果呢？使用 JavaScript 库是一个非常好的选择。今天我们要介绍的是一个非常优秀的 JavaScript 动画库——easingjs。这个库可以实现各式各样的缓动动画，而且非常的容易使用。
安装 easingjs
easingjs 可以直接通过 npm 安装，只需要在命令行中输入以下命令即可：
npm install easingjs
当然，你也可以手动从 GitHub 上下载源代码。
使用 easingjs
easingjs 的使用非常简单，只需要引入库文件并调用其中的接口就可以了。以下是一个最简单的例子：
-- -------------------- ---- -------
--------- -----
------
------
----------------------
------- -----------------------------------------------
--------
-- -----------
--- --- - -----------------------------
--- -------- - ---- -- ----- - -
--- --------- - ----------
-------- ------ -
--- ---- - ---------- - ---------
--- -------- - ---- - --------
-- --------- -- -- -
-------- - -
-
--- ----- - ------------------------------
-------------- - ----- - --- - ----
-- --------- --- -- -
---------------------------
-
-
---------------------------
---------
-------
------
---- ---------------- ----------------- ------------
-------
-------以上代码会在页面中创建一个包含 "Hello, World!" 的 div ，并使它水平方向来回移动。
在这个例子中，我们首先通过 querySelector 获取了 div 元素。在 loop 函数中，我们使用 Date.now() 获取当前时间，并计算出动画运行的时间比例 progress。接着，我们根据 progress 的值调用 easingjs 提供的缓动函数，计算出当前状态应该有的位置。最后，我们把这个位置设置给 div 元素就可以了。
缓动函数
easingjs 中提供了大量的缓动函数，可以根据不同的需求选择使用。以下是 easingjs 中提供的所有缓动函数：
Linear
线性运动，最简单的缓动方式。直接返回进度值。
Easing.Linear(progress)
Quad
二次方的缓动，加速度越来越快。
Easing.easeInQuad(progress) Easing.easeOutQuad(progress) Easing.easeInOutQuad(progress)
Cubic
三次方的缓动。
Easing.easeInCubic(progress) Easing.easeOutCubic(progress) Easing.easeInOutCubic(progress)
Quart
四次方的缓动。
Easing.easeInQuart(progress) Easing.easeOutQuart(progress) Easing.easeInOutQuart(progress)
Quint
五次方的缓动。
Easing.easeInQuint(progress) Easing.easeOutQuint(progress) Easing.easeInOutQuint(progress)
Sine
正弦曲线的缓动。
Easing.easeInSine(progress) Easing.easeOutSine(progress) Easing.easeInOutSine(progress)
Expo
指数曲线的缓动。
Easing.easeInExpo(progress) Easing.easeOutExpo(progress) Easing.easeInOutExpo(progress)
Circ
圆形曲线的缓动。
Easing.easeInCirc(progress) Easing.easeOutCirc(progress) Easing.easeInOutCirc(progress)
Elastic
弹簧效果的缓动。
Easing.easeInElastic(progress) Easing.easeOutElastic(progress) Easing.easeInOutElastic(progress)
Back
超过终点后再返回的缓动。
Easing.easeInBack(progress) Easing.easeOutBack(progress) Easing.easeInOutBack(progress)
Bounce
跳跃效果的缓动。
Easing.easeInBounce(progress) Easing.easeOutBounce(progress) Easing.easeInOutBounce(progress)
总结
通过上面的介绍，我们可以看到 easingjs 的使用非常方便。只需要引入库文件，并调用提供的接口，就可以实现各种缓动效果。同时，easingjs 中提供的缓动函数也非常丰富，可以满足各种不同的需求。
现在，我们已经掌握了如何使用 easingjs。相信在以后的前端开发中，我们可以更加轻松地实现动画效果了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066dad7108f76aa73ecaae