译~GreenSock动画平台(GSAP)的JavaScript版本入门

快速连结： 引言 载入文件 基本的补间动画 特殊屬性 缓动 插件 补间动画的CSS属性 控制补间动画 用T​​imelineLite排序和分组补间 学习TweenMax和TimelineMax 覆盖其他补间动画 常见问题 开始玩转 如果您还没有玩过的话，请看看玩转GSAP JS-它直观地演示了API的基本知识，并让您能快速上手。互动式幻灯片使它很容易(或者说......"很有趣！")。之后，如果您仍然渴望更多，那就转回到这里，因为本页面更详细。开始玩转是开始学习的最佳场所。 原文链接：http://greensock.com/get-started-js 引言 用代码做动画可能看起来令人生畏，但不要担心- GreenSock动画平台(GSAP)的设计，使其简单而直观。此平台还有高性能和前所未有的灵活性。您会很庆兴有学过之。现在，我们将重点放在让您上手和运用核心引擎"TweenLite"。然后如果当您希望运用其他的工具(如TweenMax，TimelineLite，TimelineMax等)，我们将讨论之。如果您已经使用过Flash平台的版本，您应该发现语法是相同的(虽然如此，您一定要读CSSPlugin ，并查看下面常见问题部分)。 到底什么是GSAP? GreenSock动画平台是一套脚本动画工具。它包括： TweenLite ：处理几乎任何物件的任何属性的动画引擎核心。相对轻量级，但功能齐全，可以选择要使用的插件扩展(像是在浏览器中用于使DOM元素样式成为动画的CSSPlugin，或是滚动到页面上特定位置或div的ScrollToPlugin等) TweenMax ：TweenLite强大的大哥;可以完成Twe​​enLite做的每一件事，并附加非必要的功能，如repeat(重复)，yoyo(溜溜球)，repeatDelay(重复延迟)等。它也包括许多常见的插件，如CSSPlugin，这样您就不需自行载入多个文件。侧重于全功能的，而不是轻量级的。 TimelineLite ：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。您甚至可以无层数限置的在其他timelines里面嵌套timelines。这使您可以很简单的模组化动画工作流。 TimelineMax ：扩展TimelineLite，提供完全相同的功能再加上有用的(但非必需)功能，如repeat、repeatDelay、yoyo、currentLabel()等。同样就如TweenMax和TweenLite的关系，TimelineMax的目标是成为最终的全功能工具，而不是轻量级的。 其他像是缓动工具、插件、工具包如Draggable(可拖动)等

载入GSAP文件

查看下载页面，您可以下载内含精缩和未压缩的zip文件，或者把CDN连结贴到您的网页。获得一大堆文件的最简单方法是连结到最新的TweenMax的CDN文件。

[HTML]  纯文本查看  复制代码

?

1	< script src = "http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" > </ script >

由于TweenMax包括TweenLite、CSSPlugin、EasePack、TimelineLite、TimelineMax、RoundPropsPlugin、BezierPlugin、AttrPlugin和DirectionalRotationPlugin，所以只要用这一个文件就给您一大堆可以玩的物品，而且CDN有助于快速载入。但是，如果您更关心文件的大小，可以挑选要载入的核心部份和插件(常见的选择是轻量级的TweenLite、CSSPlugin和EasePack)。例如：

[HTML]  纯文本查看  复制代码

?

1 2 3

< script src = "http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js" > </ script > < script src = "http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js" > </ script > < script src = "http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js" > </ script >

请注意这是连结文件的"最新"版本，这意味着随着新版本出现，您可以自动获得这些更新。通常这是一件好事，特别是当bug被发现和解决时，但要注意，有可能更新会改变行为(无论是因为无心的引擎代码更新或是故意的改变功能或API改变)，所以您可以在CDN连结到特定版本(如1.9.0)，如果您想要(详见下载页面)。不要担心-我们对于做出可能影响原有代码的改变是非常谨慎的。注册GreenSock帐户来加入邮件列表，并获得有关可能影响代码的重要更新通知。

当然您也不需要使用CDN的连结。如果您是下载zip ，可以到"src"文件夹，会看到"minified(精缩)"和"uncompressed(未压缩)"文件夹中的所有源代码-请自行放到您的伺服器或本地文件系统。您通常会希望使用精缩的文件进行部署，因为它们载入速度较快，但在功能上未压缩和精缩版本是完全相同的。包含"未压缩"文件是以防万一您要一窥源码，看看里面发生了什么事(其包含注解和更适合人类读的代码)。您也可以看看我们的Github存储库 。

如果您不需要动画DOM元素样式，您就不需要CSSPlugin。例如您可以只用非常轻量的TweenLite，使canvas上的EaselJS物件或SVG的RaphaelJS物件动起来。如果您并不需要特别缓动方程式只需基本的(Power0、Power1、Power2、Power3、Power4、Linear、Quad、Cubic、Quart、Quint和Strong这些都包含在TweenLite文件中)，那您可以略过EasePack，其增加了Elastic、SlowMo、Bounce、SteppedEase、Sine、Circ和Expo。

在任何的动画代码之前不要忘了载入Javascript文件。(否则当浏览器获取到您的动画代码时，不会知道什么是"TweenMax"或"TweenLite"，因为它还没有载入)。

我们强烈建议保持您的GSAP文件进行更新 ，因为我们正在积极增强功能，解决浏览器的bug或矛盾，常来逛逛本站并获得最新文件。

想要找jQuery插件?

