在现代web开发中，动画成为非常重要的一部分，它给用户带来了更加流畅、有趣的体验。为了方便开发者快速实现复杂的动画效果，开源社区中提供了众多的动画库和插件，其中一个非常好用的npm包是nuke-animated。
Nuke-animated简介
Nuke-animated是一款基于CSS动画和JavaScript的动画库，它提供了多种动画效果，可以在Web应用程序中创建各种美观而又富有创意的动画，兼容各种浏览器。
安装
在安装前先确认你已经安装了Node.js和npm，如果没有可以前往Node.js官网下载安装。
在终端输入以下命令进行安装：
npm install nuke-animated --save
使用 --save 选项将其添加到项目的依赖项中。
Demo
让我们来实现一个简单的动画效果，首先，可以在html文档中加入一个按钮：
<button id="btn">Click Me</button>
然后在JavaScript文件中引入 Nuke-animated 库：
import NukeAnimated from 'nuke-animated';
接着在按钮点击事件的监听器里面触发动画效果：
-- -------------------- ---- -------
-------------------------------------------------------- -- -- -
----- ----------- - --- ---------------
----------------------- -
--------- -----
------- --------------
------ --
---------- -
- ---------- --------------- --
- ---------- ------------------- --
- ---------- -------------------- --
- ---------- --------------- -
--
---
---上述代码中，我们先实例化了一个 NukeAnimated 对象，然后在指定元素上运行动画。在 keyframes 中，我们定义了动画效果的关键帧状态，动画开始、中间和结束可以对关键帧进行定义。
这个动画会让元素向右移动100像素，然后向左移动100像素，再回到原始状态。整个动画持续时间为1秒钟，平滑过渡。
自定义动画效果
我们也可以自定义动画效果，让它看起来更加独特。我们可以通过下面的代码来自定义一个较复杂的动画:
-- -------------------- ---- -------
----- ----------- - --- ---------------
----------------------- -
--------- -----
------- --------------
------ --
---------- -
---------- ------------ ------------- ------------
-------- --- ---- --
--
---上述代码中，动画将使元素分别进行缩放和淡入淡出。duration属性指定动画效果持续时间为2秒钟，easing属性用于指定动画速度曲线，delay属性指定动画效果的延迟时间。
keyframes 属性定义动画的效果状态。我们可以像上边那样处理单个属性，也可以让元素进行多个属性的变换。本例中，我们将元素缩放从1到1.5，再从1.5回到1；同时，让元素进行不透明度的渐变，提高到0.5然后再从0.5回到1。
总结
Nuke-animated 是一个基于CSS动画和JavaScript的动画库，它可以让您方便地使用动画效果，减少繁琐的手动CSS编码。无论您是网站开发人员还是应用程序开发人员，Nuke-animated都是值得一试的工具。希望这篇文章能够帮助您更好地使用 Nuke-animated。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f923d1de16d83a66b61