因为要做一个案例，里面用到了很多动画，TweenMax真的是一个很强大的动画库，所以就学了一点里面的方法，现在整理出来
官网：https://greensock.com/tweenmax
注意：这个动画库是基于jQuery的，所以使用前要先引入jQuery哦！
下面的所有方法都在TimelineMax对象下，要先得到动画实例，所以使用我下面的方法的时候要注意先写下面的代码：
var t = new TimelineMax();
用到的方法整理：
to():添加动画；
参数说明：
- 元素选择器或对象
- 持续时间
- 对象（变化的属性->值）
- 【可选】动画延迟发生的时间（可写数字，“-=0.5”，“+=0.5”）
一例胜千言，嗯，先看看下面的小实例
![fa1101c3b25161f06d779597578c921b96d4fca8]()
![c777dcaa2ee900c0446ea698e5dea2f3d71de5e1]()
在这个例子中，等待1s后，元素"#div1"的left和width同时变化，left用时1s后到达目标点，width用时2s到达目标点，过1s钟高度开始变化，高度到达目标点后（用时2s），元素围绕z轴旋转180deg（用时2s），旋转后，透明度发生变化（用时2s）
注意：第四个参数是可选参数，如果我们没有写第四个参数，意味着，下面的动画执行都会在上一动画执行完之后开始执行，如果加了第四个参数，就是在上一动画的时间基础上加上或减少延迟时间（针对"+="或"-="）,当然如果是数字num，那么
如果num>=0,那就是延迟num执行（注意：不是相对于前一个动画，而是相对于动画的开始时间哦），如果num<0,对于第一个t.to()，延迟负数就相当于0，第二个及以后的t.to，如果延迟时间小于0，则一打开页面运动已经执行完毕（看不到运动的过程）
2、staggerTo()：添加动画
参数说明：
1. 元素选择器或对象
2. 持续时间
3. 对象
变化的属性->值
4.【可选】一组动画间的延迟时间，数字
5. 【可选】一组动画整体延迟发生时间
可写数字，“-=0.5”，“+=0.5“
这个方法和t.to()方法语法和使用都一样，那两者不一样的地方就是，先看下面的例子吧！
![00bc91dbfc846d98b9f29e7670c06baa49db6122]()
![dec78dc745fe3906695f14d6056a68647e4c8481]()
在这个例子中，如果我们没有加第四个参数的时候，两者的效果是一样的，即所有的div都同时执行，然后同时到达目标点
但是如果我们加了第四个参数的话，使用t.to()方法的时候，所有的div还是同时执行，但是如果我们使用的是t.staggerTo()，后面的div都会等到前面的div执行完成之后再执行（不是一起执行，而是依次执行）
注意：个人比较建议使用这个方法，一般是针对一类元素，然后，第四个参数，如果为正数，代表正序执行，绝对值代表延迟时间，如果是负数，则表示倒序执行，绝对值也是延迟时间（个人测试得出的结论）
如果是不同的类别元素使用t.staggerTo()方法，我测试发现，其实第四个参数并不起作用，不管时间是多少，都是按照写的顺序依次执行，并且中间是没有间隔的
-
<div class="div1">
</div>
-
<div class="div2">
</div>
-
<div class="div3">
</div>
-
-
-
var t = new TimelineMax();
-
t.staggerTo( ".div1",1,{width:300},2 );
-
t.staggerTo( ".div2",3,{height:300},0);
-
t.staggerTo( ".div3",1,{background:"blue"},-1);
-
-
-
上面的执行顺序是先div1宽度变化，然后div2的height发生变化，最后是div3的background发生变化
-
-
第五个参数，代表一组动画整体提前或延迟多少执行
上面的是我自己经过不断测试得出的结论，如果有什么地方不正确，欢迎指正哦
3、下面的比较好理解，看字面意思就知道了
stop()：停止动画
play()：开始动画
reverse()：反向开始动画
onComplete()：运动结束后触发对应的函数
onReverseComplete()：反向运动结束后触发对应的函数
看例子吧
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top:50px;
}
</style>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./js/TweenMax.js"></script>
<script>
$(function(){
var t = new TimelineMax();
t.stop();
t.to( "#div1",1,{left:300,onComplete:function(){
alert("left:300")
},onReverseComplete:function(){
alert("反向left:0");
}} );
t.to( "#div1",2,{width:300,onComplete:function(){
alert("width:300")
},onReverseComplete:function(){
alert("反向width:100")
}} );
$("#play").click(function (){
t.play();
})
$("#stop").click(function (){
t.stop();
})
$("#reverse").click(function (){
t.reverse();
})
})
</script>
</head>
<body>
<input type="button" id="play" value="播放" />
<input type="button" id="stop" value="停止" />
<input type="button" id="reverse" value="反向动画" />
<div id="div1"></div>
</body>
</html>
注意：如果我们没有加t.stop()方法的时候，元素都是在打开页面后便开始执行动画，当我们加了t.stop()方法后，所有的的动画都不会执行，只有我们调用t.play()方法的时候，才会开始执行
4、add---添加状态
参数说明：
1. 字符串或一个函数
TweenTo---完成指定的动画（过渡）
参数说明：
1. 指定时间或状态的字符串
这两个方法一般都是结合使用的，所以先看例子呗
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top:50px;
}
</style>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./js/TweenMax.js"></script>
<script>
$(function(){
var t = new TimelineMax();
t.add("state1");
t.to( "#div1",1,{left:300} );
t.to( "#div1",2,{width:300} );
t.add("state2");
t.to( "#div1",3,{height:300} );
t.add("state3")
t.tweenTo( "state2" );
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
注意：当我们使用t.tweenTo()方法的时候，即便我们添加了t.stop()方法，也不会影响t.tweenTo()方法的执行，比如在这个例子中，即便我们添加了t.stop()方法，页面在打开的时候，还是会立即执行到状态2
5、seek()：完成指定的动画（无过渡）
参数说明：
1. 指定时间或状态
2. 【可选】布尔值
true：不执行函数 默认
false: 执行函数
和上面的t.tweenTo()方法很相似，不同的是，这个没有过渡效果，如果把上面的例子中t.tweenTo()方法换成t,seek()方法，结果就是一打开页面，元素的left和width就为300，看不多动画效果
5、下面两个很好理解了，就不啰嗦了
time()：动画已执行的时间
clear：清除所有动画
6、
totalDuration()：获取动画的总时长
getLabelTime()：返回从开始到当前状态的时间
参数说明：
1. 状态的字符串
返回值是一个数字
currentLabel()：获取当前状态
返回值是状态的字符串
没什么好解释的，看例子就都懂了
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top:50px;
}
</style>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./js/TweenMax.js"></script>
<script>
$(function(){
var t = new TimelineMax();
t.add( "state1" );
t.to( "#div1",1,{left:300});
t.to( "#div1",2,{width:300,onComplete:function(){
getCurrentLabel();
}} );
t.add( "state2" )
t.to( "#div1",3,{height:300,onComplete:function(){
getCurrentLabel();
}} );
t.add( "state3" )
alert( t.totalDuration() )
alert( t.getLabelTime( "state3" ) )
alert( t.currentLabel() )
getCurrentLabel();
function getCurrentLabel(){
//alert( t.currentLabel() )
alert( t.getLabelTime( t.currentLabel() ) )
}
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
7、getLabelAfter()：获取下一个状态
参数说明：
1. 时间数字
返回值是状态的字符串，如果没有下一个状态返回null
getLabelBefore()：获取上一个状态
参数说明：
1. 时间数字
返回值是状态的字符串，如果没有上一个状态返回null
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top:50px;
}
</style>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./js/TweenMax.js"></script>
<script>
$(function(){
var t = new TimelineMax();
t.add( "state1" );
t.to( "#div1",4,{left:300});
t.to( "#div1",5,{width:300,onComplete:function(){
getCurrentLabel();
}} );
t.add( "state2" )
t.to( "#div1",6,{height:300,onComplete:function(){
getCurrentLabel();
}} );
t.add( "state3" )
//alert( t.totalDuration() )
//alert( t.getLabelTime( "state3" ) )
//alert( t.currentLabel() )
getCurrentLabel();
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 );
}
})
</script>
</head>
<body>
<div id="label"></div>
<div id="div1"></div>
</body>
</html>
原文发布时间：2018年06月18日
作者：冰雪为融
本文来源：CSDN 如需转载请联系原作者
