在前端开发中，我们经常需要动画效果来提升用户体验。为了方便开发者使用，npm 上有很多优秀的动画库。其中一个非常优秀的动画库就是 animation-bus。
animation-bus 是一个基于 JavaScript 的动画库，它使用一个总线来控制所有的动画效果。它可以帮助开发者简化动画代码，提高代码的可维护性。
安装和使用
安装 animation-bus 很简单，只需要在命令行中执行如下命令即可：
npm install --save animation-bus
完成安装后，在 JavaScript 代码中引入 animaiton-bus：
import AnimationBus from 'animation-bus';
然后，你就可以使用 AnimationBus 对象来创建动画效果了。
动画效果的创建
动画的创建仅需几个简单的步骤。
创建动画对象
首先，需要创建一个动画对象。创建方法如下：
-- -------------------- ---- -------
----- --------- - ---------------------
--------- ----- -- ------------
------- ---------------- -- -----------
--------- ------------------ ---------- -
-- ---------
--
----------- ------------------- -
-- ----------
-
---其中，duration 是动画的持续时间，单位为毫秒。easing 是缓动函数，可选值有 'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint'。
onUpdate 和 onComplete 都是回调函数。onUpdate 会在动画更新时被调用，它接受两个参数：progress 和 animation。progress 表示动画的进度（0 到 1 之间），animation 表示当前的动画对象。onComplete 会在动画结束时被调用，它也接受一个 animation 参数。
启动动画
动画对象创建好后，还需要启动动画。启动动画非常简单，只需要调用 start 方法即可：
animation.start();
暂停和恢复动画
在动画执行过程中，有时可能需要暂停或恢复动画。这可以通过 pause 和 resume 方法实现：
animation.pause(); // 暂停动画 animation.resume(); // 恢复动画
取消动画
如果需要取消动画，可以调用 cancel 方法：
animation.cancel(); // 取消动画
示例代码
下面是一个简单的动画效果示例：一个蓝色正方形从左到右移动。
-- -------------------- ---- -------
-- ------
----- --------- - ---------------------
--------- -----
------- ----------------
--------- ------------------ ---------- -
----- - - -------- - ---- -- --------
----------------- - - - ----- -- --------
--
----------- ------------------- -
---------------------- ------------
-
---
-- ----
------------------
-- ----
---- ----------- ---------------- --------- ------ ----- ------- ----- ----------------- ----- ----- ----------通过以上操作，你就可以在你的网页中使用 animation-bus 创建美丽的动画效果了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f68198b6099112f39633425