因为要做一个案例,里面用到了很多动画,TweenMax真的是一个很强大的动画库,所以就学了一点里面的方法,现在整理出来
官网:https://greensock.com/tweenmax
注意:这个动画库是基于jQuery的,所以使用前要先引入jQuery哦!
下面的所有方法都在TimelineMax对象下,要先得到动画实例,所以使用我下面的方法的时候要注意先写下面的代码:
var t = new TimelineMax();
用到的方法整理:
to():添加动画;
参数说明:
- 元素选择器或对象
- 持续时间
- 对象(变化的属性->值)
- 【可选】动画延迟发生的时间(可写数字,“-=0.5”,“+=0.5”)
一例胜千言,嗯,先看看下面的小实例
<!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:0; } </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.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:300} ); t.to( "#div1",2,{rotationZ:180} ); t.to( "#div1",2,{opacity: 0} ); }) </script> </head> <body> <div id="div1"></div> </body> </html>
在这个例子中,等待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. 【可选】动画延迟发生时间
可写数字,“-=0.5”,“+=0.5“
这个方法和t.to()方法语法和使用都一样,那两者不一样的地方就是,先看下面的例子吧!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.8.3.js"></script> <script src="js/TweenMax.js"></script> <style> .div1{ width:100px; height:100px; positionn:absolute; background:red; margin-top:10px; } </style> </head> <body> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <script> $(function(){ var t = new TimelineMax(); // t.to( ".div1",1,{width:300} ); t.staggerTo( ".div1",1,{width:300},1 ); }); </script> </body> </html>
在这个例子中,如果我们没有加第四个参数的时候,两者的效果是一样的,即所有的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>