什么是 Animated-JS
Animated-JS 是一个非常实用的 JavaScript 库，它可以帮助开发者创建各种各样的动画特效。它基于 Web Animations API，以一种易于使用的方式，提供了一套 API 来实现高级的动画效果。
Animated-JS 可以处理非常复杂的动画，包括变形、透明度等各种效果。并且在使用 Animated-JS 时，我们可以非常方便地控制和修改动画的属性和行为。
安装和使用 Animated-JS
首先，打开终端或命令窗口，输入以下命令来安装 Animated-JS：
npm install animated-js
安装完成后可以在代码中引用 Animated-JS 库，如下所示：
import {AnimatedJS} from 'animated-js';Animated-JS 基本用法
初始化
const ele = document.getElementById('box');
const animatedJS = new AnimatedJS(ele);基本动画
// 设置动画，这里是从 0px 到 200px 的水平位移
animatedJS.animate({
transform: 'translateX(200px)'
}, {
duration: 500,
easing: 'ease'
});动画序列
// 动画序列，先将元素左移 200px，再向下移动 100px
animatedJS.sequence([
{transform: 'translateX(-200px)'},
{transform: 'translateY(100px)'}
], {
duration: 500,
easing: 'ease'
});动画循环
// 循环动画，这里是元素不断旋转的动画
animatedJS.loop({
transform: 'rotate(360deg)'
}, {
duration: 1000,
easing: 'linear'
});动画暂停和继续
// 通过下面的代码可以暂停和继续动画 animatedJS.pause(); animatedJS.play();
动画完成回调
-- -------------------- ---- ------- -- -------------- -------------------- ---------- ------------------- -- - --------- ---- ------- ------ -- -- -- - ---------------------- ------------ ---
示例代码
下面是一个使用 Animated-JS 创建形态转换动画的示例代码：
-- -------------------- ---- -------
-------
---- -
------ ------
------- ------
-------------- ----
----------------- ----
--------- ---------
----- ----
---- ----
---------- --------------- ------
-
--------
---- ---------------
--------
------ ------------ ---- --------------
----- --- - -------------------------------
----- ---------- - --- ----------------
--------------------
----------- ------------- -----------
----------- --------------- -----------
----------- --------------- -----------
----------- ---------------- -------------
----------- ---------------- ----------
-- -
--------- -----
------- ------
---
------------------
---------通过以上代码，我们可以看到，Animated-JS 是一个强大易用的 JavaScript 库，它可以帮助我们在 Web 开发中创建漂亮而复杂的动画特效。使用 Animated-JS 可以让我们的页面更加生动和精彩！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005576881e8991b448d4648