tweenMax是一个很强大的动画库插件，能实现很多牛逼的效果，在网上看了些demo，虽说很多用CSS3也能做出来，但是在不同业务场景时间要求的情况下，可以选择不同技术！
TweenMax动画库的官方网址: http://greensock.com/timelinemax
下面我们直奔主题，开始介绍TweenMax动画库：
1、如何引用TweenMax动画库
TweenMax动画库依赖jQuery
XHTML
|
1 2 |
<script src="./../js/jquery-2.1.4.min.js"></script> <script src="./../js/TweenMax.js"></script><strong> </strong> |
2、得到动画的示例
XHTML
|
1 2 3 4 5 |
<script> $(function () { var t = new TimelineMax(); }); </script> |
to()方法：添加动画
参数说明：
|
1 |
t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5") |
1. 元素选择器或对象
2. 持续时间
3. 对象（变化的属性->值）
4. 【可选】动画延迟发生时间
|
1 |
可写数字，“-=0.5”，“+=0.5“ |
页面简单布局
XHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> html, body { margin: 0; padding: 0; } #div1 { width: 100px; height: 100px; background: #8D121A; position: absolute; left: 0; top: 100px; } </style> <body> <div id="div1"></div> </body> |
执行单个动画
XHTML
|
1 2 3 4 5 6 7 8 |
<script> $(function () { var t = new TimelineMax(); t.to("#div1", 1, { left: 300 }, 1); }); </script> |
执行组合动画
|
1 2 3 4 |
$(function(){ var t =new TimelineMax(); t.to("#div1",1,{left:300,width:300},1); }); |
执行队列动画,列表中的动画会依次执行
|
1 2 3 4 5 6 |
t.to("#div1", 1, { left: 300 }); t.to("#div1", 1, { width: 300 }); t.to("#div1", 1, { height: 300 }); t.to("#div1", 1, { top: 300 }); t.to("#div1", 1, { rotationZ: 180 }); t.to("#div1", 1, { opacity: 0 }); |
添加第四个参数 设置动画的延迟时间
|
1 2 3 4 |
//动画延迟一秒执行 t.to("#div1", 1, { left: 300, width: 300 }, 1); //第二条动画没有延迟时间,所以等第一条动画执行完成后立刻执行第二条动画 t.to("#div1", 1, { width: 300 }); |
|
1 2 3 4 |
//动画延迟一秒执行 t.to("#div1", 1, { left: 300, width: 300 }, 1); //第二条动画也是延迟一秒执行,会和第一条动画同时延迟一秒执行 t.to("#div1", 1, { width: 300 }, 1); |
延迟执行第二条动画
|
1 2 3 4 |
//动画延迟一秒执行 t.to("#div1", 1, { left: 300, width: 300 }, 1); //实现第一条动画完成后,延迟一秒,执行第二条动画 t.to("#div1", 1, { width: 300 }, 3); |
延迟执行第二条动画(便捷写法)
|
1 2 3 |
//动画延迟一秒执行 t.to("#div1", 1, { left: 300, width: 300 }, 1); <strong> t.to("#div1", 1, { width: 300 }, "+=1");</strong> |
让第二条动画指令立刻执行
|
1 2 3 4 |
//动画延迟一秒执行 t.to("#div1", 1, { left: 300, width: 300 }, 1); //第四个参数设0后,动画会立刻执行 t.to("#div1", 1, { width: 300 }, 0); |
动画的停止与播放
通过play()方法与stop()方法来控制
XHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TweenMax动画库学习(一)</title> <script src="./../js/jquery-2.1.4.min.js"></script> <script src="./../js/TweenMax.js"></script> <style> html,body{ margin: 0; padding: 0; } #div1{ width:100px; height:100px; background: #8D121A; position: absolute; left:0; top:100px; } </style> <script> // stop()：停止动画 // play()：开始动画 $(function(){ var t =new TimelineMax(); // t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5") t.to("#div1",1,{left:300},1); t.to("#div1",2,{width:300},"+=1"); t.to("#div1",2,{height:300},"+=1"); t.to("#div1",2,{top:600}); t.to("#div1",2,{rotationZ:180}); t.to("#div1",2,{opacity:0}); t.stop(); //停止动画 <strong> $("#play").click(function(){ </strong> t.play();//播放动画 }); $("#stop").click(function(){ t.stop();//停止动画 }); }); </script> </head> <body> <input type="button" id="play" value="播放"/> <input type="button" id="stop" value="停止"/> <div id="div1"></div> </body> </html><code class="sourceCode html hljs xml"><span class="dt"><span class="hljs-meta"> </span></span></code> |
反向执行动画
通过reverse()方法让动画反向执行
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TweenMax动画库学习(一)</title> <script src="./../js/jquery-2.1.4.min.js"></script> <script src="./../js/TweenMax.js"></script> <style> html,body{ margin: 0; padding: 0; } #div1{ width:100px; height:100px; background: #8D121A; position: absolute; left:0; top:100px; } </style> <script> // reverse()：反向开始动画 $(function(){ var t =new TimelineMax(); // t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5") t.to("#div1",1,{left:300},1); t.to("#div1",2,{width:300},"+=1"); t.to("#div1",2,{height:300},"+=1"); t.to("#div1",2,{top:600}); t.to("#div1",2,{rotationZ:180}); t.to("#div1",2,{opacity:0}); t.stop(); //停止动画 $("#play").click(function(){ t.play();//播放动画 }); $("#stop").click(function(){ t.stop();//停止动画 }); <strong> $("#reverse").click(function(){ </strong> <strong> t.reverse();</strong>//反向执行动画 <strong> }); </strong> }); </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> |
onComplete()：运动结束后触发对应的函数
onReverseComplete()：反向运动结束后触发对应的函数
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TweenMax动画库学习(一)</title> <script src="./../js/jquery-2.1.4.min.js"></script> <script src="./../js/TweenMax.js"></script> <style> html,body{ margin: 0; padding: 0; } #div1{ width:100px; height:100px; background: #8D121A position: absolute; left:0; top:100px; } </style> <script> // stop()：停止动画 // play()：开始动画 // reverse()：反向开始动画 // onComplete()：运动结束后触发对应的函数 // onReverseComplete()：反向运动结束后触发对应的函数 $(function(){ var t =new TimelineMax(); // t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5") t.to("#div1",1,{left:300,<strong>onComplete:</strong><strong>function(){ </strong> <strong> alert("left:300"); </strong> <strong> }</strong>,<strong>onReverseComplete(){ </strong> <strong> alert("left:0"); </strong> <strong> }}</strong>,1); t.to("#div1",2,{width:300,<strong>onComplete:</strong><strong>function(){ </strong> <strong> alert("width:300") </strong> <strong> }</strong>,<strong>onReverseComplete(){ </strong> <strong> alert("width:100"); </strong> <strong> }}</strong>,"+=1"); t.to("#div1",2,{height:300},"+=1"); t.to("#div1",2,{top:600}); t.to("#div1",2,{rotationZ:180}); t.to("#div1",2,{opacity:0}); t.stop(); //停止动画 $("#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> |
动画演示：
add()---添加状态
TweenTo---完成指定的动画（过渡）
1、页面布局
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script src="./../js/jquery-2.1.4.min.js"></script> <script src="./../js/TweenMax.js"></script> <style> html,body{ margin: 0; padding: 0; } #div1{ width:100px; height:100px; background: #8D121A; position: absolute; left:0; top:100px; } </style> |
|
1 2 3 |
<body> <div id="div1"></div> </body> |
2、add()---添加状态
参数说明： 字符串或一个函数
add("字符串")
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(function(){ var t =new TimelineMax(); t.to("#div1",2,{left:300}); <strong> t.add("state1"); </strong> t.to("#div1",2,{width:300}); <strong>t.add("state2"); </strong> t.to("#div1",2,{height:300}); <strong>t.add("state3"); </strong> }); </script> |
add(函数)
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(function(){ var t =new TimelineMax(); t.to("#div1",2,{left:300}); <strong>t.add(function(){ </strong> <strong>$("#div1").css("background","blue"); </strong> <strong> }); </strong> t.to("#div1",2,{width:300}); t.to("#div1",2,{height:300}); }); </script> |
2、TweenTo---完成指定的动画（过渡）
参数说明：指定时间或状态的字符串
TweenTo（时间）
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(function(){ var t =new TimelineMax(); t.to("#div1",2,{left:300}); t.to("#div1",2,{width:300}); t.to("#div1",2,{height:300}); t.stop(); <strong> t.tweenTo(1.5);</strong>//完成指定的动画（过渡） }); </script> |
TweenTo（"字符串"）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(function(){ var t =new TimelineMax(); t.to("#div1",2,{left:300}); t.add("state1");//添加状态 t.to("#div1",2,{width:300}); t.add("state2"); t.to("#div1",2,{height:300}); t.add("state3"); t.stop(); <strong>t.tweenTo("state2");</strong> //完成指定的动画（过渡） }); </script> |
add()与tweenTo()综合使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TweenMax动画库学习(二)</title> <script src="./../js/jquery-2.1.4.min.js"></script> <script src="./../js/TweenMax.js"></script> <style> html,body{ margin: 0; padding: 0; } #div1{ width:100px; height:100px; background: #8D121A; position: absolute; left:0; top:100px; } </style> <script> // add---添加状态 // 参数说明： // 1. 字符串或一个函数 // TweenTo---完成指定的动画（过渡） // 参数说明： // 1. 指定时间或状态的字符串 $(function(){ var t =new TimelineMax(); t.to("#div1",2,{left:300}); t.add("state1");//添加状态 t.add(function(){ $("#div1").css("background","blue"); }); t.to("#div1",2,{width:300}); t.add("state2"); t.to("#div1",2,{height:300}); t.add("state3"); t.stop(); t.tweenTo("state2"); //完成指定的动画（过渡） // t.tweenTo(1.5); }); </script> </head> <body> <div id="div1"></div> </body> </html> |
seek()---完成指定的动画（无过渡）
time() 动画已执行的时间
clear()：清除所有动画
1、页面布局
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script src="./../js/jquery-2.1.4.min.js"></script> <script src="./../js/TweenMax.js"></script> <style> html,body{ margin: 0; padding: 0; } #div1{ width:100px; height:100px; background: #8D121A; position: absolute; left:0; top:100px; } </style> |
|
1 2 3 |
<body> <div id="div1"></div> </body> |
2、seek()---完成指定的动画（无过渡）
参数说明：
|
1 2 3 4 |
1. 指定时间或状态 2. 【可选】布尔值 true：不执行函数 默认 false: 执行函数 |
seek(时间)
|
1 2 3 4 5 6 7 8 9 |
<script> $(function(){ var t =new TimelineMax(); t.to("#div1",2,{left:300}); t.to("#div1",2,{width:300}); t.to("#div1",2,{height:300}); <strong>t.seek(2);</strong>//直接运动到设置的时间点，后面的运动会接着运动 }); <script> |
seek("状态")
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(function(){ var t =new TimelineMax(); t.to("#div1",2,{left:300}); t.add("state1"); t.to("#div1",2,{width:300}); t.add("state2"); t.to("#div1",2,{height:300}); t.add("state3"); <strong> t.seek("state2");</strong>//直接运动到设置的状态，后面的运动会接着运动 }); </script> |
seek("状态",false)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(function(){ var t =new TimelineMax(); t.to("#div1",2,{left:300,onComplete:function(){ alert("left:300"); }});//标记一 t.add("state1"); t.to("#div1",2,{width:300,onComplete:function(){ alert("width:300"); }}); t.add("state2"); t.to("#div1",2,{height:300}); t.add("state3"); <strong> t.seek("state1",false);</strong>//直接运动到设置的状态，但会执行【标记一】中的函数，后面的运动会接着运动 </script> |
3、time() 动画已执行的时间
参数说明：
|
1 |
1 动画已执行的时间 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(function(){ var t =new TimelineMax(); t.to("#div1",2,{left:300,onComplete:function(){ alert("left:300"); }}); t.add("state1"); t.to("#div1",2,{width:300,onComplete:function(){ alert("width:300"); }}); t.add("state2"); t.to("#div1",2,{height:300}); t.add("state3"); t.seek("state3",false); <strong> console.log(t.time());</strong> //6 //动画已执行的时间 }); </script> |
4、clear()：清除所有动画
参数说明：
|
1 |
1 清除所有动画 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $(function(){ var t =new TimelineMax(); t.to("#div1",2,{left:300,onComplete:function(){ alert("left:300"); }}); t.add("state1"); t.to("#div1",2,{width:300,onComplete:function(){ alert("width:300"); }}); t.add("state2"); <strong>t.clear();</strong> //清除state2之前的所有动画，后面的动画依然继续执行 t.to("#div1",2,{height:300}); t.add("state3"); }); </script> |
seek()、time()、clear()综合使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script> // seek()：完成指定的动画（无过渡） // 参数说明： // 1. 指定时间或状态 // 2. 【可选】布尔值 // true：不执行函数 默认 // false: 执行函数 // time()：动画已执行的时间 // clear()：清除所有动画 $(function(){ var t =new TimelineMax(); t.to("#div1",2,{left:300,onComplete:function(){ alert("left:300"); }}); t.add("state1"); t.to("#div1",2,{width:300,onComplete:function(){ alert("width:300"); }}); t.add("state2"); // t.clear(); //清除所有动画 t.to("#div1",2,{height:300}); t.add("state3"); // t.stop(); t.seek("state3",false); console.log(t.time()); //6 //动画已执行的时间 }); </script><strong><em> </em></strong> |
staggerTo()：添加动画
staggerTo("元素选择器或对象",持续时间,对象,动画延迟发生时间);
totalDuration()：获取动画的总时长
getLabelTime()：返回从开始到当前状态的时间
1、staggerTo()：添加动画
参数说明：
|
1 2 3 4 5 6 |
1. 元素选择器或对象 2. 持续时间 3. 对象 变化的属性->值 4. 【可选】动画延迟发生时间 可写数字，“-=0.5”，“+=0.5“ |
页面布局
XHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script src="./../js/jquery-2.1.4.min.js"></script> <script src="./../js/TweenMax.js"></script> <style> html,body{ margin: 0; padding: 0; } .box{ width:100px; height:100px; background: #8D121A; margin:1px 0; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </body> |
staggerTo("元素选择器或对象",持续时间,对象,动画延迟发生时间);
|
1 2 3 4 5 6 7 8 9 |
<script> $(function(){ var t =new TimelineMax(); //t.to(".box",1,{width:300},1); <strong> t.staggerTo(".box",2,{width:300},1); </strong> //staggerTo()与to()的区别在于在设置相同的延迟时间的情况下， //to()下的所有动画会同时进行，而staggerTo()下的动画会一个接着一个依次执行 }); </script> |
2、 totalDuration()：获取动画的总时长
页面布局
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> html,body{ margin: 0; padding: 0; } .div1{ width:100px; height:100px; background: #8D121A; position: absolute; top:0; left:0; } </style> |
|
1 2 3 |
<body> <div class="div1"></div> </body> |
totalDuration()
|
1 2 3 4 5 6 7 8 9 |
<script> $(function(){ var t =new TimelineMax(); t.to(".div1",1,{left:300},1); t.to(".div1",1,{width:300},"+=1"); t.to(".div1",1,{height:300}); <strong> console.log(t.totalDuration());</strong>//5 //获取动画的总时长 }); </script> |
3、getLabelTime()：返回从开始到当前状态的时间
参数说明：
|
1 2 |
1. 状态的字符串 返回值是一个数字 |
getLabelTime(字符串)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(function(){ var t =new TimelineMax(); t.add("state1"); t.to(".div1",1,{left:300},1); t.add("state2"); t.to(".div1",1,{width:300},"+=1"); t.add("state3"); t.to(".div1",1,{height:300}); console.log(<strong>t.getLabelTime("state2")</strong>); //2 //返回从开始到当前状态的时间 }); </script> |
