在前端开发中，经常需要实现动画效果来提升用户交互体验。tweenjs 是一款帮助我们实现动画效果的 JavaScript 库，它可以让我们轻松地创建复杂的动画效果，而不需要编写大量重复的代码。
安装 tweenjs
在使用 tweenjs 之前，我们需要先安装它。tweenjs 可以通过 npm 包管理器进行安装，打开终端并运行以下命令：
npm install createjs-tweenjs
使用 tweenjs
创建 tween 对象
要使用 tweenjs 创建动画效果，我们需要先创建一个 tween 对象。tween 对象可以通过 createjs.Tween.get() 方法来创建，例如：
const target = document.querySelector('.my-element');
createjs.Tween.get(target)
.to({ x: 100, y: 200 }, 1000)
.call(() => console.log('Animation complete!'));上面的代码将创建一个 tween 对象，并且对 .my-element 元素应用了一个从当前位置移动到 { x: 100, y: 200 } 的动画效果，在 1000 毫秒内完成。当动画完成时，会调用回调函数并输出一条消息。
添加 tween 动画
创建 tween 对象后，我们还需要将它添加到舞台(stage)中才能显示出来。要将 tween 对象添加到舞台中，可以使用 createjs.Ticker 对象来驱动 tween 对象的更新。例如：
-- -------------------- ---- ------- ----- ----- - --- ---------------------------- ----- ------ - --- ----------------- -------------------------------------------------- -- ---- ----------------------- ---------------------------------------- -- -- - ------------------------ --------------- ---
上面的代码创建了一个圆形，将它添加到舞台中，并且启动了 createjs.Ticker 对象来更新 tween 对象。
缓动函数
tweenjs 还提供了多种缓动函数来实现不同的动画效果。可以通过传递缓动函数名称作为 tween 对象的第三个参数来使用缓动函数。例如：
createjs.Tween.get(target)
.to({ x: 100 }, 1000, createjs.Ease.bounceOut);上面的代码将应用一个反弹(bounce)缓动函数，让元素向右移动 100 像素。
循环动画
如果要循环执行 tween 动画，可以使用 loop 方法。例如：
createjs.Tween.get(target, { loop: true })
.to({ x: 100 }, 1000);上面的代码将无限循环执行 tween 动画，让元素向右移动 100 像素。
总结
在本文中，我们介绍了如何使用 tweenjs 库来创建动画效果。我们学习了如何创建 tween 对象、如何添加 tween 动画、如何使用缓动函数和如何循环动画。通过掌握这些技巧，我们可以更加轻松地实现复杂的动画效果，提升用户交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34053