TweenMax学习笔记整理

刺骨的言语ヽ痛彻心扉 2022-05-22 06:47 276阅读 0赞

因为要做一个案例，里面用到了很多动画，TweenMax真的是一个很强大的动画库，所以就学了一点里面的方法，现在整理出来

官网：https://greensock.com/tweenmax

注意：这个动画库是基于jQuery的，所以使用前要先引入jQuery哦！

下面的所有方法都在TimelineMax对象下，要先得到动画实例，所以使用我下面的方法的时候要注意先写下面的代码：

var t = new TimelineMax();

用到的方法整理：

to():添加动画；

参数说明：

1.      元素选择器或对象
2.      持续时间
3.      对象（变化的属性->值）
4.      【可选】动画延迟发生的时间（可写数字，“-=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()方法语法和使用都一样，那两者不一样的地方就是，先看下面的例子吧！

<!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()方法，我测试发现，其实第四个参数并不起作用，不管时间是多少，都是按照写的顺序依次执行，并且中间是没有间隔的

$(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. 指定时间或状态的字符串

这两个方法一般都是结合使用的，所以先看例子呗

注意：当我们使用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>