GSAP没有依存于jQuery，但如果您已经习惯了的jQuery.animate()方法，或者您现有的项目大量使用jQuery，且您更愿意得到GSAP引擎的速度优势，那么 jquery.gsap 插件是您的最佳选择，其附加所有的额外可补间属性，如3D transforms、colors、boxShadow等。jquery.gsap插件基本上模仿正规jQuery.animate()方法，并用GSAP驱动动画。我们建议您最终转移到正规GSAP工具或API，而非jquery.gsap插件，因为您可以用物件导向的本质得到更多的灵活性和力量，不过jQuery插件是添加GSAP到您的jQuery项目的不费吹灰之力方式。详见此获取有关此插件的详细讯息 。

基本的补间动画 TweenLite可以补间任何Javascript物件的任何数字属性，而不仅仅是特定物件原有的属性。例如，我们可以创建一个普通物件，并指定一个任意的属性，然后使其2秒内从0补间到100，像这样： [JavaScript]  纯文本查看  复制代码 ? 1 2 var obj = {myProp:0}; TweenLite.to(OBJ，2，{myProp：100}); 填入tween的第一个参数是目标(您想补间属性的物件)，第二是持续时间(通常以秒计)，最后是有着要被补间的一个或多个属性和结束值的物件。比方说，您有一个id为"photo"的<img>，您想于1.5秒的过程补间其"width"属性值到100。您可以使用TweenLite的to()方法： [JavaScript]  纯文本查看  复制代码 ? 1 2 var photo = document.getElementById( "photo" ); //或使用 jQuery的$("#photo") TweenLite.to(photo, 1.5, {width:100}); 由于这是一个to()补间，不论开始补间时是多少，"width"属性都会补间到100。如果您想同时补间"height"属性为200时，您可以这样做： [JavaScript]  纯文本查看  复制代码 ? 1 TweenLite.to(photo, 1.5, {width:100, height:200}); 补间属性的数量没有限制。并且顺序不重要。请注意上面我们使用document.getElementById()获得"photo"元素，使我们可以补间它。如果您可以只传递字串给TweenLite/Max，并让TweenLite/Max帮您找到元素，那岂不是很好?当然很好。在1.8.0版本，GSAP把字串目标作为选择器文本并将其送入您所选择的选择器引擎。它会先寻找window.$，然后window.jQuery，如果都找不到，它会预设为document.getElementById()(在这种情况下，它也将去掉任何ID的任何前缀"#")。自行使用任何您想要的选择器： jQuery、Zepto、Sizzle或您自己的。这样设置：  [JavaScript]  纯文本查看  复制代码 ? 1 TweenLite.selector = YOUR_SELECTOR_ENGINE; 如果载入jQuery(或被定义为业界标准的任何window.$ )，您不需要做任何事情-GSAP会自动感应和使用的。但GSAP不依存于jQuery或任何特定的选择器引擎。 [JavaScript]  纯文本查看  复制代码 ? 1 2 3 4 5 //补间ID为"myID"的元素 TweenLite.to( "#myID" , 2, {backgroundColor: "#ff0000" , width: "50%" , top: "100px" , ease:Power2.easeInOut});   //或者是载入jQuery，您可以做更高级的选择，如选择所有类为"myClass"的元素，像这样： TweenLite.to( ".myClass" , 2, {boxShadow: "0px 0px 20px red" , color: "#FC0" }); 定义目标为选择器文本的字串是一个简单方便的-它完全是可选的。无论如何最终目标必须是一个物件，这样您就可以如上方定义之。可以传递一个jQuery物件或阵列或一个HTML元素或一个普通物件作为目标。有一个很有用的方法from()，可以让您完全相反，定义初始值和补间到目前值。这很容易使东西动画到目前状态。例如： [JavaScript]  纯文本查看  复制代码 ? 1 2 //不管目前的scaleX和scaleY是多少，都从0开始动画到目前的scaleX和scaleY TweenLite.from(photo, 1.5, {scaleX:0, scaleY:0}); 还有一个fromTo()方法，它允许您定义起始值和结束值： [JavaScript]  纯文本查看  复制代码 ? 1 2 //补间宽度0到100，高度0到200 TweenLite.fromTo(photo, 1.5, {width:0, height:0}, {width:100, height:200}); 如果您喜欢更物件导向的方法或想用变量存储补间的引用，以便之后可以控制补间(例如， pause()、resume()、reverse()、restart()您可以创建一个这样的补间动画(这样同于to()补间)： [JavaScript]  纯文本查看  复制代码 ? 1 var myTween = new TweenLite(photo, 1.5, {width:100, height:200}); 预设情况下，会立刻播放所有的补间，但是您可以经由在参数传递paused:true或在实例呼叫pause()来一开始就暂停之。 [JavaScript]  纯文本查看  复制代码 ? 1 2 3 4 5 //一开始就暂停 var myTween = TweenLite.to(photo, 1.5, {width:100, paused: true });   //之后继续 myTween.resume();

特殊属性

特殊属性是保留的关键字，TweenLite识别和处理不同于一般属性。其中一个例子是"delay"，它允许您通过一定的秒数延迟补间动画的开始时间。

[JavaScript]  纯文本查看  复制代码

?

1 2	//开始前等待2秒("delay"属性会被TweenLite识为一个特殊的属性) TweenLite.to(photo, 1.5, {width:100, delay:2});

