TweenMax的学习

TweenMax的介绍

一般情况下我们使用jquery必须使用animate,然后后面接回调函数才能操作动画。
它最大的弊端就是操作不了时间。不方便。比如我就想要运动过程中在第三秒输出一句话，他很难实现.
所以这个时候TweenMax诞生了。他完美的解决了这个问题
TweenMax在使用的时候他必须要首先调用jquery 否则他实现不了

TweenMax使用介绍

在使用之前无论如何都必须要创建一个对象,所有的方法都是围绕这个对象进行

var move = new TimelineMax(); //创建对象

move.to(argument1,argument2,argument3,argument4)
to方法就是绑定动画效果,他一共接受4个参数
第一个参数: 元素名称例如 "#nav"表示绑定的是id是nav的元素
第二个参数: 动画的时间表示执行一个动画要多久
第三个参数: 表示要改变的属性。注意他只能是对象,并且值里面不加单位
- 例如{"left":300,"width":200}
- 这里要特别注意的就是onComplete:function(){}表示的是动画完成后要执行的方法
- onReverseComplete:function(){} //表示动画反转完成后要执行的方法
- ease:Bounce.easeIn, //表示运动的形式。(了解就好)
- 完整版本的:
```
t.to("#div1",1,{ease:Bounce.easeIn,left:300,width:300,onComplete:function(){console.log("第一个动画正序结束")},onReverseComplete:function(){console.log("第一个动画倒序结束")}},1);
```
第四个参数:表示的就是延迟时间表示等待的时间
- 一般情况下他后面接受的是数字，但是你要是想每个动画都需要延迟的话只有 "+=1"或者"-=1"
- 这里特别注意的就是""引号千万不能少
- 1表示的就是1S 你要是想500MS可以用 0.5s
动画效果见下边

动画效果.gif

对应的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>TweenMax</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/TweenMax.js"></script>
</head>
<style>
    *{margin:0px;padding:0px;}
    #div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:0px;}
    input{margin-top:100px;}
</style>
<body>
<div id="div1"></div>

</body>
<script>
    $(function(){
        //首先第一步必须要new一个对象
        var t  = new TimelineMax();
       //t.stop();  //这样一上来就阻止运行了。只有点击播放按钮才运行。他肯定封装了exit()方法
        //利用to方法绑定动画事件
        //4个参数 第一个参数 元素 ,第二个参数时间,第三个参数改变的属性，必须是个对象,第四个动画延迟的时间 : 除了第一个可以写数组，剩下的要是想延迟就用"+=1" "-=1"必须加""
        //第三个参数里面还能封装个方法:onComplete() 运动结束后触发对应的函数
        //第三个参数里面封装的方法:onReverseComplete();反向运动结束后触发的函数
        //第三个参数里面还能用ease方法。获取到运动的表现形式。(了解就好)
        t.to("#div1",1,{ease:Bounce.easeIn,left:300,width:300,onComplete:function(){console.log("第一个动画正序结束")},onReverseComplete:function(){console.log("第一个动画倒序结束")}},1);  //同时变化
        t.to("#div1",2,{left:500},"+=1");    //不加单位，自己变化
        t.to("#div1",2,{rotationX:180});  //旋转这里封装的是rotation,自己变化
        t.to("#div1",2,{opacity:0});  //还能修改滤镜,自己变化
        t.to("#div1",2,{background:"blue"});
    })
</script>
</html>

to方法就到这了

播放与停止与反转

move.play();表示动画的播放
move.stop(); 表示动画的停止,一上来用一次这样动画不会自己播放
move.reverse(); //表示动画的反转。意思就是从后向前执行
效果图如下:

运动效果1.gif

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>TweenMax</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/TweenMax.js"></script>
</head>
<style>
    *{margin:0px;padding:0px;}
    #div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:0px;}
    input{margin-top:100px;}
</style>
<body>
<div id="div1"></div>
<input type="button" value="播放" id="play">
<input type="button" value="停止" id="pause">
<input type="button" value="反向" id="reverse">
</body>
<script>
    $(function(){
        //首先第一步必须要new一个对象
        var t  = new TimelineMax();
         t.stop();  //这样一上来就阻止运行了。只有点击播放按钮才运行。他肯定封装了exit()方法
        //利用to方法绑定动画事件
        //4个参数 第一个参数 元素 ,第二个参数时间,第三个参数改变的属性，必须是个对象,第四个动画延迟的时间 : 除了第一个可以写数组，剩下的要是想延迟就用"+=1" "-=1"必须加""
        //第三个参数里面还能封装个方法:onComplete() 运动结束后触发对应的函数
        //第三个参数里面封装的方法:onReverseComplete();反向运动结束后触发的函数
        //第三个参数里面还能用ease方法。获取到运动的表现形式。(了解就好)
        t.to("#div1",1,{ease:Bounce.easeIn,left:300,width:300,onComplete:function(){console.log("第一个动画正序结束")},onReverseComplete:function(){console.log("第一个动画倒序结束")}},1);  //同时变化
        t.to("#div1",2,{left:500},"+=1");    //不加单位，自己变化
        t.to("#div1",2,{rotationX:180});  //旋转这里封装的是rotation,自己变化
        t.to("#div1",2,{opacity:0});  //还能修改滤镜,自己变化
        t.to("#div1",2,{background:"blue"});
        $("#play").click(function(){
            t.play(); //播放按钮
        })
        $("#pause").click(function(){
            t.stop();   //暂停按钮
        })
        $("#reverse").click(function(){
            t.reverse();  //反向动画
        })
    })
