TweenMax
一个专业的动画js库
TweeMax使用
得到动画的实例
var t = new TimelineMax();
to()
作用： 添加动画
参数说明：
- 元素选择器(字符串)或对象
- 持续时间(数字)， 单位秒
- 变化的属性(对象)
- [可选] 动画延迟发生时间
- 数字
- "-=0.5"
- "+=0.5"
基本使用:
<style>
#div1{
height: 100px;
width: 100px;
background: red;
}
</style>
<div id="div1"></div>
<script>
var t = new TimelineMax();
t.to( '#div1', 1, { width: 200 } );
</script>
这里添加了动画就开始运行
添加多个动画
t.to( '#div1', 1, { width: 300 } );
t.to( '#div1', 1, { marginLeft: 300 } );
t.to( '#div1', 1, { height: 300 } );
t.to( '#div1', 1, { marginTop: 300 } );
t.to( '#div1', 1, { rotationZ: 180 } );//TweenMax特有属性
t.to( '#div1', 1, { opacity: 0 } );
动画依次执行
加上第四个参数：
t.to( '#div1', 1, { width: 300 }, 1 );
t.to( '#div1', 1, { marginLeft: 300 }, 1 );
当第四个参数为数字时，表示延迟时间， 但是不会等待之前的运动了， marginLeft会和width延迟一秒后一起改变
t.to( '#div1', 1, { width: 300 } );
t.to( '#div1', 1, { marginLeft: 300 }, 0 );
marginLeft也会和width一起运动, 0表示没有延迟，并且第四个参数为数字不会等待先前的运动
t.to( '#div1', 1, { width: 300 } );
t.to( '#div1', 1, { marginLeft: 300 }, '+=0.5' );
如果是这'+=0.5'这种字符串形式， 表示在前一个运动的基础上再延迟0.5秒
t.to( '#div1', 1, { width: 300 } );
t.to( '#div1', 1, { marginLeft: 300 }, '－=0.5' );
如果是这'－=0.5'这种字符串形式， 表示在前一个运动的基础上再提前0.5秒
当width运动到200时， marginLeft就开始运动
stop():停止动画 play():开始动画 reverse():反向开始动画
<button id="play">play</button>
<button id="stop">stop</button>
<button id="reverse">reverse</button>
<div id="div1"></div>
<script>
var t = new TimelineMax();
t.stop();//开始的时候，先停止动画
t.to( '#div1', 1, { width: 300 } );
t.to( '#div1', 1, { marginLeft: 300 } );
t.to( '#div1', 1, { height: 300 } );
t.to( '#div1', 1, { marginTop: 300 } );
t.to( '#div1', 1, { rotationZ: 180 } );
t.to( '#div1', 1, { opacity: 0 } );
$('#stop').click(function(){
t.stop();
})
$('#play').click(function(){
t.play();
})
$('#reverse').click(function(){
t.reverse();
})
</script>
onComplete()：运动结束后触发对应的函数 onReverseComplete()：反向运动结束后触发对应的函数
t.to( '#div1', 1,
{
width: 300,
onComplete: function(){
alert(1);
} ,
onReverseComplete: function(){
alert(2);
}
});
add() tweenTo()
add() 添加状态
参数： 状态名(字符串)
或一个函数
tweenTo() 完成指定的动画
参数:
状态的字符串
或数字
add() tweenTo()配合使用
var t = new TimelineMax();
t.add('state1');//添加状态
t.to( '#div1', 1, { width: 200 } );
t.add('state2');
t.to( '#div1', 1, { width: 200 } );
t.add('state3');
t.tweenTo('state2');//运动到指定状态，这里是运动到200就停止了
add()传入函数
var t = new TimelineMax();
t.add('state1');
t.to( '#div1', 1, { width: 200 } );
//添加函数, width到200就执行该函数
t.add(function(){
$('#div').css('background','blue');
});
t.add('state2');
t.to( '#div1', 1, { width: 200 } );
t.add('state3');
t.tweenTo('state2');
tweenTo()也可以传入数字，表示运动到指定时间
t.to( '#div1', 1, { width: 200 } );
t.tweenTo(0.5);
seek()
完成指定的动画（无过渡）
seek跟tweenTo作用类似，区别在于seek没有过渡效果，是瞬间完成
参数说明:
- 指定时间或状态
- ［可选］
- true 不执行onComplete函数 默认
- false 执行onComplete函数
t.to( '#div1', 1, { width: 200, onComplete: function(){ alert(1) }} );
t.stop();
t.seek(1, false);
time()
返回动画已执行的时间
function getTime(){
alert( t.time() );
}
var t = new TimelineMax();
t.to( '#div1', 1, { width: 300 , onComplete: getTime}, '+=1' );
t.to( '#div1', 1, { marginLeft: 300 , onComplete: getTime} );
t.to( '#div1', 1, { height: 300 , onComplete: getTime} );
t.to( '#div1', 1, { marginTop: 300 , onComplete: getTime} );
t.to( '#div1', 1, { rotationZ: 180 , onComplete: getTime} );
t.to( '#div1', 1, { opacity: 0 , onComplete: getTime} );
clear()
清除所有动画
staggerTo()
添加动画
跟to()方法的效果基本一致，除了第四个参数的效果
参数说明：
- 元素选择器或对象
- 持续时间
- 对象(变化的属性)
- 【可选】动画延迟发生时间
- 可写数字，“-=0.5”，“+=0.5“
<style>
.div1{
height: 100px;
width: 100px;
margin: 1px;
background: red;
}
</style>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<script>
var t = new TimelineMax();
//t.to( '.div1', 1, { width: 300}, 1 );//同时执行
t.staggerTo( '.div1', 1, { width: 300}, 1 );//依次执行
</script>
totalDuration()
获取动画的总时长
alert( t.totalDuration() );
getLabelTime()
返回从开始到传入的状态的时间
参数说明：
- 状态的字符串
返回值是一个数字
alert( t.getLabelTime('state2') )
currentLabel()
获取当前状态
返回值是状态的字符串
getLabelAfter()
获取下一个状态
参数说明：
- 时间数字
返回值是状态的字符串，如果没有下一个状态返回null
getLabelBefore()
获取上一个状态
function getCurrentLabel(){
//获取当前的时间
var currentTime = t.getLabelTime( t.currentLabel() );
//获取到上一个状态
var beforeLabel = t.getLabelBefore( currentTime );
//获取到下一个状态
var afterLabel = t.getLabelAfter( currentTime );
var str = "<p>上一个状态:"+ beforeLabel +"</p><p>当前状态:"+ t.currentLabel() +"</p><p>下一个状态:"+ afterLabel +"</p>";
$("#label").html( str );
}
状态可以应该是一段时间，而不是一个时间点
t.add('state1');
t.to();
t.add('state2');
|___state1_____|___state2_____|
ease
t.to( '#div1', 1, { width: 300, ease:Bounce.easeIn } );
