TweenMax学习记录一

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

 6、onComplete():运动结束后触发对应的函数

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,onComplete:function(){
        alert('left:300')
        }});// onComplete 运动结束后触发对应的函数

    $('#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

7、onReverseComplete():反向运动结束后触发对应的函数

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,onComplete:function(){
        alert('left:300')},onReverseComplete:function(){
            alert('反向left:300');
            }
        });// onComplete 运动结束后触发对应的函数

    $('#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

 

posted @ 2015-12-17 09:41  cacti_vc  阅读(203)  评论(0)  编辑  收藏  举报