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

快速连结:

引言
载入文件
基本的补间动画
特殊屬性
缓动
插件
补间动画的CSS属性
控制补间动画
用T​​imelineLite排序和分组补间
学习TweenMax和TimelineMax
覆盖其他补间动画
常见问题


开始玩转
jump_start_thumb.jpg 如果您还没有玩过的话,请看看玩转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] 纯文本查看 复制代码

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

请注意这是连结文件的"最新"版本,这意味着随着新版本出现,您可以自动获得这些更新。通常这是一件好事,特别是当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的任何前缀"#")。自行使用任何您想要的选择器: jQueryZeptoSizzle或您自己的。这样设置: 
[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识别几个非常有用的特殊性质,如onCompleteeaseoverwritepauseuseFramesimmediateRenderonStartonUpdateonCompleteParams等。欲知详情请阅读完整的说明文件。最常见的两种特殊属性是"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、xy-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、perspectivetransformPerspective于大多数常见浏览器(详见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@greensockFacebook


需要帮助?


在专用论坛上
http://forums.greensock.com/有各方面的GreenSock工具。请记住,如果您提供一个简要说明,并包括一个简化的HTML文件(及任何相关的档案),用尽可能少的代码清楚地展示问题,您会增加获得立即答案的机会。



展开阅读全文

没有更多推荐了,返回首页