API Docs for: 1.10.1 最后更新日期:2016年03月28日
Google搜索   
Show:

LTweenLite Class

Available since 1.4.0

LTweenLite是比较常用的一个动画库,包含各种缓动效果,使用LTweenLite能够简化动画制作的代码编写工作。

Constructor

LTweenLite

() public

Defined in transitions/LTweenLite.js:236

Available since 1.4.0

Item Index

Properties

Methods

LTweenLite.pauseAll

() public static

Defined in transitions/LTweenLite.js:431

Available since 1.8.0

[静态方法]暂停所有正在进行的缓动动画。

Example:

LTweenLite.pauseAll();

LTweenLite.remove

(
  • tween
)
public static

Defined in transitions/LTweenLite.js:348

Available since 1.8.0

[静态方法]停止当前的缓动动画。

Parameters:

Example:

LInit(1000/50,"legend",800,450,main);
var tween;
function main(){
    LGlobal.setDebug(true);
    var rect = new LSprite();
    rect.x = 50;
    rect.y = 50;
    rect.graphics.drawRect("#FF00FF",1,[0,0,20,20],true,"#FF00FF");
    addChild(rect);
    tween = LTweenLite.to(rect,1,{x:500,loop:true,ease:LEasing.Sine.easeInOut})
    .to(rect,1,{x:50,ease:LEasing.Quad.easeInOut});
    var stopButton = new LButtonSample1("stop");
    stopButton.x = 50;
    circle.y = 50;
    stopButton.y = 100;
    addChild(stopButton);
    stopButton.addEventListener(LMouseEvent.MOUSE_UP,stopTween);
}
function stopTween(e){
    LTweenLite.remove(tween);
}

LTweenLite.removeAll

() public static

Defined in transitions/LTweenLite.js:391

Available since 1.8.0

[静态方法]停止所有正在进行的缓动动画。

Example:

LInit(1000/50,"legend",800,450,main);
function main(){
    LGlobal.setDebug(true);
    var circle = new LSprite();
    circle.x = 50;
    circle.y = 50;
    circle.graphics.drawArc("#FF0000",1,[0,0,20,0,Math.PI*2],true,"#FF0000");
    addChild(circle);
    var rect = new LSprite();
    rect.x = 50;
    rect.y = 50;
    rect.graphics.drawRect("#FF00FF",1,[0,0,20,20],true,"#FF00FF");
    addChild(rect);
    LTweenLite.to(circle,1,{x:500,y:400,scaleX:3,scaleY:3,loop:true,ease:LEasing.Strong.easeInOut})
    .to(circle,1,{x:700,y:50,scaleX:1,scaleY:1,ease:LEasing.Quint.easeIn})
    .to(circle,1,{x:50,y:50,ease:LEasing.Quint.easeIn});
    LTweenLite.to(rect,1,{x:500,loop:true,ease:LEasing.Sine.easeInOut})
    .to(rect,1,{x:50,ease:LEasing.Quad.easeInOut});
    var stopButton = new LButtonSample1("stopAll");
    stopButton.x = 50;
    circle.y = 50;
    stopButton.y = 100;
    addChild(stopButton);
    stopButton.addEventListener(LMouseEvent.MOUSE_UP,stopTween);
}
function stopTween(e){
    LTweenLite.removeAll();
}

LTweenLite.resumeAll

() public static

Defined in transitions/LTweenLite.js:446

Available since 1.8.0

[静态方法]重新播放被暂停的所有缓动动画。

Example:

LTweenLite.pauseAll();
LTweenLite.resumeAll();

LTweenLite.to

(
  • target
  • duration
  • vars
)
LTweenLiteChild public static

Defined in transitions/LTweenLite.js:288

Available since 1.4.0

[静态方法]用于创建一个LTweenLiteChild实例动画,让某对象的某些属性缓动到指定的目标的值(从当前值)。

Parameters:

  • target Object

    要缓动的对象(这里注意类型是Object,并不仅仅是LSprite,LBitmap).

  • duration Float

    持续的时间(单位是秒)

  • vars Object

    一个Object,包含你想要缓动的所有属性,比如 onComplete, ease, etc。举例, 将一个 对象mc.x 缓动到 100 ,将 mc.y 缓动到 200 ,缓动结束后执行一个函数 myFunction, 这时候,你可以这么写: TweenLite.to(mc, 1, {x:100, y:200, onComplete:myFunction});

    除了使用对象的属性之外,你也可以使用一些特殊的值:

    属性类型说明
    tweenTimelinefloat

    动画播放的类型,默认值为LTweenLite.TYPE_FRAME。

    LTweenLite.TYPE_FRAME:用桢来播放动画。

    LTweenLite.TYPE_TIMER:用时间来播放动画。

    为了测试两者的区别,接下来的demo在进行缓动时首先延迟2秒钟,使用LTweenLite.TYPE_FRAME播放是无间断,而使用LTweenLite.TYPE_TIMER播放则会直接跳到结束。测试链接

    delayfloat延时几秒后开始缓动,这在有先后顺序的缓动效果中很有用
    easeLEasing (or Function)应用在variables上的缓动函数,比如LEasing.Quad.easeIn or LEasing.Cubic.easeOut。默认值是LEasing.None.easeIn.
    onCompleteFunction在缓动效果结束时触发此方法。回调函数是有参数的,使用方法同下面的例子。
    onStartFunction在缓动开始时触发此方法.回调函数是有参数的,使用方法同下面的例子。
    onUpdateFunction当属性值发生改变时(缓动进行中的每一帧,每一秒)触发此方法。回调函数是有参数的,使用方法同下面的例子。
    loopBoolean如果设定为 true, 缓动就会持续循环.
    playStyleLTweenLite.PlayStyle只有设定loop为true, playStyle才会有效。测试链接
    coordinateArray你可以自定义缓动路径,路径的每个点必须是LPoint对象,或者类似于{x:1,y:2}的形式,测试链接

Returns:

LTweenLiteChild:

一个LTweenLiteChild的实例

Example:

LInit(1000/50,"legend",800,450,main);
function main(){
    LGlobal.setDebug(true);
    var circle = new LSprite();
    circle.x = 50;
    circle.y = 50;
    circle.graphics.drawArc("#FF0000",1,[0,0,20,0,Math.PI*2],true,"#FF0000");
    addChild(circle);
    var rect = new LSprite();
    rect.x = 50;
    rect.y = 100;
    rect.graphics.drawRect("#FF00FF",1,[0,0,20,20],true,"#FF00FF");
    addChild(rect);
    LTweenLite.to(circle,2,{x:500,y:400,scaleX:3,scaleY:3,ease:LEasing.Strong.easeInOut})
    .to(circle,2,{x:700,y:50,scaleX:1,scaleY:1,ease:LEasing.Quint.easeIn,onComplete:function(e){
        trace(e.currentTarget);
        trace(e.target);//circle
    }});
    LTweenLite.to(rect,1,{x:500,loop:true,ease:LEasing.Sine.easeInOut})
    .to(rect,1,{x:50,ease:LEasing.Quad.easeInOut});
}

Properties

LTweenLite.PlayStyle

Object public static

Defined in transitions/LTweenLite.js:249

Available since 1.10.0

缓动动画循环的类型

属性说明
LTweenLite.PlayStyle.None无效果
LTweenLite.PlayStyle.Init每次缓动都从第一次缓动开始时的值开始进行。