说到在网页里创建动画,你可能很快会想到jQuery的animate()
方法,或者css3的animation
和transition
。现在,本文将介绍另一个web动画的可选方案,GSAP。
GSAP的全名是GreenSock Animation Platform,这个名字是有些怪异(官网还在各种安利你加入它的Club),但它的确是一个从flash时代一直发展到今天的专业动画库。
组成简介
在官网选择Download zip就可以拿到GSAP源码,解压后可以看到有这些文件:
这里的TweenLite.js
、TweenMax.js
、TimelineLite.js
和TimelineMax.js
4个文件就是GSAP的一般引用库文件,不过,这几个文件还有一些重叠和包含的关系,如下图:
因此,如果想要简单地引入GSAP的主体功能,使用TweenMax.js
这一个文件即可(请看前一张图中反映出的这个文件的大小)。而如果要争取更小的库文件大小,应该使用TweenLite.js
(必需)+ 其他文件的组合。
这4个文件分别包含了什么东西呢?
TweenLite
是GSAP的主体核心,它用于创建基本动画,是其他各类模块的基础。一般都会搭配plugins/CSSPlugin
以实现DOM元素的动画(也就是我们最熟悉的动画了)。TimelineLite
是一个叫做时间轴的动画容器,它用于对多个动画进行有序的组织与控制。TimeLineMax
是TimelineLite
的升级版,在TimelineLite
的基础之上,可以有更高级的组织与控制。TweenMax
是GSAP集合包,除前面3个之外,还包括plugins
里的常用插件以及easing
里的缓动函数补充。
GSAP在Customize里是这样描述自己拥有的模块的:
默认勾选的TweenLite
+ css plugin
是最简单的应用组合,本文就先从它们开始(v1.18.4)。
TweenLite的基本动画
值动画
一切动画,都从值的变化开始。
TweenLite作为主体核心,做的就是这件事。TweenLite具体如何使用呢?请看下面这个例子:
var obj = {
myProp: 0
};
TweenLite.to(obj, 0.2, {
myProp: 1,
onUpdate: function() {
console.log("[update] obj.myProp = ", obj.myProp);
}
});
TweenLite.to(target, duration, vars)
是TweenLite最常用的方法,target
指定动画元素,duration
指定动画持续时间,vars
指定动画的目标值。请注意,这里并没有操作任何DOM元素,所以和我们一般写的动画不太一样。运行一下: