1. 简介
strange-motion 是一款基于 JavaScript 的动画库，能够方便快捷地实现复杂的动画效果。它适用于各类 Web 项目，包括桌面浏览器、移动设备以及框架（React、Vue 等）等。
该库支持各种动画形式，包括 transition、animation、keyframes 等，并支持动画链式调用。strange-motion 库可用于实现复杂的 Web 动画需求。
2. 安装
npm 安装命令为：
npm install strange-motion --save
也可以直接在项目根目录引入该库的 CDN 文件：
<script src="https://unpkg.com/strange-motion"></script>
3. 使用方法
3.1 基本用法
该库的主要方法为 transition，该方法拥有四个参数：element（要添加动画的元素）、properties（要更改的属性，可以是 CSS 属性或 JS 对象）、options（动画设置选项，如持续时间、延迟、触发方式等，可选）、callback（动画结束后执行的回调函数，可选）。
-- -------------------- ---- ------- ------ - ---------- - ---- ----------------- ----- ------ - ---------------------------------- -- --------- ----- ---------- - - -------- -- ----------- --- ----------- -- -- -- ------ ----- ------- - - --------- ---- -- ---- ------ -- -- ---- ------- ------------- -- ---- -- ------- -- ------------------ ----------- -------- -- -- - -- ---------- ---
3.2 动画链式调用
strange-motion 支持动画的链式调用，即多个动画按照一定的次序依次执行。可通过 then 方法将一个动画的结束事件绑定到下一个动画中。
-- -------------------- ---- -------
------ - ---------- - ---- -----------------
----- ------ - ----------------------------------
----- ----------- - -
-------- -
--
----- -------- - -
--------- ----
------ --
------- -------------
--
----- ----------- - -
----------- ---
----------- --
--
----- -------- - -
--------- ----
------ --
------- -------------
--
------------------ ------------ ---------
-------- -- -
------ ------------------ ------------ ----------
--
-------- -- -
-------------------------
---3.3 复杂动画示例
以下示例展示了如何使用 strange-motion 库创建更为复杂的动画效果。
-- -------------------- ---- -------
------ - ---------- - ---- -----------------
----- ------ - ----------------------------------
------------------ -
-------- --
----------- ---
-- -
--------- --
------ -
--
-------- -- -
------ ------------------ -
-------- --
----------- -
-- -
--------- ----
------ --
------- -------------
---
--
-------- -- -
------ ------------------ -
-------- --
----------- --
-- -
--------- ----
------ ----
------- -------------
---
--
-------- -- -
------ ------------------ -
-------- --
----------- --
-- -
--------- ----
------ ----
------- -------------
---
--
-------- -- -
-----------------------
---4. 总结
strange-motion 是一款优秀的动画库，可在 Web 项目中轻松实现各种动画效果。其简洁明了的 API 使得动画开发效率大大提高，值得广大前端开发者使用。
该库支持链式调用，为开发提供了便捷的方式，协助开发者创建复杂的、连续的动画组合。
使用 strange-motion 库，开发者可缩减开发所需时间，快速完成动画效果的开发，加速 Web 应用程序的发布进程，提供更优质的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d081e8991b448e48ec