前端那些事儿 关注
手机版

TweenMax学习笔记整理

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

TweenMax学习笔记整理

cacao111 2018-07-11 09:14:42 浏览6184 评论0

摘要: 因为要做一个案例,里面用到了很多动画,TweenMax真的是一个很强大的动画库,所以就学了一点里面的方法,现在整理出来 官网:https://greensock.com/tweenmax 注意:这个动画库是基于jQuery的,所以使用前要先引入jQuery哦! 下面的所有方法都在TimelineM...

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

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

注意:这个动画库是基于jQuery的,所以使用前要先引入jQuery哦!

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

var t = new TimelineMax();

用到的方法整理:

to():添加动画;

参数说明:

  1.     元素选择器或对象
  2.     持续时间
  3.     对象(变化的属性->值)
  4.     【可选】动画延迟发生的时间(可写数字,“-=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()方法,我测试发现,其实第四个参数并不起作用,不管时间是多少,都是按照写的顺序依次执行,并且中间是没有间隔的

  1. <div class="div1"></div>
  2. <div class="div2"></div>
  3. <div class="div3"></div>


  1. $(function(){
  2. var t = new TimelineMax();
  3. t.staggerTo( ".div1",1,{width:300},2 );
  4. t.staggerTo( ".div2",3,{height:300},0);
  5. t.staggerTo( ".div3",1,{background:"blue"},-1);
  6. });


  1. 上面的执行顺序是先div1宽度变化,然后div2的height发生变化,最后是div3的background发生变化

  2. 第五个参数,代表一组动画整体提前或延迟多少执行
上面的是我自己经过不断测试得出的结论,如果有什么地方不正确,欢迎指正哦

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  如需转载请联系原作者

用云栖社区APP,舒服~

【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题,通过回答传承技术知识、经验、心得,问答专家期待你加入!  详情请点击

网友评论

cacao111
文章80篇 | 关注7
关注
阿里云机器学习是基于阿里云分布式计算引擎的一款机器学习算法平台。用户通过拖拉拽的方式可视化的... 查看详情
Node.js 性能平台(Node.js Performance Platform)是面向中... 查看详情
以阿里云成熟的商业化云服务为基础,为游戏开发者、运营企业提供专属集群、尊享VIP服务、专项扶... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
阿里云9.10会员日

阿里云9.10会员日