在前端开发中，我们经常需要使用各种 npm 包来辅助我们完成任务。而在动画方面，9anime 是一个非常实用的 npm 包，能够帮助我们在网页中制作出良好的动画效果。本篇文章将为大家详细介绍 9anime 的使用方法，并分享一些示例代码供大家参考。
什么是 9anime
9anime 是一个用于创建、安排和协调动画序列的 JavaScript 库。它由 Nicolas Bonduel 开发，以满足前端开发人员对动画的需求。9anime 可以轻松地与现有代码进行集成，可以使用 JavaScript、React 或 Vue.js 等常见前端框架与其一起工作。
安装 9anime
使用 npm 可以轻松地安装 9anime，并使用它来开发 Web 应用程序。
npm install 9anime
9anime 的基础使用
使用 9anime 可以很容易地创建动画效果，甚至可以在一个简单的 HTML 文件中使用它来制作基本的动画效果，在这个例子中，我们将创建一个单个方块的动画。
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
-------
------
---- -------- ------------------- ------------- -----------------------------
------- ------------------------------------------------------------------
--------
----- --- - -------------------------------
----- --------- - -------
-------- ----
----------- ----
------- --------
---------------- -------
--------- ----
---
---------
-------
-------在这个例子中，我们首先创建了一个用于动画的 div 元素，并将其赋予了一个 id。然后，我们通过一个简短的 JavaScript 代码集成了 9anime 库，并将其应用到我们创建的 div 元素中。在这个案例中，我们使用 .querySelector() 方法来选中了我们的 div 元素，并使用 anime() 函数来定义我们的动画效果。注意，在这里，我们使用了一些属性来定义动画的持续时间、将元素移动到右侧并旋转它。
9anime 动画效果的属性
在 9anime 中，我们可以使用各种属性来定义动画的效果。下面是一些常用的属性的列表。
targets
指定要执行动画的元素。此属性可以接受一个 DOM 元素，也可以是一个 CSS 选择器。
const animation = anime({
targets: '#myElement',
width: '50%'
});translateY、translateX、translateZ
定义元素在上下、左右和前后方向上的相对移动量。
const animation = anime({
targets: '#myElement',
translateY: '50px',
translateX: '50px',
translateZ: '50px'
});rotate
定义元素绕着自身旋转的度数。
const animation = anime({
targets: '#myElement',
rotate: '180deg'
});scale
定义元素的缩放比例。
const animation = anime({
targets: '#myElement',
scale: 2
});backgroundColor
定义元素的背景颜色。
const animation = anime({
targets: '#myElement',
backgroundColor: '#BBB'
});opacity
定义元素的不透明度。
const animation = anime({
targets: '#myElement',
opacity: 0.5
});9anime 的进阶使用
在这个例子中，我们将创建一个更复杂的动画来向大家介绍 9anime 的进阶使用方法。
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
-------
------
------- ----------- ------------ ----------------- ----- -----------------
------- ------------------------------------------------------------------
--------
----- ------ - ---------------------------------
----- ------- - ------------------------
----- ------- - ------------ - --
----- ------- - ------------- - ---
----- ------ - ---
----- ---- - -
-- --------
-- ------- - -------
------- -------
------ -------
--
----- --- - -
-- --------
-- ------- - -------
------- -------
------ --------
--
-------- ---------- -
--------------------
------------------- ------- ------------ -- ------- - -- -------
----------------- - -----------
---------------
--------------------
-
-------- --------- -
--------------------
------------------ ------ ----------- -- ------- - -- -------
----------------- - ----------
---------------
--------------------
-
-------- ------------- -
-------
-------- -----
-- ------- - -------
--------- -----
------- ---------
--------- -----
---------- ------------
----- -----
------- -- -- -
-----------
--
--------- -- -- -
-
---
-
-------- ------------ -
-------
-------- ----
-- ------- - -------
--------- -----
------- ---------
--------- -----
---------- ------------
----- -----
------- -- -- -
----------
--
--------- -- -- -
-
---
-
-----------
--------------
----------
-------------
---------
-------
-------在这个例子中，我们首先创建一个 500 x 500 的画布，然后定义了两个圆：白色的月亮和黄色的太阳。之后，我们定义了两个函数来绘制这两个圆的效果。为了让这两个圆形象地显示出动画效果，我们使用了 9anime 库来定义两个动画：一个让月亮向下移动，另一个让太阳向上移动。
在定义动画时，我们使用了与之前相同的 targets 和 duration 属性。此外，我们还定义了 easung、endDelay、direction 和 loop 属性来定义动画的持续时间、延迟时间、方向和循环时间。
总结
通过这篇文章，我们了解了 9anime 的基础使用和进阶技巧，学会了如何使用 9anime 完成一些简单和复杂的动画效果。这些技能将大有裨益，并有助于我们提高前端开发的效率和工作质量。同时，不断学习和实践更多的 npm 包，也将为我们的工作和职业生涯提供更多机会和挑战。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/108660