TweenJS:补间动画库
TweenJS是一个简单但功能强大的JavaScript补间动画库,是CreateJS套件的一部分,支持数值对象属性和CSS样式属性的补间。

介绍
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就是那种让人一用就停不下来的工具。它让动画变得简单又有趣,不管是小白还是老司机都能轻松驾驭。赶紧试试吧,给你的网站加点动感元素!