动画库 Tweenmax 使用示例2 - 事件和状态

来源：互联网发布：淘宝自拍照布灯编辑：程序博客网时间：2024/04/29 23:14

在动画结束后触发onComplete

回调写在to()方法的第三个参数内

<!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,                onComplete: function () {                    alert("动画执行结束");                }            });        });    </script></head><body>    <div id="div1"></div></body></html>

在反向动画结束后触发onReverseComplete

回调写在to()方法的第三个参数内

<!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,                onReverseComplete: function () {                    alert("反向动画执行结束");                }            });            //反向播放按钮            $("#reverse").click(function () {                t.reverse();            });        });    </script></head><body>    <input type="button" id="reverse" value="反向播放" />    <div id="div1"></div></body></html>

给动画添加状态(标签)add(),使动画可以分段执行tweenTo()

<!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: 0; }    </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 });                //添加状态1                t.add("state1");            t.to("#div1", 1, { height: 300 });            t.to("#div1", 1, { top: 300 });                //添加状态2                t.add("state2");            t.to("#div1", 1, { rotationZ: 180 });            t.to("#div1", 1, { opacity: 0 });                //添加状态3                t.add("state3");            //先把动画停止            t.stop();            //指定动画执行到状态1            t.tweenTo("state1");        });    </script></head><body>    <div id="div1"></div></body></html>

在动画过程中方便的添加回调add()

add方法不但可以传入一个字符串作为状态标识,也可以传入一个回调函数

这个回调在add之前的动画执行完成后触发

<!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: 0; }    </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 });                //用add方法添加一个回调                t.add(function () {                    $("#div1").css("background","pink");                });            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>

运行动画至指定的时间(秒)tweenTo()

add方法不但可以传入一个字符串作为执行到哪个状态,也可以传入一个int

这个int描述将动画执行到第x秒

<!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: 0; }    </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.tweenTo(3);        });    </script></head><body>    <div id="div1"></div></body></html>

完成动画至指定的时间或状态seek()

tweenTo()是执行动画

seek()则是完成动画,没有过渡效果

seek()到某一状态

<!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: 0; }    </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 });                //添加状态1                t.add("state1");            t.to("#div1", 1, { height: 300 });            t.to("#div1", 1, { top: 300 });                //添加状态2                t.add("state2");            t.to("#div1", 1, { rotationZ: 180 });            t.to("#div1", 1, { opacity: 0 });                //添加状态3                t.add("state3");            //先把动画停止            t.stop();            //指定动画完成到状态2            t.seek("state2");        });    </script></head><body>    <div id="div1"></div></body></html>

seek()到某一时间

<!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: 0; }    </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 });                //添加状态1                t.add("state1");            t.to("#div1", 1, { height: 300 });            t.to("#div1", 1, { top: 300 });                //添加状态2                t.add("state2");            t.to("#div1", 1, { rotationZ: 180 });            t.to("#div1", 1, { opacity: 0 });                //添加状态3                t.add("state3");            //先把动画停止            t.stop();            //指定动画完成到第5秒            t.seek( 5 );        });    </script></head><body>    <div id="div1"></div></body></html>

在seek()下,动画其实也是每一行动画都依次执行了,只是没有过渡效果

seek()第二个参,是否跳过回调函数,默认为ture

<!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: 0; }    </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,                onComplete: function myfunction() {                    alert("执行了回调");                }            });            t.to("#div1", 1, { width: 300 });                //添加状态1                t.add("state1");            t.to("#div1", 1, { height: 300 });            t.to("#div1", 1, { top: 300 });                //添加状态2                t.add("state2");            t.to("#div1", 1, { rotationZ: 180 });            t.to("#div1", 1, { opacity: 0 });                //添加状态3                t.add("state3");            //先把动画停止            t.stop();            //指定动画完成到state2,且不跳过回调            t.seek("state2", false);        });    </script></head><body>    <div id="div1"></div></body></html>

0 0