zoukankan      html  css  js  c++  java
  • 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,300});
        
        //实例2:从上往下动画依次执行
        t.to('#div1',1,{left:300},'+=0.5');//延迟0.5秒
        t.to('#div1',1,{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,{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
  • 相关阅读:
    算法打基础——符号&递归解法
    算法打基础——算法基本分析
    最小生成树——Kruskal算法
    最小生成树——Prim算法
    物理DG主备库切换时遇到ORA-16139: media recovery required错误
    Dataguard 主库与备库的Service_Name 不一致时,如何配置客户端TNSName
    oracle 11g RAC 在Windows 7下安装
    关于存储大小的计量单位
    老家的亲戚关系
    Unity3D学习笔记——NGUI之UIInput
  • 原文地址:https://www.cnblogs.com/cacti/p/5053085.html
Copyright © 2011-2022 走看看