简介
buttdancer 是一个 npm 包，它可以帮助前端开发者创建流畅的动画效果。它提供了多种动画效果及其配置选项，包括缓动函数、时间线、旋转、缩放、平移等。
在现代 web 应用程序的开发中，动画已经成为了一个重要的组成部分。但是，动画的复杂性和难以管理性很快变得令人头疼。它们需要大量的代码、抽象性和非直观的设计。
这时候，buttdancer 就能派上大用场，它可以帮助你快速地创建可靠的动画效果，而且操作简单。
安装
在使用 buttdancer 之前，你需要先在项目中安装对应的 npm 包。在终端中输入以下命令即可完成安装：
npm install buttdancer
使用
完成 buttdancer 的安装后，你就可以在你的代码中引入该库，并开始创建自己的动画效果了。首先，我们需要创建一个元素，稍后我们会在上面应用动画。例如：
<div id="my-element">Hello World</div>
接下来我们打开一个新文件，创建一个新的 JavaScript 模块，我们首先需要按照如下方式引入 buttdancer：
import * as bd from 'buttdancer';
接着我们可以通过以下代码给 my-element 元素添加动画：
bd.animate({
el: document.querySelector('#my-element'),
duration: 500,
easing: 'ease-in-out',
delay: 0,
opacity: 1
});以上代码使用但导航菜单为例，其中有几个重要属性：
- el：要应用动画的元素
- duration：动画持续时间（以毫秒为单位）
- easing：动画效果的缓动函数名称
- delay：开始动画前等待的时间（以毫秒为单位）
- opacity：目标动画属性的值
以上代码会使元素淡入，动画时长为 500 毫秒，缓动函数为 ease-in-out，无等待时间。我们刚刚使用的 animate() 方法默认修改了元素的 opacity 属性，但是我们也可以在 animate() 中指定其他的属性。例如：
-- -------------------- ---- -------
------------
--- --------------------------------------
--------- ----
------- --------------
------ --
-------- --
---------- -----------------
------ ---------
---以上代码会使元素逐渐变得透明，并同时对它进行旋转并且颜色变为紫色。
配置选项
除了 animation() 方法外，buttdancer 还有其他的一些功能可以让你管理动画。这些选项包括时间线的控制、多个元素上的动画同时运行等。下面列出了 buttdancer 支持的各种配置选项。
时间线配置
时间线可以让你控制动画的持续时间、延迟时间以及其他一些时间相关的属性。但tdancer 支持以下时间线选项:
- duration：动画持续时间（以毫秒为单位）。默认值为 400 毫秒。
- delay：开始动画前等待的时间（以毫秒为单位）。默认值为 0 毫秒。
- repeat：动画重复次数。可以是任何数字，也可以使用 "infinite" 表示无限循环。默认值为 0。
缓动函数配置
但tdancer 默认提供了以下几种缓动出苕:
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(n,n,n,n) ：自定义贝塞尔函数，其中 n 的值可以是介于 0 和 1 之间的任何数字。
缓动函数是一种控制动画运动轨迹的方法。缓动函数允许你创建更真实的动画，因为它们可能会减缓，加快或反弹。
回调函数配置
回调函数是在动画开始和结束时执行的自定义函数。但tdancer 支持以下回调函数选项：
- begin：动画开始时执行的回调函数。
- progress：动画执行过程中执行的回调函数。
- complete：动画结束时执行的回调函数。
示例代码
下面是一个完整的例子，其中我们创建了一个按钮，当点击时会带动 buttdancer 的动画效果。在这个例子中，我们使用了 buttdancer 的 animate() 方法，以淡入按钮元素。
-- -------------------- ---- -------
--------- -----
------
------
----------------- ------------
-------
------
------- -------------------- -----------
------- ------------------------------------------------------------------------------
--------
----- ------ - -------------------------------------
-- -------- ---------- -------
-------------------------------- -- -- -
--------------------
--- -------
--------- ----
------- --------------
-------- -
---
---
---------
-------
-------在实际应用当中，我们可像以上代码一样使用 import 的方式将 buttdancer 引入我们的项目。这使我们可以更轻松地管理我们的代码，同时避免了在生产环境中加载未压缩的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8eccdc64669dde55c7