TweenLite识别几个非常有用的特殊性质，如 onComplete 、 ease 、 overwrite 、 pause 、 useFrames 、 immediateRender 、 onStart 、 onUpdate 、 onCompleteParams 等。欲知详情请阅读完整的 说明文件 。最常见的两种特殊属性是"ease"和"onComplete"。稍后我们将谈论"ease"，onComplete使您可以在补间动画完成时调用一个函数(通常被称为"callback(回调)")，易于创建一连串的动作。下面是一个延迟0.5秒启动的补间，并且当它完成时调用函数myFunction()：

[JavaScript]  纯文本查看  复制代码

?

1 2 3 4 5

//注意onComplete后的函数没有"()"，因为它只是一个函数本身引用(您还不需要调用之) TweenLite.to(photo, 1.5, {width:100, delay:0.5, onComplete:myFunction});      function myFunction() {          console.log( "tween finished" ); }

缓动

"ease"改变了补间过程的变化比率。使动作本质上有不同的"感觉"。有许多选择，而且了解各种选择的最好方法就是试试看。下面是一个互动的工具 ，允许您选择缓动和持续时间，然后单击"开始"按钮，看所选缓动对于上方绿色方块滑过萤幕时的动画会如何。 (译者注：帖子无法运行html和javascirpt，所以请至 Greensock 观看)

TweenLite预设ease是Power1.easeOut (相较于线性ease，其感觉更为自然)。下方是几个补间动画的缓动定义语法：

[JavaScript]  纯文本查看  复制代码

?

1 2	TweenLite.to(photo, 1, {width:100, ease:Power2.easeOut}); TweenLite.to(photo, 1, {height:200, ease:Elastic.easeOut});

如果您想用字串定义ease也可以，无论是普通格式如"Elastic.easeOut"或是反向无点语法(jQuery风格)，如"easeOutElastic"。

[JavaScript]  纯文本查看  复制代码

?

1 2	TweenLite.to(photo, 1, {width:100, ease: "Elastic.easeOut" }); TweenLite.to(photo, 1, {height:200, ease: "easeOutElastic" });

要直线运动，只需使用Linear.easeNone缓动。坦白说，最有用的ease是Power eases、Back.easeOut、Elastic.easeOut、SlowMo.ease、Bounce.easeOut以及有时会用到的Linear.easeNone 。其余的都是预留代码，它们看起来和Power eases没有什么不同。Power eases都放到TweenLite核心，如此一来可以加快性能。

插件

把插件想成动态添加到TweenLite的特殊属性，使其有额外的能力。这样可以确保核心引擎小型、高效又允许几乎无限的动态添加能力。每个插件关联一个属性名称，其负责处理该属性。例如，CSSPlugin关联"CSS"属性名称，所以如果载入它，它会拦截"css"属性又如ScrollToPlugin将截取"scrollTo"值等：

[JavaScript]  纯文本查看  复制代码

?

1 2 3 4 5

//CSSPlugin将截取"CSS"的值... TweenLite.to(photo, 1, {css:{scaleX:0.5, rotation:30}, ease:Power3.easeOut});   //ScrollToPlugin将截取"scrollTo"值(如果它有被载入的话)... TweenLite.to(window, 2, {scrollTo:{y:300}, ease:Bounce.easeOut});

通常，CSS的特定属性需要被包在自己的物件并传入，如TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}});以便引擎知道这些属性应该由CSSPlugin处理，但由于在浏览器中动画DOM元素是如此普遍，TweenLite和TweenMax(1.8.0版本)会自动检查目标是否为一个DOM元素，如果是(且您还没有在参数定义"CSS"物件)，当第一次渲染补间时，引擎会创建CSS物件并转移任何未保留的属性(如onComplete、ease、delay等，或类似的插件关键字scrollTo、raphael、easel等)成为CSS物件。有轻微的性能损失(几乎察觉不到，除非您同时补间 很多 元素)，但在大多数情况下，这样的方便是值得的。在下面的代码范例中，我们将使用更简洁的风格，省略了css:{}物件，但要知道任何风格都是可以接受的。

[JavaScript]  纯文本查看  复制代码

?

1 2 3

//在1.8.0版，以下两行会产生相同的结果，但是第一个实例稍快。虽然第二个比较方便写。 TweenLite.to(element, 1, {css:{top: "20px" , backgroundColor: "#FF0000" }, ease:Power2.easeOut}); TweenLite.to(element, 1, {top: "20px" , backgroundColor: "#FF0000" , ease:Power2.easeOut});

不要忘记，您需要载入插件的Javascript文件，以确保可以运作。为方便起见，主要的插件，如CSSPlugin、RoundPropsPlugin和BezierPlugin都包括在TweenMax Javascript文件的 内部  。

补间动画的CSS属性

在CSSPlugin的帮助下，GSAP几乎可以动画任何DOM元素的CSS相关属性，包括width、heihgt、margin、padding、top、left和更多复杂的属性，如transform(rotation、scaleX、scaleY、skewX、skewY、X、Y、rotationX和rotationY)、color、backgroundPosition、opacity以及更多的属性。载入CSSPlugin js文件来启用这些功能。

注意：一个常见的错误是忘记使用驼峰式大小写法，所以不是"font-size"，您应该使用"fontSize"。 "background-color"将是"的backgroundColor"。

您甚至可以定义非一般的可补间属性，GSAP将为您应用属性(例如position:"absolute"或borderStyle:"solid")。适用于定义一个计量单位(如"24px"而不是"24"或者"50%"而不是"50")，但在大多数情况下预设是像素(px)，这样您就可以省略单位。即使计量单位不符合目前的，GSAP会尝试将变形它们。因此，举例来说，您可以补间宽​​度从"50%"到"200px"。

