最近，有一个 npm 包叫做 animated-wizardry 引起了我的注意。这个 npm 包可以帮助前端开发者在网站中添加令人愉悦的动画效果。这篇文章将讲解如何使用 animated-wizardry 包来实现网站上的动画效果。
安装 animated-wizardry
使用 animated-wizardry 前，需要先安装它。使用以下命令即可在你的项目中安装它：
npm install animated-wizardry --save
这样一来，就能够开始使用它的模块了。
如何使用 animated-wizardry
animated-wizardry 包提供了多种不同类型的动画效果。下面是一个简单例子，它实现了原地旋转特效：
-- -------------------- ---- -------
--------- -----
------
------
--------------- -------- ---------------
-------
------------- -
------ ------
------- ------
----------------- ------
-
--------
-------
------
---- ------------------------
------- ---------------------------------------------------
--------
-- ----------
------------- - -------- -- -
--- --- - ----------------------------------------
-------------------------------------- ------
--
---------
-------
-------在这个例子中，我们定义了一个 100x100 像素的矩形框，并把它保存在一个变量 box 中。在页面加载完成后，我们调用了 animatedWizardry.infiniteRotation 函数，该函数会在 box 元素上应用一个旋转的动画，并且这个旋转的动画会持续 5 秒钟。
其他动画效果
除了 infiniteRotation 函数之外，animated-wizardry 包还提供了一些其他的动画效果。以下是其中的一部分：
逐字出现
这个函数可以将一个字符串元素中的文本内容逐个字/字符地显示出来，实现了打字机（Typewriter）效果。
animatedWizardry.typewriterText(element, duration, delay);
element：待显示的字符串元素duration：动画总时间（毫秒）delay：动画开始前的延迟时间（毫秒）
下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------- -------- ---------------
-------
--------- -
---------- -----
-
--------
-------
------
---- --------------------------------
------- ---------------------------------------------------
--------
-- ----------
------------- - -------- -- -
--- ------- - ------------------------------------
---------------------------------------- ----- -----
--
---------
-------
-------运行后，会有一个文字在 0.5 秒的延迟后逐字出现在文本框中，并且这个动画会持续 2 秒钟。
循环切换
这个函数可以将一个数组中的元素逐个显示出来，循环切换。
animatedWizardry.cyclingText(element, texts, duration, delay);
element：待显示的字符串元素texts：待切换的文本数组duration：动画总时间（毫秒）delay：动画开始前的延迟时间（毫秒）
下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------- -------- ---------------
-------
--------- -
---------- -----
-
--------
-------
------
---- --------------------
------- ---------------------------------------------------
--------
-- ----------
------------- - -------- -- -
--- ------- - ------------------------------------
--- ----- - ----------- ---------- -----------
------------------------------------- ------ ----- ------
--
---------
-------
-------在这个例子中，我们定义了一个字符串数组 texts，然后使用 cyclingText 函数将其循环显示在一个文本框中。动画总时间为 6 秒钟，开始前有 1 秒钟的延迟。
总结
animated-wizardry 是一个非常有用的 npm 包，可以帮助前端开发者快速为网站添加令人愉悦的动画效果。不仅如此，这个 npm 包还提供了多种不同的动画效果，可以帮助开发者更加灵活地应用动画效果在页面中。
我希望通过本文讲解使读者能够更好的理解 animated-wizardry 包的使用方法，并在实际开发中获得更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d281e8991b448e01df