動畫庫 Tweenmax 使用示例2 - 事件和狀態

在動畫結束後觸發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>

動畫庫 Tweenmax 使用示例2 - 事件和狀態

在動畫結束後觸發onComplete

在反向動畫結束後觸發onReverseComplete

給動畫添加狀態(標籤)add(),使動畫可以分段執行tweenTo()

在動畫過程中方便的添加回調add()

運行動畫至指定的時間(秒)tweenTo()

完成動畫至指定的時間或狀態seek()

[軟件工具百科] 互聯網資源歷史快照歸檔站點與數字圖書館

網易面試：SpringBoot如何開啓虛擬線程？

杭州的 IT 崩盤了麼？

程序員常見的文本查看工具

VS2022 解決方案打不開 .NET Framework 4.0 、 4.5 等老項目

Vue3 運行可以，build 打包發佈報錯，app.config.globalProperties 用法坑

既然測試也要求寫代碼，那乾脆讓開發兼任測試不就好了嗎？

ITSM落地經驗之建設藍圖規劃

PDF 補丁丁 1.0.2 版更新

奇怪！應用的日誌呢？？

動畫庫 Tweenmax 使用示例1 - 執行動畫

動畫庫 Tweenmax 使用示例2 - 事件和狀態

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結