你的位置:首页 > Java教程

[Java教程]Tween(GreenSock)


设置参数(set)

动画执行(from、to、fromTo)

运动参数(css属性、autoAlpha、x、y、scale、scaleX、scaleY、rotation、rotationX、rotationY、rotationZ、skewX、skewY、className)

3D参数

缓动函数(多个分类、easeIn、easeOut、easeInOut)

延迟(delay)

重复(repeat、repeatDelay)

往返(yoyo)

回调函数及传参(onStart、onUpdate、onComplete、onRepeat)

刷帧(useFrames)

延迟调用(delayedCall)

强制结束(killTweensOf、killDelayedCallsTo、killChildTweensOf、killAll、kill)

 

 

1、引入TweenMax.js文件

TweenMax.set('.dv', {

        backgroundColor: 'red'

});

 

TweenMax.to('.dv', 10, {

        autoAlpha: 0.8,//到达指定位置时的透明度

        x: 200,//横向位移(单位px)

        y: 100,

        scale: 0.8,//缩放 scaleX、scaleY

        rotation: 180,//旋转rotationX、rotationY、rotationZ

        skewX: 1.2,//横向倾斜

        skewY: 0.5,

        ease: Elastic.easeOut,//缓动

        delay: 2,//动画延迟(2s后开始动画)

        yoyo: true,//像YOYO球一样往返运动,必须和repeat一起使用

        repeat: -1,//重复,-1表示无限循环

        repeatDelay: 1,//每次动画重复间隔1s

        onStart: function(){console.log('start');},//动画开始前

        onUpdate: function(){console.log('update');},//动画过程中

        onComplete: function(){console.log('complete');},//动画完成时

        onRepeat: function(){console.log('repeat');},//动画重复时

        //useFrames: true,//刷帧  1s=24帧  特别是大项目为了防止动画失帧 而采用这种刷帧的

        //方式进行,此时把第二个时间参数改为帧即可

});

 

//延迟2s再调用fun方法

TweenMax.delayedCall(2, fun);

function fun(){

        console.log('fun');

}

 

//禁掉dv的动画,注意添加对象参数

TweenMax.killTweensOf('.dv');

 

//禁掉所有的动画 2种方法

1、TweenMax.killAll();

2、TweenMax.killChildTweensOf('body');

 

区别:

TweenMax.killAll()禁掉所有的动画,可加参数

TweenMax.killAll( complete:Boolean, tweens:Boolean, delayedCalls:Boolean, timelines:Boolean );

TweenMax.killChildTweensOf(obj)禁掉obj下子类的所有动画