TweenMax学习记录三

14、totalDuration():获取动画的总时长

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">
*{ padding:0; margin:0;}
#div1{ width:100px; height:100px; background:red; margin:6px 0; position:absolute; left:0; top:0;}
</style>
<script>
$(function(){
    var t=new TimelineMax();
    t.to('#div1',1,{left:300},4);
    t.to('#div1',2,{width:300},'+=1');
    t.to('#div1',3,{height:300});
    alert(t.totalDuration());

})
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

View Code

15、getLabelTime():返回从开始到当前状态的时间
参数说明：1、状态的字符串返回值是一个数字

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">
*{ padding:0; margin:0;}
#div1{ width:100px; height:100px; background:red; margin:6px 0; position:absolute; left:0; top:0;}
</style>
<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");
    alert(t.getLabelTime("state3"));

})
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

View Code

16、currentLable():获取当前状态返回值是状态的字符串

<!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">
*{ padding:0; margin:0;}
#div1{ width:100px; height:100px; background:red; margin:6px 0; position:absolute; left:0; top:0;}
</style>
<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.getLabelTime("state3"));
    getCurrentLabel();
    function getCurrentLabel(){
        alert(t.currentLabel());
        }

})
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

View Code

解释说明：getLabelTime()和currentLable()结合使用

获取当前状态开始到结束所使用的时间,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">
*{ padding:0; margin:0;}
#div1{ width:100px; height:100px; background:red; margin:6px 0; position:absolute; left:0; top:0;}
</style>
<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.getLabelTime("state3"));
    getCurrentLabel();
    function getCurrentLabel(){
        alert(t.getLabelTime(t.currentLabel()));
        }

})
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

View Code

17、getLabelAfter():获取下一个状态
参数说明：1、时间数字返回值是状态的字符串,如果没有下一个状态返回null

18、getLabelBefore():获取上一个状态
参数说明：1、时间数字返回值是状态的字符串,如果没有上一个状态返回null

<!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">
*{ padding:0; margin:0;}
#div1{ width:100px; height:100px; background:red; margin:6px 0; position:absolute; left:0; top:0;}
</style>
<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");
    
    getCurrentLabel();
    function getCurrentLabel(){
        
        var currentTime=t.getLabelTime(t.currentLabel());//获取当前状态的当前时间
        //获取到上一个状态
        var beforeLable=t.getLabelBefore(currentTime);
        //获取下一个状态
        var afterLabel=t.getLabelAfter(currentTime);
        var str="<p>上一个状态："+beforeLable+"</p><p>当前状态："+t.currentLabel()+"</p><p>下一个状态："+afterLabel+"</p>";
        $("#label").html(str);
        }

})
</script>
</head>

<body>
<div id="label"></div>
<div id="div1"></div>
</body>
</html>

View Code

19、ease：动画运动形式查看本地例子

Tween类型：

Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce

ease类型：

easeIn easeOut easeInOut

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">
*{ padding:0; margin:0;}
#div1{ width:100px; height:100px; background:red; margin:6px 0; position:absolute; left:0; top:0;}
</style>
<script>
$(function(){
    var t=new TimelineMax();
    t.add("state1");
    t.to('#div1',1,{left:300,ease:Bounce.easeOut});
    t.to('#div1',2,{width:300,onComplete:function(){getCurrentLabel();}});
    t.add("state2");
    t.to('#div1',3,{height:300,onComplete:function(){getCurrentLabel();}});
    t.add("state3");
    

})
</script>
</head>

<body>
<div id="label"></div>
<div id="div1"></div>
</body>
</html>

View Code

posted @ 2015-12-21 17:14 cacti_vc 阅读(174) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

cacti_vc

TweenMax学习记录三

公告