CSSPlugin甚至可以动画复杂的值，如boxShadow:"0px 0px 20px 20px red"和borderRadius:"50% 50%"和border:"5px solid rgb(0,255,0)"必要时，它试图找出需要提供前缀的属性，并相应地应用它。可能CSSPlugin还不能处理一小部分复杂的或出血的CSS属性，但绝大多数的都良好运作。

此外CSSPlugin识别几乎所有标准的CSS属性和一些特殊的属性，这相当方便：

• 2D变形像是rotation、scaleX、scaleY、scale、skewX、skewY、x和y-CSSPlugin最方便的功能之一就是极大地简化在不同浏览器使用变形，包括IE6！ 无需麻烦的使用各种浏览器前缀和在IE中使用时髦的矩阵过滤器。您可以直观地设置变形属性。
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2	//简单多了 TweenLite.to(element, 2, {rotation:30, scaleX:0.8});

  预设情况下rotation、skewX、skewY使用度度，但您也可以使用弧度。只需附加标准后缀("rad"或"deg")，例如：
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2	//用"deg"或"rad" TweenLite.to(element, 2, {rotation: "1.25rad" , skewX: "30deg" });

  简单来讲，这就如设置元素的css transform:rotate(1.25rad) skewX(30deg)以及所有其他浏览器前缀值和IE过滤器。
  关于2D变形的注意事项：
  
  • 最好以"absolute"设置元素的位置，以避免剪裁(多为旧版本的IE浏览器)。
  • 可以用"scale"同时控制"scaleX"和"scaleY"性质。
  • 声明的变形属性的顺序没有差别。
  • TweenLite无关在浏览器中元素的呈现品质。有些浏览器似乎呈现精美的转化元素而另一些不处理抗锯齿等。
    
