动画库 Tweenmax 使用示例1 - 执行动画

来源：互联网发布：长沙知豆电动车租赁编辑：程序博客网时间：2024/05/16 16:24

TweenMax 建立在TweenLite 核心类以及它的大哥TweenFilterLite 基础之上，它为Tween 家族增加了新的受欢迎的功能（尽管只是锦上添花），从而使家族更加的壮大，比如贝赛尔缓动、暂停/继续能力，简便的连续缓、16进制颜色缓动、以及更多的内容。

直接开始!!!

得到动画的实例 new

TweenMax提供了TimelineMax()方法用来得到实例

TweenMax依赖jQuery

<script src="js/jquery-1.11.1.min.js"></script><script src="js/uncompressed/TweenMax.js"></script><script>        $(function () {            var t = new TimelineMax();        });</script>

添加动画 to()

to()方法参数说明

1. 元素选择器或对象2. 持续时间3. 对象4. 【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5"

页面中插入一个div

<style>    #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; }</style><body>    <div id="div1"></div></body>

执行单条动画

<script>    t.to("#div1", 1, { left: 300 });</script>

执行组合动画

<script>    t.to("#div1", 1, { left: 300, width: 300 });</script>

执行队列动画,列表中的动画会依次执行

<script>    t.to("#div1", 1, { left: 300 });    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>

通过这样的动画队列,代码比以前利用回调函数来写要清晰很多

添加第四个参数设置动画的延迟时间

<script>    //动画延迟一秒执行    t.to("#div1", 1, { left: 300, width: 300 }, 1);    //第二条动画没有延迟时间,所以等第一条动画执行完成后立刻执行第二条动画    t.to("#div1", 1, { width: 300 });</script>

<script>    //动画延迟一秒执行    t.to("#div1", 1, { left: 300, width: 300 }, 1);    //第二条动画也是延迟一秒执行,会和第一条动画同时延迟一毛执行    t.to("#div1", 1, { width: 300 }, 1);</script>

延迟执行第二条动画

<script>    //动画延迟一秒执行    t.to("#div1", 1, { left: 300, width: 300 }, 1);    //实现第一条动画完成后,延迟一秒,执行第二条动画    t.to("#div1", 1, { width: 300 }, 3);</script>

延迟执行第二条动画(便捷写法)

<script>    //动画延迟一秒执行    t.to("#div1", 1, { left: 300, width: 300 }, 1);    t.to("#div1", 1, { width: 300 }, "+=1");</script>

让第二条动画指令立刻执行

<script>    //动画延迟一秒执行    t.to("#div1", 1, { left: 300, width: 300 }, 1);    //第四个参数设0后,动画会立刻执行    t.to("#div1", 1, { width: 300 }, 0);</script>

动画的停止与播放

通过play()方法与stop()方法来控制

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style>        #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 50px; }    </style>    <script src="js/jquery-1.11.1.min.js"></script>    <script src="js/uncompressed/TweenMax.js"></script>    <script>        $(function () {            //得到对象            var t = new TimelineMax();            //队列动画            t.to("#div1", 1, { left: 300, width: 300 });            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 });            //先把动画停止            t.stop();            //播放动画按钮            $("#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>

反向执行动画

通过reverse()方法让动画反向执行

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style>        #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 50px; }    </style>    <script src="js/jquery-1.11.1.min.js"></script>    <script src="js/uncompressed/TweenMax.js"></script>    <script>        $(function () {            //得到对象            var t = new TimelineMax();            //队列动画            t.to("#div1", 1, { left: 300, width: 300 });            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 });            //反向播放按钮            $("#reverse").click(function () {                t.reverse();            });        });    </script></head><body>    <input type="button" id="reverse" value="反向播放" />    <div id="div1"></div></body></html>

1 0