本文主要介绍tweenmax
主要通过分析一个动画网站
做此网站用到的库：1、jquery——选择元素,绑定事件 2、TweenMax——做动画,管理动画状态 (http://greensock.com/timelinemax)
TimeLineMax库使用方法
1、得到动画的实例
new TimeLineMax()
2、to():添加动画
参数说明：
(1)元素选择器或对象
(2)持续时间
(3)对象 变化的属性——>值
(4)【可选】动画延迟发生时间 可写数字, " -=0.5 " , " +=0.5 "
Demo：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:0;}
</style>
<script>
$(function(){
var t=new TimelineMax();
//实例1：div1改变left值和width值
//t.to(‘#div1‘,1,{left:300,width:300});
//实例2：从上往下动画依次执行
t.to(‘#div1‘,1,{left:300},‘+=0.5‘);//延迟0.5秒
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});
//
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
3、play():播放动画
4、stop():停止动画
Demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
$(function(){
var t=new TimelineMax();
t.to(‘#div1‘,1,{left:300});// ‘+=1‘表示延迟1秒执行
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});
$(‘#play‘).click(function(){
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>
5、reverse():反向动画
Demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
$(function(){
var t=new TimelineMax();
t.to(‘#div1‘,1,{left:300});// ‘+=1‘表示延迟1秒执行
$(‘#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>
时间： 2024-12-16 06:02:19