在前端开发中，经常需要对数据进行动画效果的处理。tween-array是一个轻量级的npm包，提供了补间算法（tweening）来实现平滑的过渡效果，可以用于处理数值型数组的动画。
安装
使用npm安装tween-array：
--- ------- ----------- ------
使用方法
引入tween-array模块：
----- ---------- - -----------------------
然后根据需要创建对象：
--- ------- - --- -------------- --- ---- - --------- ---- ---
以上代码会创建一个从 [0, 10, 20] 开始，持续时间为 1000ms（1秒）的tween对象。你可以通过改变其属性来改变 tween 对象的行为，例如：
from：起始值，默认为数组第一个元素；to：结束值，默认为数组最后一个元素；duration：持续时间，默认为1000ms；delay：延迟时间，默认为0；repeat：重复次数，默认为0；easing：缓动函数，默认为线性缓动函数。
你也可以在创建对象之后通过 setOptions() 方法来改变其属性：
-------------------- ------- --------------- ---
注意：如果要使用 easing 属性，需要先安装 eases 包。
事件
tween-array 提供了以下事件：
start：tween 开始时触发；update：每个帧更新时触发；complete：tween 结束时触发。
你可以通过 .on() 方法来监听这些事件：
-------------------- -------- ------- - ------------------- ---
以上代码会在 tween 每次更新时打印当前值。
示例代码
----- ---------- - ----------------------- --- ------- - --- -------------- --- ---- - --------- ---- --- -------------------- ------- --------------- --- -------------------- -------- ------- - ------------------- --- ----------------
以上代码会创建一个从 [0, 10, 20] 开始，持续时间为 1000ms，使用缓动函数 easeInOutQuad 的 tween 对象，并在每次更新时打印当前值。最后调用 start() 方法启动 tween。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/48265