1. 什么是 uon.anim？
uon.anim 是一个针对前端动画设计的 npm 包，它帮助你设计出更多样化、更生动的动画效果，在页面的互动体验上起到了至关重要的作用。
2. 使用步骤
2.1 安装
npm i uon.anim -S
2.2 引用
在需要的文件中引用：
import { UonAnim } from 'uon.anim'2.3 创建实例
-- -------------------- ---- -------
--- ---- - --- ---------
------- --------------------------------
--------- ----- -- ----
------- -
-------- --- ---
-- ---
--
------- --------- -- ----
------- -------- --- -
--------------- -- ---
--
----------- -------- -- -
--------------------------
--
---2.4 动画属性
- target：动画对象。
- duration：指定动画时长，单位为毫秒。
- values：列出所有需要动画的CSS属性。
- easing：指定缓动函数。
- onTick：动画进展的回调函数。
- onComplete：动画结束后的回调函数。
2.5 缓动函数
在结束之前添加弹性、缓慢动作、平滑等效果。
- linear：匀速动画。m
- ease：固定时间曲线。s
- ease-in：加速曲线，慢出。e
- ease-out：加速曲线，慢入。e
- ease-in-out：加速曲线，中间放缓。e
- bezier：自定义贝塞尔曲线。c
2.6 回调函数
- onTick：在从一帧到下一帧的时候调用，可选参数格式如下：function(tickPercentage) {}。
- onComplete：在动画完成时调用，可选参数格式如下：function() {}。
3. 示例代码
下面是一个简单的示例代码，使用 uon.anim 实现了一个简单的交互效果：
-- -------------------- ---- -------
------ - ------- - ---- ----------
--- ---- - --- ---------
------- --------------------------------
--------- -----
------- -
--------- --- -----
-------- ----- ---
--
------- --------------
----------- -------- -- -
---------------------- -- -----------
--
---
--------------------------------------------------------- -------- -- -
-------------
---这段代码让带有 .demo 类名的元素向右旋转并且逐渐变得不透明，动画过程持续时长为 2 秒，并使用了 ease-in-out 缓动函数。在动画完成时，将会在控制台输出 Animation is finished。
4. 指导意义
使用 uon.anim 可以为你的网站、应用带来更好更生动的动画效果，但是需要注意的是：过多的动画效果会导致页面缓慢，不利于用户体验。因此建议在使用 uon.anim 的同时，好好权衡一下需要使用多少个动画效果。
同时，建议在项目代码中深入使用 uon.anim，了解各个参数的含义和使用方式，事半功倍。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609381e8991b448dec73