设置参数(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下子类的所有动画