介绍
@enjoylife/animation-bus 是一个用于在前端展现动画效果的 npm 包。它提供了一个简单的方式来管理或者控制多个动画元素。这个库的设计灵感来源于本薄弱的 mobx 能力，并演化为一个更加结构化的库。它支持多种常见的动画效果实现，如 slide、fade、zoom 等等。本文将为您介绍这个库的具体用法及实现方式，让您可以快速的在项目中使用。
安装
您可以通过 npm 来安装这个库：
npm install @enjoylife/animation-bus
使用
使用 @enjoylife/animation-bus之前，需要在您的项目中引用它。通过以下方式，您可以将它引用到您的项目中：
import AnimationBus from '@enjoylife/animation-bus';
然后，您需要创建一个 AnimationBus 对象。这个对象是用来管理动画元素的，通过它您可以添加、删除、管理多个动画元素：
const animationBus = new AnimationBus();
现在，您可以往这个对象中添加需要管理的动画元素了。例如，我们现在要添加一个 slide 效果的动画：
animationBus.addAnimate({
id: 'slide1',
effect: 'slide',
element: document.querySelector('#slide1'),
time: 300,
distance: 100,
direction: 'right',
});在上面的代码中，我们指定了这个动画的 id 是 slide1，效果是 slide，元素是 slide1 的 DOM 节点，动画持续时间是 300ms，滑动距离为 100px，滑动方向是向右边。
接下来，我们可以调用 animationBus.start() 方法来开始播放动画：
animationBus.start('slide1');以上就是一个简单的 slide 滑动动画。通过类似的方式，您可以添加多个不同的动画效果，并通过 animationBus 对象来管理它们。
实现
下面让我们来看一下 @enjoylife/animation-bus 的实现方式。这个库基于 mobx 以及 E6 class 来设计。库提供了一个 Animation 类，这个类是用来表示一个动画元素的。每个 Animation 实例都包含了相应的属性和方法来管理这个动画。
该库还提供了一个 AnimationBus 类，这个类是用来管理多个动画的。您可以通过它来添加、删除、控制多个动画的播放。
总结
在这篇文章中，我们为您介绍了 @enjoylife/animation-bus 库的使用方式及实现方式。通过这个库，您可以快速轻松的实现多种动画效果，让您的前端项目更加生动、有趣。如果您有改进的建议或者对这个库的实现方式有疑问，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005598081e8991b448d7108