TweenMax学习记录一

时间：2015-12-17 10:35:31 阅读：290 评论：0 收藏：0 [点我收藏+]

标签：

本文主要介绍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>

View Code

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>

View Code

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>

View Code

TweenMax学习记录一

标签：

原文地址：http://www.cnblogs.com/cacti/p/5053085.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行