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