TweenJS：补间动画库

TweenJS：让动画变得简单又强大

你有没有想过，如何让网页上的元素动起来，像动画片一样流畅？这就是TweenJS的用武之地啦！TweenJS是一个专门为JavaScript设计的补间动画库，它简单易用，却能创造出复杂的动画效果。它是CreateJS套件的一部分，但不依赖于其他库，当然啦，它默认使用EaselJS的Ticker和Event类。

TweenJS的基本用法

TweenJS的API设计得非常直观，让你可以通过链式命令轻松创建复杂的动画。举个栗子：

    
javascript复制
    
var tween = createjs.Tween.get(myTarget)
    .to({x: 300}, 400)
    .set({label: "hello!"})
    .wait(500)
    .to({alpha: 0, visible: false}, 1000)
    .call(onComplete);

    

这个例子创建了一个新的补间实例，动画步骤如下：

• 目标对象的x属性在400毫秒内变为300，并设置标签为"hello!"。
• 等待500毫秒。
• 目标对象的alpha属性在1秒内变为0，并设置为不可见。
• 调用onComplete函数。

补间的组成部分

补间动画由步骤和动作组成。步骤定义了需要补间的属性，并总是伴随着一个持续时间。步骤是完全确定性的，你可以随意设置补间的位置，属性总是会被设置为相同的值。

动作则没有持续时间，是在步骤之间执行的。它们通过call、set、play和pause方法定义，虽然动作的执行顺序是有保证的，但不一定会在序列中指示的精确时间点执行。

配置选项

创建补间时可以指定一些配置属性，默认情况下这些属性都是false：

• loop：补间到达终点时是否循环。
• useTicks：使用tick而不是毫秒作为持续时间。
• css：启用某些CSS属性的映射。
• ignoreGlobalPause：即使Ticker暂停，补间也会继续。

你还可以在使用Tween.get时指定第三个参数为true，以覆盖目标上的任何活动补间。

    
javascript复制
    
createjs.Tween.get(target, null, true);
// 这将移除目标上的任何现有补间。

    

支持与资源

想要更多的例子和信息？可以访问，查看文档，或者在reddit上与其他用户交流分享项目。如果遇到技术问题，还可以在Stack Overflow上提问。

TweenJS是由gskinner.com开发的，并以MIT许可证免费发布，这意味着你几乎可以将它用于任何目的，包括商业项目。

结语

在我看来，TweenJS就是那种让人一用就停不下来的工具。它让动画变得简单又有趣，不管是小白还是老司机都能轻松驾驭。赶紧试试吧，给你的网站加点动感元素！