• 3D变形 ：除了所有普通2D属性(x、y、scaleX、scaleY、scale、rotation、skewX、skewY)几乎运作于所有的浏览器，您也可以动画3D属性例如rotationX、rotationY、rotationZ(等同于常规的"rotation")、z、perspective和transformPerspective于大多数常见浏览器(详见http://caniuse.com/transforms3d了解有关3D变形的浏览器支持的详细讯息)。再次说明，不须使用浏览器的前缀;CSSPlugin在背后为您处理了这一切。您可以直观的同时动画3D变形属性和2D属性(除了skew)：
  [JavaScript]  纯文本查看  复制代码

  ?

  1	TweenLite.to(element, 2, {rotationX:45, scaleX:0.8, z:-300});

  在这篇文章中看看一些3D变形和CSS3属性动画的互动例子例如boxShadow、textShadow、borderRadius和clip。其演示了透视原理。为了让您的元素看起来有一个真正的3D视觉透视角度，您必须设置父元素的"perspective"属性或设置元素本身的特殊的属性"transformPerspective"(常见值的范围从200到1000，数字越低透视变形越强)。"transformPerspective"就像是直接加入一个perspective()到CSS"transform"样式里面，如： transform:perspective(500px) rotateX(45deg)，这样只适用于特定的元素，如果想要一组元素共享常见的角度(同一消失点)，应该对这些元素的父或容器设置常规的"perspective"属性。有关视角的详细讯息，请参阅此文章 。
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2 3 4 5 6 7 8

  //应用角度到父元素(容器)，使角度应用到所有子元素(通常这样是最好的) TweenLite.set(container, {perspective:500});   //或设置用于3D补间动画的每个单独元素的预设视角： CSSPlugin.defaultTransformPerspective = 500;   //或者使用"transformPerspective"应用视角到单一元素 TweenLite.set(element, {transformPerspective:500});

  在常规的CSS您列出的变形顺序有关系，但GSAP始终把它们用于相同的一致性的顺序：scale，然后rotation(同rotationZ)，然后rotationY，然后rotationX，然后translation(x、y、z)。如果您想在3D空间中绕一个点旋转元素，可以使用transformOrigin属性(见下文)。
• [JavaScript]  纯文本查看  复制代码

  ?

  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

  //CSS范例： .myClass {      transform: scale(1.5, 1.5) rotateY(45deg) translate3d(10px, 0px,-200px) }   //对应的GSAP变形(补间2秒)： TweenLite.to(element, 2, {scale:1.5, rotationY:45, x:10, y:0, z:-200});   //使用perspective()的CSS范例： .myClass {      transform: perspective(500px) rotate(120deg) translateY(50px) }   //对应的GSAP变形(设定而已，没有补间)： TweenLite.set(element, {transformPerspective:500, rotation:120, y:50});

  关于3D变形的注意事项：
  
  • 在不支持3D变形的浏览器，它们将被忽略。例如，可能rotationX无法正常运作，但旋转却可以运作。详见http://caniuse.com/transforms3d的图表，看看哪些浏览器版本支持3D变形。
  • 所有的变形都会记住，所以可以不用担心会失去补间动画的各个属性。不需要在每个补间定义所有的变形属性-只要定义想要动画的那些。
  • TweenLite无关在浏览器中元素的呈现品质。有些浏览器似乎呈现精美的变形元素而另一些不处理抗锯齿等。
  • 要了解更多关于CSS 3D变形，看看这篇文章
    
• transformOrigin-设置所有变形发生的原点。预设情况下会在元素的中心("50% 50%")。您可以使用关键字"top"、"left"，"right"或"bottom"定义值，也可以使用百分比(右下角是"100% 100%")或像素。如果您想要一个物件旋转围绕其左上角可以这样做：
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2	//沿着元素的左上角旋转 TweenLite.to(element, 2, {rotation:360, transformOrigin: "left top" });

  在引号中的第一个值是指x轴和第二是指y轴(可以选择添加第三个值，用以定义3D空间中的点)，因此要使物件变形围绕恰好在离左边50像素和顶部边缘20像素，您可以这样做：
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2	//沿着离左上角50像素和20像素的点旋转和缩放 TweenLite.to(element, 2, {rotation:270, scale:0.5, transformOrigin: "50px 20px" });

•  directionalRotation - 可以特定的方向旋转，可以是顺时针方向("_cw"后缀)或是逆时针 ("_ccw"后缀)或在最短的方向上("_short"后缀)在这种情况下，插件选择的方向会根据最短路径。例如，如果目前元素旋转了170度，想补间到-170度，正常旋转补间会以逆时针方向转340度，但如果使用了"_short"后缀，会以顺时针方向转20度来代替。范例:
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2 3 4

  TweenLite.to(element, 2, {rotation: "-170_short" });   //甚至可以用于3D旋转： TweenLite.to(element, 2, {rotation: "-170_short" , rotationX: "-=30_cw" , rotationY: "1.5rad_ccw" });

  之前的1.9.0版本，directionalRotation被称为shortRotation，只处理最短的方向。新directionalRotation功能更加灵活和易于使用(只要在一般属性加上后缀)。为了向后兼容，CSSPlugin仍然可辨认"shortRotation"，但它已被弃用。
• autoAlpha-同于"opacity"属性，除了当值变为"0"时，"visibility"属性将被设为"hidden"，以提高浏览器的渲染性能和防止点击或互动目标。当值不为0时，"visibility"将被设为"visible"。范例:
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2 3 4 5

  //淡出并设置visibility:hidden TweenLite.to(element, 2, {autoAlpha:0});   //在2秒内，淡出且visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2});

• className-可以使元素的类改变。例如目前myElement的类是"class1"，您想要改变为"class2"和造成动画上的区别，您可以这样做：
  [JavaScript]  纯文本查看  复制代码

  ?

  1	TweenLite.to(myElement, 1, {className: "class2" });

  如果您想将类添加到现有的，您可以简单地使用"+="前缀。要删除一个类，使用"-="前缀，例如：
  
  [JavaScript]  纯文本查看  复制代码

  ?

  1	TweenLite.to(myElement, 1, {className: "+=class2" });

  注：有几个CSS相关的属性不会补间如IE的过滤器，但这是一个非常罕见的例外。此外，使用类名时，因为引擎需要遍历所有的CSS属性来分析哪些是不同，这样会有轻微的速度损失。
• autoRound-预设情况下，CSSPlugin会在补间时把(中间值)的像素值和zIndex取整为最接近的整数，因为这样可以提高浏览器的性能，但如果您想禁止这种行为，可以传递autoRound:false到CSS物件。您仍然可以使用RoundPropsPlugin来手动定义想要取整的属性。

控制补间动画

大多数其他的动画工具提供了非常有限的控制，但GSAP是从底层向上构建的，是一个专业级强大的动画工具。您可以轻易的pause()、resume()、reverse()、restart()、seek()，或者甚至改变任何补间的时间刻度。事实上，您可以补间其他补间的时间刻度逐渐变慢或加快。然而要控制补间，您需要有实例。to()、from()、和fromTo()方法都返回一个实例，这样您就可以如下一样容易转储到一个变量：

[JavaScript]  纯文本查看  复制代码

?

1 2 3 4 5

//使用静态to()方法... var tween = TweenLite.to(element, 1, {width: "50%" });   //或使用物件导向的语法... var tween = new TweenLite(element, 1, {width: "50%" });

然后，您可以调用它的任何方法：

[JavaScript]  纯文本查看  复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

//暂停 tween.pause();   //恢复(方向-反转或不反转) tween.resume();   //反转(总是回到初始值) tween.reverse();   //跳转到恰好0.5秒 tween.seek(0.5);   //补间半速 tween.timeScale(0.5);   //补间双速 tween.timeScale(2);   //立即删除补间，并使其符合垃圾收集 tween.kill();

您也可以删除特定元素或目标的所有补间动画，像这样：

[JavaScript]  纯文本查看  复制代码

?

1	TweenLite.killTweensOf(myElement);

查看完整的 文件 了解有关所有属性和方法的详细讯息。

学习TweenMax和TimelineMax

档案小、出色的性能和相对强大的功能集是在TweenLite和TimelineLite的优先考量，不过也有一些没有膨大核心组件的添加额外功能。进入TweenMax和TimelineMax。 TweenMax延伸自TweenLite，做TweenLite所做的一切，且加入额外的功能像是repeat、yoyo、repeatDelay等。TimelineMax跟TimelineLite做一样的事情。另外当您载入TweenMax Javascript文件时，会包括一些额外自动载入的功能，如CSSPlugin、RoundPropsPlugin、BezierPlugin、AttrPlugin、DirectionalRotationPlugin、TimelineLite、TimelineMax和EasePack。基本上如果文件的大小是您主要关切的问题，那就坚持使用TweenLite并手动载入任何用到的插件或减少您的需求。不然就使用TweenMax因为它用最小的设置提供最大的功能。

TweenMax使用了和TweenLite完全相同的语法。事实上，一个TweenMax实例是 TweenLite实例。如果您有一个项目已经使用了TweenLite，您可以用"TweenMax"取代所有的"TweenLite"实例而且会良好运作。TweenMax只是多识别了一些额外的特殊属性，例如：

[JavaScript]  纯文本查看  复制代码

?

1 2 3 4 5

//重复此补间3次(共4次)，并在每个重复之间等待0.5秒 TweenMax.to(element, 1, {width: "50%" , repeat:3, repeatDelay:0.5});   //无限次淡入淡出(repeat为-1表示无限次) TweenMax.to(element, 1, {opacity:0, repeat:-1, yoyo: true });

TimelineMax提供了repeat、yoyo和repeatDelay以及方便的方法，如tweenTo()、currentLabel()、getLabelBefore()和getLabelAfter()等。

[JavaScript]  纯文本查看  复制代码

?

1 2 3 4 5

var tl = new TimelineMax({repeat:3, yoyo: true , repeatDelay:1, onComplete:timelineDone, onCompleteParams:[ "test1" , "test2" ]}); tl.staggerTo([e1, e2, e3], 1, {opacity:0, rotation:360}, 0.2); function timelineDone(p1, p2) {      console.log( "timeline done. params: " + p1 + " and " + p2); }

覆盖其他补间动画 一个经常被忽视的方面是补间如何(是否可以、何时)覆盖同一物件的其他补间动画。例如，假设您有一个按钮有着onmouseover和onmouseout处理程序，补间是"over"事件时不透明度较高；"out"事件时不透明度较低。更复杂的是"over"补间持续2秒，"out"补间持续1秒。如果用户快速的滑进滑出会发生什么事?看到问题了吗?如果补间无覆盖的运行，补间将建立并互相打架(一个试图把不透明度补间升高，而另一个降低不透明度)。在这个例子中，当用户滑进时，2秒补间就会开始增加不透明度为1，但如果用户在0.2秒后滑出，另一个补间将开始导致不透明度下降。当补间1秒后结束，"over"补间仍在继续(因为它有2秒的持续时间)，所以不透明度会突然增加，并且就算用户滑出了不透明度还是维持在1！ 不要担心。我们了解您的想法。 预设情况下，每当一个TweenLite实例(任何延迟后)第一次渲染，会分析相同目标的其他活化补间，并检查个别的重叠属性。如果发现任何重叠，就会(再次)删除违规的重叠，只会删除个别的属性。这种覆盖模式称为"auto" ，它通常是最直观的。不过可能有时候您希望新补间删除同一个物件的所有其他补间动画，无论其开始时间或重叠性。那是就要用"all"覆盖模式。而且为了完全略过覆盖，您可以定义覆盖模式为"none" 。还有一些其他的方式也可供选择，所以请查看完整的文件。用"overwrite"特殊属性定义覆盖模式，例如： [JavaScript]  纯文本查看  复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 //立即覆盖myElement的所有补间 TweenLite.to(myElement, 1, {width: "50%" , overwrite: "all" });   //不会覆盖任何东西(允许冲突) TweenLite.to(myElement, 1, {width: "50%" , overwrite: "none" });   //只覆盖myElement个别属性的目前补间(这是预设的，所以通常在这种情况下不需要指定任何覆盖) TweenLite.to(myElement, 1, {width: "50%" , overwrite: "auto" });   //设置预设覆盖模式为"all"而不是"auto" TweenLite.defaultOverwrite = "all" ; 当然您也可以用TweenLite.killTweensOf()方法手动终止特定物件的所有补间，但定义覆盖模式的好处是必要才会起作用(当补间第一次渲染时)，尤其当序列复杂时这更显的重要。

常见问题解答

• 我可以使用jQueryGreenSock工具吗?
  绝对可以！事实上我们很鼓励。 jQuery适用于选择DOM元素、添加事件处理程序以及其它更多功能。GSAP把jQuery物件视为阵列，这样您就可以传递单一jQuery物件作为补间动画的目标而且TweenLite/Max将补间所有元素。例如：
  [JavaScript]  纯文本查看  复制代码

  ?

  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

  //淡出所有类为"myClass"的元素[/size] TweenLite.to( ".myClass" , 1, {opacity:0});   //补间ID为"myElement"的元素的宽度到500px TweenLite.to( "#myElement" , 1, {width: "500px" , ease:Elastic.easeOut});   //补间类为"myClass"的所有物件的"marginTop"为交错的方式，使它们从100px跑近来 var tl = new TimelineLite();tl.staggerFrom( ".myClass" , 1, {marginTop: "-=100px" , opacity:0}, 0.1);   //或使用jQueryeach()方法来遍历结果，并错开淡出 $( ".myClass" ).each( function (index, element) {      TweenLite.to( element, 1, {autoAlpha:0, delay:index * 0.2}); });   //添加使用$的点击处理函数来表示选单元素被点击并且把高补间成100px $( "#menu" ).click(       function (){                  TweenLite.to( $( this ), 0.7, { height: "100px" , ease:Power2.easeInOut } );       } );

  当然您需要载入jQuery到您的HTML文件以使用它。TweenLite没有依赖于任何第三方工具如jQuery，因此这完全是可选的。
• 哪些浏览器可以运作GSAP的Javascript版本?
  GSAP本身是纯Javascript，并且应该几乎运作于所有的浏览器。CSSPlugin补间动画的CSS相关的值和兼容性是基于您使用的补间属性。GSAP的目的不是为了解决所有的浏览器不兼容，但它确实神奇的实现重要功能像是opacity、变形(rotation、scaleX、scaleY、skewX、skewY、x和y)和transformOrigin所以这些应该运作于所有主流浏览器甚至IE6。 Firefox不支持backgroundPositionX或backgroundPositionY ，因此那两个特殊的属性不会运作，但backgroundPosition几乎运作于所有的浏览器。没有预定可补间CSS属性的列表-本平台将尝试补间任何传递的属性。如果是数字，就会补间。如果不是数字而且也不是一个可识别的特殊属性，CSSPlugin只会将属性设置为您提供的值(没有补间)。因此举例来说如果您试图补间display:"inline" ，这不是一个补间属性，但它仍然会在补间期间设置，所以可以随意使用。
• Javascript文件多大?
  这里是精缩的gzip压缩的文件大小：
  
  • TweenLite(包括标准eases)：7KB(没有gzip的是22KB)
  • CSSPlugin：11KB(没有gzip的是28KB)
  • RoundPropsPlugin：0.5KB(无gzip的是1KB)
  • BezierPlugin：3.6kb(无gzip的是7.8kb)
  • EasePack：约1.2kb(无gzip的是3.6kb)
  • TimelineLite：2.8kb(无gzip的是8.8kb)
  • TimelineMax(包括TimelineLite)：4.4kb(无gzip的是15.6kb)
  • TweenMax(包括上述所有的)：28KB(没有gzip的是86KB)
    
• 如何定义补间的相对值?
  只需添加一个"+="或"-="前缀的值。例如：
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2 3 4 5

  //让myElement的宽度增加100px TweenLite.to(myElement, 1, {width: "+=100px" });   //使myElement的旋转少30度 TweenLite.to(myElement, 1, {rotation: "-=30deg" });

• 是否CSSPlugin解决所有的浏览器不一致或更改CSS属性在浏览器中呈现的方式?
  它不可能解决所有矛盾，但它确实解决了很多矛盾而且修补各种浏览器的bug。例如，它利用IE的滤镜和一些奇特的数学，使2D变形工作可运作于旧版本的IE(包括transformOrigin)，再加上不透明度运作于所有的主要浏览器(再次在旧版本的IE使用过滤器)。修补包括Safari的3D transformOrigin bug和Firefox的闪烁3D变形问题和iOS的requestAnimationFrame不一致等。
• 可以用一个补间，补间多个物件吗?
  当然可以，只要传递一个物件阵列作为补间的目标，就如这样：
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2	//同时补间多个物件 TweenLite.to([e1, e2, e3], 1, {autoAlpha:0});

• 变数参数的顺序有差吗?没差。
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2 3

  //下面产生相同的结果(属性的顺序并不重要) TweenLite.to(element, 1, {width: "50%" , height: "300px" , ease:Power2.easeOut}); TweenLite.to(element, 1, {height: "300px" , width: "50%" , ease:Power2.easeOut});TweenLite.to(element, 1, {ease:Power2.easeOut, width: "50%" , height: "300px" });

• 我可以使用GSAP到画布物件或第三方工具如EaselJS?GSAP只能用于动画DOM元素吗?
  您可以动画任何 Javascript物件的任何数字属性-而不只是DOM元素。所以您可以动画画布物件、EaselJS资产和几乎任何Javascript相关的东西。事实上GSAP有专门的EaselPlugin使其更容易补间EaselJS物件。如果您需要在每次刷新后运行逻辑(如重绘在画布上的东西)，无论是在个别补间或时间轴上使用onUpdate或添加一个"tick"事件侦听器到驱动整个平台的核心Ticker。
• 是否TweenLite/max使用CSS3 transition提供了更好的性能(有GPU的帮助)?
  CSS3 transition有一些显著的局限性，使它们肩负不起沈重的动画平台。它们没有提供时间或缓动的精确控制。它们是适用于简单的效果，但GreenSock动画平台提供极其精确的渲染，所以您可以做到随时pause()和reverse()动画或跳到特定的时间并从那里播放。试试看创建一个CSS3用到Elastic.easeOut或SlowMo.ease效果，然后跳到0.72494秒进行2秒的transition并且pause()一下然后resume()。就我所知这是不可能的。因此本平台没有使用CSS3过渡。然而本平台有高度优化的性能。详见CSS3 transition笼中之斗了解GSAP如何战胜"硬件加速"的transition。
• 如何传递参数到onComplete函数或定义它的范围?
  这正是onCompleteParams和onCompleteScope特殊属性负责的事。下面是一些范例代码：
  [JavaScript]  纯文本查看  复制代码

  ?

  01 02 03 04 05 06 07 08 09 10 11 12 13 14

  TweenLite.to(element, 1, {width: "50%" , onComplete:myFunction, onCompleteParams:[ "param1" , "param2" ], onCompleteScope: this }); function myFunction(p1, p2) {          console.log( "tween completed. Received parameters: " + p1 + " and " + p2 + ". The scope is: " + this ); }   //或者如果您正在使用jQuery，这里是使用$(this)来阐明范围的一个例子。当您单击以"myElement"为id的元素时，它将补间其高度到100px，然后宽度到50%。注意因为我们定义onCompleteScope，在onComplete函数里面的"this"关键字是指元素本身： $( "#myElement" ).click(       function (){                  TweenLite.to($( this ), 0.7, { height: "100px" , ease:Power2.easeInOut, onCompleteScope:$( this ), onComplete: function (){                                  TweenLite.to( this , 0.7, { width: "50%" , ease:Power2.easeInOut} );                          }                  });       } );

  onUpdate、onUpdateParams、onUpdateScope、onStart、onStartParams和onStartScope也是如此。请参阅完整的文件了解详情。
• 我需要担心垃圾收集吗?当补间完成时会发生什么事？
  没有必要担心。补间和时间轴在适当的时候会自动符合垃圾收集(通常是当它们完成时，但如果您保持一个参考的实例，以便之后可以重新启动它，它就不会被垃圾收集) 。总之系统为您管理这个并且清理自己。
• 我偶尔注意到一些不顺畅和生涩的动画-是动画引擎有问题吗?
  不是的，不幸的是大多数浏览器都有类似的问题，它们的确很烦人，但它们发生于任何的动画引擎，(据我所知)实在无法完全避免。它们最有可能与垃圾收集例程这会导致不可预知的干扰。
• GreenSock动画平台有使用新的计时机制最大化性能且最小化CPU载入的"requestAnimationFrame"API吗?
  的确是的，不过如果浏览器不支持requestAnimationFrame它就会回落到一个标准setTimeout()。如果您不喜欢使用requestAnimationFrame，可以经由调用TweenLite.ticker.useRAF(false)将其禁用。requestAnimationFrame的主要好处是，它当浏览器刷新页面时会同步动画渲染，同时当用户切换到浏览器中另一个页签时也可显著减少更新的频率，减少了处理器的负荷，并节省移动设备上的电力。
• 我可以限制补间动画引擎更新的FPS吗?
  当然，您可以使用Ticker的fps()方法设置最大的fps。例如将其设置为30fps，您可以这么做： TweenLite.ticker.fps(30)。现在大多数浏览器预设的是大约60fps。
• 我可以在每个tick(帧)之后呼叫我自己的函数，如重绘画布或运行我自己的游戏逻辑等吗?
  当然可以。您可以使用Ticker的addEventListener()添加您自己的"tick"的事件侦听器像这样：
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2 3 4

  TweenLite.ticker.addEventListener( "tick" , tickHandler); function tickHandler() {          //在这里运行你的逻辑... }

• 我可以串连方法调用，就如同jQuery吗?
  绝对可以。下面是一些例子：
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2 3 4 5 6 7 8

  //首先，创建一个TimelineLite实例 var tl = new TimelineLite();   //现在把3个序列补间动画串连在一起 tl.to(e1, 1, {autoAlpha:1}).to(e1, 2, {width: "50%" , ease:Power2.easeInOut}).to(e1, 1, {height: "200px" });   //或刚创建后就影响一个补间动画，像是设置时间刻度并且跳到0.5的时间然后暂停 TweenLite.to(element, 5, {width: "500px" }).timeScale(2).pause(0.5);

• 如何补间附着的getter或setter函数，而不是普通的属性值?
  没问题- 如果属性是一个函数，TweenLite和TweenMax会自动感应，并相应地对待它。例如您有一个物件具有"height()"方法是用来getter和setter(类似于许多jQuery的方法)。同样，如果您​​传递一个值它就会是setter，否则它是getter。或者您使用以"get"/"set"之类的前缀普通命名约定不同的方法getMyProperty()和setMyProperty()-本平台可处理这两种类型的getter或setter方法：
  [JavaScript]  纯文本查看  复制代码

  ?

  1 2 3 4 5 6 7 8 9

  //首先让我们演示使用的常用方法为获取和设置 var h = obj1.height(); //gets obj1.height(100); //sets TweenLite.to(obj1, 1, {height:200}); //呼叫height()获得初始值，然后在补间的每一次更新传递新的值到height()来设定值。   //现在我们将演示使用单独的get / set方法 var h = obj2.getHeight(); //gets obj2.setHeight(100); //sets TweenLite.to(obj2, 1, {setHeight:200}); //TweenLite自动检查obj2.getHeight()获取初始值然后在补间的每一次更新使用obj2.setHeight()来设定高度。

• 我需要购买许可证才能使用此代码吗?
  我可以在商业项目中使用它吗?GreenSock采用了许可证，允许您免费使用工具，除了一个非常特殊的商业用途类型(如果使用GreenSock工具用于相同的应用程序/产品/网站从多个客户收取费用)，当提供一个小的筹资机制这会使得GSAP非常方便和适合商务，以维持后续的支援、改进和创新。网站充斥着废弃的"开源"项目，但GreenSock有承诺平台多年之久的纪录。这种独特的授权模式是可持续发展的一个关键部分。如果多个客户收取任何形式的使用/访问/许可费，请简单注册一个企业GreenSock俱乐部会员，它有一个特殊的商业许可授予您这样的权限。点击查看详情 。加入俱乐部也可以获得会员限定的奖金的插件、类、更新通知以及更多。请参阅许可页面了解详情。
  

保持最新 我们强烈建议经常回来检查，取得更新的Javascript文件，因为我们正在积极地增加功能、修补漏洞、实现新的浏览器不一致的解决方法等。注册免费GreenSock帐号 ，使您在我们的邮寄名单上，获得重要通知。不要忘了跟随我们的Twitter@greensock和Facebook。 需要帮助? 在专用论坛上http://forums.greensock.com/有各方面的GreenSock工具。请记住，如果您提供一个简要说明，并包括一个简化的HTML文件(及任何相关的档案)，用尽可能少的代码清楚地展示问题，您会增加获得立即答案的机会。