TweenMax学习笔记整理
因为要做一个案例，里面用到了很多动画，TweenMax真的是一个很强大的动画库，所以就学了一点里面的方法，现在整理出来 官网：https://greensock.com/tweenmax 注意：这个动画库是基于jQuery的，所以使用前要先引入jQuery哦！ 下面的所有方法都在TimelineMax对象下，要先得到动画实例，所以使用我下面的方法的时候要注意先写下面的代码： var t = new TimelineMax(); 用到的方法整理： to():添加动画； 参数说明： 元素选择器或对象 持续时间 对象（变化的属性->值） 【可选】动画延迟发生的时间（可写数字，“-=0.5”，“+=0.5”） 一例胜千言，嗯，先看看下面的小实例 在这个例子中，等待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()方法语法和使用都一样，那两者不一样的地方就是，先看下面的例子吧！ 在这个例子中，如果我们没有加第四个参数的时候，两者的效果是一样的，即所有的div都同时执行，然后同时到达目标点 但是如果我们加了第四个参数的话，使用t.to()方法的时候，所有的div还是同时执行，但是如果我们使用的是t.staggerTo()，后面的div都会等到前面的div执行完成之后再执行（不是一起执行，而是依次执行） 注意：个人比较建议使用这个方法，一般是针对一类元素，然后，第四个参数，如果为正数，代表正序执行，绝对值代表延迟时间，如果是负数，则表示倒序执行，绝对值也是延迟时间（个人测试得出的结论） 如果是不同的类别元素使用t.staggerTo()方法，我测试发现，其实第四个参数并不起作用，不管时间是多少，都是按照写的顺序依次执行，并且中间是没有间隔的 <div class="div1"> </div> <div class="div2"> </div> <div class="div3"> </div> $(function(){ 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如需转载请联系原作者
