GSAP - 专业的 Web 动画库

说到在网页里创建动画，你可能很快会想到jQuery的animate()方法，或者css3的animation和transition。现在，本文将介绍另一个web动画的可选方案，GSAP。

GSAP的全名是GreenSock Animation Platform，这个名字是有些怪异（官网还在各种安利你加入它的Club），但它的确是一个从flash时代一直发展到今天的专业动画库。

组成简介

在官网选择Download zip就可以拿到GSAP源码，解压后可以看到有这些文件：

这里的TweenLite.js、TweenMax.js、TimelineLite.js和TimelineMax.js4个文件就是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元素，所以和我们一般写的动画不太一样。运行一下：