简介
tinymation 是一个基于 JavaScript 的动画库，它的体积非常小（仅有 2KB），但功能强大，支持多种类型动画的制作。在前端开发中，我们经常需要使用动画效果来提升用户体验，tinymation 在这方面很有价值。
安装
使用 npm 进行安装：
npm install tinymation --save
使用方法
在你的项目中引入 tinymation：
import { tinymation } from 'tinymation';或者：
const { tinymation } = require('tinymation');创建动画
使用 tinymation.create 方法可以创建一个动画实例：
-- -------------------- ---- -------
----- ----------- - -------------------
--------- ----- -- ----------
----------- --------- -- ------------- ------
------- --------- -- --------- ------------------------------- -
--------- - -- ------
---------------------- --------
--
-------------------- - -- -------
---------------------- --------- --------------
--
------------ - -- ------
---------------------- -----------
-
---在上面的示例中，我们定义了一个名为 myAnimation 的动画实例，设置了动画时长为 1000 毫秒，重复次数为无限次，缓动函数为线性，同时定义了开始、进行中以及结束时的回调函数。
添加动画属性
使用 myAnimation.add 方法可以为动画实例添加属性：
-- -------------------- ---- -------
-----------------
------- -------------------------------------- -- ----
--------- ---------- -- - ------- ----------
--- -- -- ---------
------ -- -- ------------
--------- ---- -- ----------
------- ------------ -- --------- ------------------------------- -
--------- - -- ------
--------------------- --------- --------
--
-------------------- - -- -------
--------------------- --------- --------- --------------
--
------------ - -- ------
--------------------- --------- -----------
-
---在上面的示例中，我们为 myAnimation 动画实例添加了一个目标元素为 .my-element 的 opacity 属性动画，该动画的属性值从当前值渐变到 0，延迟时间为 0 毫秒，时长为 500 毫秒，缓动函数为 easeInOut，同时为开始、进行中以及结束时的回调函数做了相应的定义。
同时添加多个属性
使用 myAnimation.adds 方法可以为动画实例一次性添加多个属性：
-- -------------------- ---- -------
------------------
-
------- --------------------------------------
--------- ----------
--- --
------ --
--------- ----
------- -----------
--
-
------- --------------------------------------
--------- ------------
--- ----------------
------ -----
--------- -----
------- -----------
-
---在上面的示例中，我们为 myAnimation 动画实例一次性添加了两个属性动画：opacity 和 transform。注意，在添加多个属性时，它们的动画时长和缓动函数需要保持一致，否则可能会出现不协调的情况。
开始动画
使用 myAnimation.start 方法可以开始执行动画：
myAnimation.start();
暂停动画
使用 myAnimation.pause 方法可以暂停动画，调用该方法后动画会暂停在当前进度处：
myAnimation.pause();
恢复动画
使用 myAnimation.resume 方法可以恢复动画，调用该方法后动画会从上次暂停的进度处继续播放：
myAnimation.resume();
停止动画
使用 myAnimation.stop 方法可以停止动画，调用该方法后动画会立即停止并重置到最初状态：
myAnimation.stop();
示例代码
下面是一个简单的动画示例代码，使用 tinymation 实现元素位移和背景颜色渐变动画：
-- -------------------- ---- -------
------ - ---------- - ---- -------------
----- ----------- - -------------------
--------- -----
----------- ---------
------- --------
---
----- ------- - --------------------------------------
------------------
-
------- --------
--------- ------------
--- --------------------
--------- ----
------- -----------
--
-
------- --------
--------- -------------------
--- ----------
--------- -----
------- -----------
-
---
--------------------上面的代码中，动画时长为 1000 毫秒，重复次数为无限次，缓动函数为线性。同时我们为 myAnimation 动画实例添加了两个属性动画，分别是元素的 transform 属性和 background-color 属性。接着调用 myAnimation.start 方法开始播放动画。
结语
tinymation 是一个简单易用、体积小巧但功能强大的动画库，它可以让前端开发者快速实现各种动画效果。本文简要介绍了 tinymation 的使用方法，以及提供了示例代码供读者参考。在实际应用中，我们可以根据具体需求灵活使用 tinymation，并结合其他前端技术形成更加完善的动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563cc81e8991b448e127f