</script>
</html>

插入状态和状态查询

move.add(arguments1) //参数可以是字符串,也可以是要执行的函数。。不过一般都是字符串.
move.tweenTo(arguments1) //参数可以使字符串。也可以是时间
move.seek(argument1) //等价于 tweenTo,只不过没有过渡了，直接切断.
move.clear(); //清除所有的动画
move.time(); //获取到时间

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>TweenMax</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/TweenMax.js"></script>
</head>
<style>
    *{margin:0px;padding:0px;}
    #div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:0px;}

</style>
<body>
<div id="div1"></div>
</body>
<script>
    $(function(){
        var t = new TimelineMax();
        /*
          add 表示增加个状态值。表示间隔的意思,参数可以是字符串也可以是函数主要还是状态
          tweenTo 表示运动到指定的状态值或者时间，后续不执行
          seek 作用和tewwnTo一样但是他没有过度效果，直接跳转了最终了
          clear 清除所有动画
         */
         t.stop();
         t.add("状态一开始");
         t.to("#div1",1,{left:300});
         t.add(function(){
             $("#div1").css({"background":"blue"})
         });
         t.add("状态二开始");
         t.to("#div1",2,{width:300});
         t.add("状态三开始");
         t.to("#div1",3,{height:300});
         t.clear();
         t.tweenTo("状态二开始");  //停止在间隔
         t.tweenTo(3);  //表示停止在3秒
         t.seek("状态二开始");  //这个就表示没有过度的效果，他会直接跳转到状态二的效果
    })
</script>
</html>

状态查询

move.getLabelTime(arguments1) //获取到从开始到当前状态的时间,参数就是一个状态,返回值就是时间
move.getLabelBefore(arguments) //获取上一个状态，传递的是一个时间数字，返回值是状态的字符串，如果没有则返回下一个状态返回null
move.getLabelAfter(arguments)//同上只不过获取到的是下一个状态
move.currentLabel():获取当前状态返回值是状态的字符串

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>TweenMax</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/TweenMax.js"></script>
</head>
<style>
    *{margin:0px;padding:0px;}
    #div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:0px;}

</style>
<body>
<div id="div1"></div>
</body>
<script>
    /*
      t.getLabelTime() 返回从开始到当前状态的时间 能传递一个参数就是状态的字符串。返回值是一个数字
      t.currentLabel():获取当前状态 返回值是状态的字符串
      t.getLabelAfter():获取下一个状态传递的是一个时间数字，返回值是状态的字符串，如果没有则返回下一个状态返回null
      t.getLabelBefore():同上
     */
    $(function(){
        var t = new TimelineMax();
        t.add("当前状态一");
        t.to("#div1",1,{"width":300,onComplete:getCurrentTime},1);
        t.add("当前状态二");
        t.to("#div1",2,{"left":300,onComplete:getCurrentTime},"+=1");
        t.add("当前状态三");
        t.to("#div1",3,{"height":500,onComplete:getCurrentTime},"+=1");
        t.add("当前状态四");
        t.to("#div1",3,{"background":"blue"});
        console.log(t.totalDuration());
        console.log(t.getLabelTime("当前状态四"));
        console.log(t.currentLabel());
        function getCurrentLabel(){
            console.log(t.currentLabel());
        }
        function getCurrentTime(){
            var time = t.getLabelTime(t.currentLabel());
            console.log(t.getLabelBefore(time));
        }
    })
</script>
</html>

动画的时间

move.time() //每一帧动画的时间
move.totalDuration() //获取动画的时长

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>TweenMax</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/TweenMax.js"></script>
</head>
<style>
    *{margin:0px;padding:0px;}
    #div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:0px;}

</style>
<body>
<div id="div1"></div>
</body>
<script>
    $(function(){
        var t = new TimelineMax;
        /*
          t.time 表示动画执行的时间
         t.totalDuration 表示获取动画总共的时间
         */
         t.stop();
         t.add("状态一开始");
         t.to("#div1",1,{left:300});
         t.add(function(){
             $("#div1").css({"background":"blue"})
         });
         t.add("状态二开始");
         t.to("#div1",2,{width:300});
         t.add("状态三开始");
         t.to("#div1",3,{height:300});
         t.clear();
         t.tweenTo("状态二开始");  //停止在间隔
         t.tweenTo(3);  //表示停止在3秒
         t.seek("状态二开始");  //这个就表示没有过度的效果，他会直接跳转到状态二的效果
        setInterval(function(){
            console.log(t.time())
        },16)
       console.log(t.totalDuration());
    })
</script>
</html>

TweenMax的学习

TweenMax的学习

TweenMax的介绍

TweenMax使用介绍

对应的代码

to方法就到这了

播放与停止与反转

插入状态和状态查询

状态查询

动画的时间

以上就掌握到这里

推荐阅读更多精彩内容