2.TweenLite

TweenLite算是Gsap中的基本最小单位。

一个TweenLite随着时间的推移可以控制多个对象的多个属性值的 渐变。

它可以配合 TimelineLite 或者 TimelineMax 完成复杂的任务。

基础用法

先来看个例子

html:

<div id="demo">
  <div id="scoreDisplay"></div>
</div>


css:

#demo {

}

#scoreDisplay {
  font-size:40px;
  text-align:center;
}

js:

var demo = {score:0},
    scoreDisplay = document.getElementById("scoreDisplay");

//create a tween that changes the value of the score property of the demo object from 0 to 100 over the course of 20 seconds.
var tween = TweenLite.to(demo, 20, {score:100, onUpdate:showScore})

//each time the tween updates this function will be called.
function showScore() {
  scoreDisplay.innerHTML = demo.score.toFixed(2);
}

点这里看演示效果

参数详解

先来看一个例子:

var photo = document.getElementById("photo");
TweenLite.to(photo, 2, {width:"200px", height:"150px"});

首先我们要知道gsap中tween是一种基本类型。

通过to()方法我们可以给TweenLite等类型传参。

这个的效果就是将以photo为ID的元素的图片，将从此刻起，两秒内。宽度和高度分别达到指定的数值。

来看下效果

代码在这

可以看到我一开始定义的高宽都是40px，它会自动创建动画补间最后达到指定的高宽。

有to()就有from().感兴趣的可以直接修改to为from。效果将相反。

如果你想处理更多的css属性，你可能需要用到插件[css Plugin](http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/）。

关于这个我们未来会讨论。

默认我们是自动通过document.querySelectorAll() 和 document.getElementById()来确定元素。

当TweenLite 和 CSSPlugin 被加载,你可以写这种形式：

//tween the element with ID of "myID"
TweenLite.to("#myID", 2, {backgroundColor:"#ff0000", width:"50%", top:"100px", ease:Power2.easeInOut});

//or if jQuery is loaded, you can do more advanced selecting like all the elements with the class "myClass" like this:
TweenLite.to(".myClass", 2, {boxShadow:"0px 0px 20px red", color:"#FC0"});

你不用纠结怎么加载处理cssPlugin，只需要像普通加载外置js一样，直接在tweenlite后面加载就行了。

可以看到如果我们修改了上面的代码，那么效果将是这样的：

示例代码

从这几个例子中我们可以看到tween都是立刻执行的。我们可以通过特定的属性delay延迟执行或者paused 来暂停。

target可以是多个。来看下面的例子：

html:

<div id="photo"> </div>
<div id="photo2"> </div>
<div id="photo3"> </div>


css:

#photo{
height:40px;
width:40px;

    background:url(http://7s1say.com1.z0.glb.clouddn.com/avatar639D58E2-E732-4FF9-8E05-724717DFEF1F.png);
background-repeat:no-repeat;
background-size: contain;
}
#photo2{
height:40px;
width:40px;

    background:url(http://7s1say.com1.z0.glb.clouddn.com/avatar639D58E2-E732-4FF9-8E05-724717DFEF1F.png);
background-repeat:no-repeat;
background-size: contain;
}
#photo3{
height:40px;
width:40px;

    background:url(http://7s1say.com1.z0.glb.clouddn.com/avatar639D58E2-E732-4FF9-8E05-724717DFEF1F.png);
background-repeat:no-repeat;
background-size: contain;
}

js:

var photo = document.getElementById("photo");
var photo2 = document.getElementById("photo2");
var photo3 = document.getElementById("photo3");
TweenLite.to([photo, photo2, photo3], 1, {opacity:0.5, rotation:45});

这是效果：

更多语法

你可以用下面的方式调用tween

var tween = new TweenLite(element, 2, {width:200, height:150});

var tween = TweenLite.to(element, 2, {width:200, height:150});

特殊属性ease,callback(无需插件)

delay:接受数值n，表示n秒后执行动画

ease:接受函数或者字符串，可以控制动画速率。类似贝塞尔曲线。比如Elastic.easeOut

或者Strong.easeInOut.

你可以用gsap自带的

Linear, Power0, Power1, Power2, Power3, Power4, Quad, Cubic, Quart, Quint, Strong

它们可以分别用在.easeIn, .easeOut, .easeInOut

然后你还可以通过加载EasePack来获得额外的效果，比如：

Elastic, Back, Bounce, SlowMo, SteppedEase, Circ, Expo, Sine

对于线性动画，你可以定义ease通过Linear.easeNone这个字符串。或者是jquery风格easeOutStrong.

默认值是:Quad.easeOut

paused:接受boolean值，如果是true，当动画创建时会立刻停止。

immediateRender:接受boolean值,通常来说，当你创建一个tween，它会开始渲染下一帧除非你定义了paused。

如果你想强制tween创建时就立刻渲染完成，你需要设置这个属性为true.或者为了防止from()立刻渲染，设置这个属性为false。默认的，from()这个属性是为true的。

overwrire:接受数值或者字符串。控制对于同个目标多个tweens是否覆盖。

默认是auto 这是它的参数表

onComplete:接受一个函数。当动画已经准备完全时调用。

onCompleteParams:接受一个数组。通过onComplete传递参数。用法如下

weenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]});

