简介
@maoosi/shapeshifter 是一款适用于前端开发的 npm 包，它可以帮助开发人员快速、自动化地生成 CSS3 动画效果，帮助开发者在网站建设中节省时间和劳动力。此外，@maoosi/shapeshifter 还提供了大量的动画效果，开发者可以直接使用，同时也可以根据需要进行自定义。
安装使用
安装
可以通过命令行工具执行以下命令将 @maoosi/shapeshifter 安装到项目中。
npm install @maoosi/shapeshifter
使用
使用 @maoosi/shapeshifter 构建 CSS3 动画效果，可以依照以下几个步骤：
- 导入 @maoosi/shapeshifter 包：
import Shapeshifter from '@maoosi/shapeshifter';
- 创建实例，可以通过传递选项来进行配置：
-- -------------------- ---- -------
----- ------------ - --- --------------
-------------- ----------
------------------ -----
------------------------ -----------
----- -
---------- ---------------
----------- ------
--
--- -
---------- -----------------
----------- -------
--
---- 将实例应用到对应的元素：
shapeshifter.applyTo(document.getElementById('my-element'));这样就可以在页面上看到应用了指定动画效果的元素。
Shapeshifter 选项
Shapeshifter 提供了丰富的选项，可以用来定义 CSS3 动画效果的各个参数。下面是一份可选的选项列表：
| 选项名 | 描述 |
|---|---|
animationName |
动画名称 |
animationDuration |
动画持续时间 |
animationFillMode |
动画结束时的动画效果 |
animationIterationCount |
动画重复次数 |
animationTimingFunction |
动画计时函数 |
delay |
动画开始之前延迟的时间，单位为毫秒 |
from |
动画起始状态 |
to |
动画结束状态 |
onComplete |
动画完成后的回调函数，该回调函数接受一个参数，该参数包含动画结束时的元素 |
示例代码
下面是一个示例，演示了如何使用 @maoosi/shapeshifter 创建出从红色到蓝色的闪烁动画。
-- -------------------- ---- -------
------ ------------ ---- -----------------------
----- ------------ - --- --------------
-------------- ----------
------------------ -----
------------------------ -----------
----- -
----------- ------
--
--- -
----------- -------
--
---
------------------------------------------------------------您也可以通过进一步了解 @maoosi/shapeshifter，深入学习如何利用它来进行更加复杂和丰富的动画效果绘制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e0254