还可以自我引用

onCompleteParams:["{self}", "param2"]

onCompleteScope:接受一个对象。定义onComplete函数的范围

onReverseComplete：接受一个函数。当reverse()被调用，它会被调用。也用在 TimelineLite 和 TimelineMax

onReverseCompleteParams:接受一个数组。通过onReverseComplete传参。用法如下：

TweenLite.to(element, 1, {left:"100px", onReverseComplete:myFunction, onReverseCompleteParams:[mc, "param2"]});

引用自身

onReverseCompleteParams:["{self}", "param2"]

onReverseCompleteScope:接受一个对象。定义onReverseComplete函数的范围

onStart:接受一个函数。当一个tween开始启动时调用。

onStartParams:接受一个数组。通过onStart传参.用法如下：

TweenLite.to(element, 1, {left:"100px", delay:1, onStart:myFunction, onStartParams:[mc, "param2"]});

引用自身

onStartParams:["{self}", "param2"]

onStartScope:接受一个对象。定义onStart函数的范围

onUpdate:接受一个函数。每当动画更新（每一帧活动时）调用。

onUpdateParams：

TweenLite.to(element, 1, {left:"100px", onUpdate:myFunction, onUpdateParams:[mc, "param2"]});

onUpdateParams:["{self}", "param2"]

onUpdateScope:接受一个对象。定义onUpdate函数的范围

useFrames:接受一个boolean,如果为true,该tween定时将基于帧而不是秒。这将导致duration和delay都基于帧。

lazy:接受一个boolean,当一个tween第一次创建和读取它的值，GSAP将自动lazy render。这意味它将会尽量延迟渲染(写值)直到尽头。事实上你不需要动这个参数。

onOverwrite：接受一个函数。当一个tween被另一个tween覆盖。下列参数会被传到这个函数中：

1.overwrittenTween 要覆盖的tween

2.overwritingTween 被覆盖的tween

3.target 目标

4.overwrittenProperties 数组

autoCss:接受一个Boolean,让你可以用cssPlugins用下面的方式：

TweenLite.to(element, 2, {css:{left:"200px", top:"100px"}, ease:Linear.easeNone});

或者这种

TweenLite.to(element, 2, {left:"200px", top:"100px", ease:Linear.easeNone});).

不需要动它。

插件

每一个插件都有对应的属性名，

比如cssPlugins与css联系在一起。

注意

1.传递值时如果用了+=或者-=会联系当前值修改。比如

当你用

TweenLite.to(element, 2, {left:"-=20px"});

再用{x:"+=20"} 会自动添加20.

2.你可以改变TweenLite.defaultEase如果你想要用其它比如Power1.easeOut

3.干掉一个指定目标你可用TweenLite.killTweensOf("#myID")

4.你可以干掉自定义的delay 函数。 TweenLite.killDelayedCallsTo(myFunction)或者 TweenLite.killTweensOf(myFunction)

总结属性表。

公共属性

公共函数