馬老師 雲端研究室

Passion inspires professional

馬老師 雲端研究室

利用TweenMax針對HTML頁面製作動畫 – CSS篇

by · 2012-07-30

前一篇文章跟大家分享了如何利用TweenMax在HTML裡面製作基礎的動畫，接下來示範如何利用TweenMax來控制CSS的效果，當然前置作業跟之前相同，這邊就不多提，但在TweenMax內需加上CSS的控制項目，大致的語法如下：

TweenMax.to(物件,動畫秒數,{css:{樣式名稱:值},ease:動畫模式});

其實跟前篇文章大致相同，只是在動畫的部分要利用「css:{}」這段語法來包含欲更改的樣式，以下是更改寬度和高度的範例：

TweenMax.to(div,1,{css:{width:100, height:200},ease:Expo.easeOut});

接下來為各位示範一下在網頁上製作動畫的範例，這是第一個範例，主要為Div移動的效果，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Move</title>
    <style type="text/css">
        #box {
            height: 200px;
            width: 200px;
            position: absolute;
            background-color: #9CF;
        }

        /* box div 的樣式 */
    </style>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        window.onload = moveFn;

        function moveFn() {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var divX = "0px" /* 利用變數儲存div預設的x位置 */
            var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
            var moveX = window.innerWidth / 2 - 100 + "px"
            div.style.left = divX div.style.top = divY TweenMax.to(div, 1, {
                css: {
                    left: moveX
                },
                ease: Expo.easeOut
            });
        }
    </script>
</head>
<body style="background-color:#FFF">
    <div id="box"></div>
</body>
</html>

延續上面，接下來第二個範例程式碼大致與上面相同，只是增加了div變形和旋轉的效果，可以看得出來除了CSS本身的樣式之外，還可以利用TweenMax所提供的scale和rotation來製作動畫，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Move</title>
    <style type="text/css">
        #box {
            height: 200px;
            width: 200px;
            position: absolute;
            background-color: #9CF;
        }

        /* box div 的樣式 */
    </style>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        window.onload = moveFn;

        function moveFn() {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var divX = "0px" /* 利用變數儲存div預設的x位置 */
            var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
            var moveX = window.innerWidth / 2 - 100 + "px"
            div.style.left = divX div.style.top = divY TweenMax.to(div, 1, {
                css: {
                    left: moveX
                },
                ease: Expo.easeOut
            });
            TweenMax.to(div, 1, {
                css: {
                    scale: 2,
                    rotation: 90
                },
                delay: 1,
                ease: Expo.easeOut
            });
        }
    </script>
</head>
<body style="background-color:#FFF">
    <div id="box"></div>
</body>
</html>

接下來第三個案例加上了更換背景顏色的部分，背景顏色更換的部分，要注意語法跟css的背景顏色樣式名稱有所不同，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Move</title>
    <style type="text/css">
        #box {
            height: 200px;
            width: 200px;
            position: absolute;
            background-color: #9CF;
        }

        /* box div 的樣式 */
    </style>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        window.onload = moveFn;

        function moveFn() {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var divX = "0px" /* 利用變數儲存div預設的x位置 */
            var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
            var moveX = window.innerWidth / 2 - 100 + "px"
            div.style.left = divX div.style.top = divY TweenMax.to(div, 1, {
                css: {
                    left: moveX
                },
                ease: Expo.easeOut
            });
            TweenMax.to(div, 1, {
                css: {
                    scale: 2,
                    rotation: 90
                },
                delay: 1,
                ease: Expo.easeOut
            });
            TweenMax.to(div, 3, {
                css: {
                    backgroundColor: "#EEEEEE"
                },
                delay: 2,
                ease: Expo.easeOut
            });
        }
    </script>
</head>
<body style="background-color:#FFF">
    <div id="box"></div>
</body>
</html>

接下來第四個案例是利用TimelineMax來輔助製作這段動畫，可以看的出來上面範例都在使用delay來決定動畫播放順序，但在前面的文章中有提到TimelineMax可以協助我們來掌握動畫播放的順序，所以本範例更改為利用TimelineMax來製作動畫，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Move</title>
    <style type="text/css">
        #box {
            height: 200px;
            width: 200px;
            position: absolute;
            background-color: #9CF;
        }

        /* box div 的樣式 */
    </style>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        window.onload = moveFn;

        function moveFn() {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var divX = "0px" /* 利用變數儲存div預設的x位置 */
            var divY = window.innerHeight / 2 - 100 + "px"; /* 利用變數儲存div預設的y位置 */
            var moveX = window.innerWidth / 2 - 100 + "px"
            div.style.left = divX div.style.top = divY
            var tMax = new TimelineMax;
            tMax.to(div, 1, {
                css: {
                    left: moveX
                },
                ease: Expo.easeOut
            });
            tMax.to(div, 1, {
                css: {
                    scale: 2,
                    rotation: 90
                },
                ease: Expo.easeOut
            });
            tMax.to(div, 3, {
                css: {
                    backgroundColor: "#EEEEEE"
                },
                ease: Expo.easeOut
            });
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

看了上面的幾個案例之後，在這邊也來製作幾個比較完整的範例供大家參考，首先是第一個範例，利用文字連結來更換div內容的效果，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Sample 1</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            font-size: 13px;
        }

        #box {
            height: 450px;
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            background-color: #EEE;
        }

        /* box div 的樣式 （內容div） */
        #content {
            padding: 10px 10px 0px 10px;
            line-height: 26px;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        /* content div 的樣式 （內容p） */
        #btn {
            height: 30px;
            width: 600px;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            padding-top: 10px;
        }

        #btn a {
            margin: 5px;
        }

        /* btn div 的樣式 （下方文字連結div） */
    </style>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        var intro1 =
            "<p style='text-align:center;'><img src='ford/p1.jpg' style='border:1px solid #000; background-color:#FFFFFF'></p><p>全新導入的運動模式（S-Mode），讓變速箱升檔時機往後遞延，以維持較高的引擎轉速再進行換檔，充分提升駕駛加速感受。在中高速行駛時，運動模式可提供更及時的降檔反應，使引擎仍可保持在扭力峰值的轉速範圍內，同時讓動力輸出對油門的反應更加靈敏，整體引擎動力的運動性大幅提升，創造最動感的馳騁體驗。</p>";
        var intro2 =
            "<p style='text-align:center;'><img src='ford/p2.jpg' style='border:1px solid #000; background-color:#FFFFFF'></p><p>高科技的雙離合器變速箱擁有自排、手排、上坡、下坡、高海拔修正、怠速、斜坡潛滑減緩、緊急安全八大模式。以手排齒輪箱為基礎，搭配平行排列濕式雙離合器機構，能在極短時間內完成換檔，沒有傳統自排變速箱的扭力頓挫感，加速也更加敏捷平順，且操作介面與傳統自排一樣簡易方便。</p>";
        var intro3 =
            "<p style='text-align:center;'><img src='ford/p3.jpg' style='border:1px solid #000; background-color:#FFFFFF'></p><p>全新高傳真CD/MP3/WMA音響主機，具備DSP數位音場設定、Clip失真檢測功能、智慧型音量控制、高傳真音效調整、AST電台頻道自動掃描儲存功能、位於中央扶手中AUX-IN功能的孔狀插槽與USB插槽（包含一般MP3裝置與iPod主機連結功能），是目前同等級房車中與iPod整合性最高的機種。</p>"; /* 以上為利用三個變數儲存不同的網頁內容 */
        window.onload = moveFn; /* 網頁載入時執行moveFn */
        function moveFn() {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var intro = document.getElementById("content"); /* 利用intro變數儲存ID名稱為content的物件 */
            intro.innerHTML = intro1; /* 設定content的div內容為第一個連結的內容 */
            var tMax = new TimelineMax;
            tMax.from(div, 0.5, {
                css: {
                    scale: 0
                },
                ease: Expo.easeOut
            });
            tMax.from(intro, 1, {
                css: {
                    alpha: 0
                }
            }); /* 以動畫的方式呈現內容 */
        }

        function changeFn(no) {
            var div = document.getElementById("box"); /* 利用div變數儲存ID名稱為box的物件 */
            var intro = document.getElementById("content"); /* 利用intro變數儲存ID名稱為content的物件 */
            var tMax = new TimelineMax;
            tMax.to(intro, 0, {
                css: {
                    alpha: 0
                }
            });
            tMax.to(div, 0.5, {
                css: {
                    scale: 0
                },
                ease: Expo.easeOut
            });
            tMax.to(div, 0.5, {
                css: {
                    scale: 1
                },
                ease: Expo.easeOut
            });
            tMax.to(intro, 1, {
                css: {
                    alpha: 1
                }
            });
            switch (no) {
                case 1:
                    intro.innerHTML = intro1;
                    break;
                case 2:
                    intro.innerHTML = intro2;
                    break;
                case 3:
                    intro.innerHTML = intro3;
                    break;
            }
        }
    </script>
</head>
<body style="background-color:#FFF">
    <div id="box">
        <p id="content"></p>
    </div>
    <div id="btn"><a href="javascript:;" onClick="changeFn(1)">運動模式</a><a href="javascript:;"
            onClick="changeFn(2)">雙離合器</a><a href="javascript:;" onClick="changeFn(3)">整合音響</a></div>
</body>
</html>

接下來的範例是利用TweenMax來設計讓一個div永遠保持在畫面左邊中間的效果，下面是本範例整個網頁的程式碼：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening CSS Sample 2</title>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        window.onload = init; //網頁載入時執行init
        window.onscroll = init; //捲動網頁時執行init
        window.onresize = init; //網頁更改尺寸時執行init
        function init(){
            var div=document.getElementById("bannerDiv");
            //利用div變數儲存網頁上ID為bannerDiv的物件（即為放圖片的Div）
            var banner=document.getElementById("tweenMax");
            //利用banner變數儲存網頁上ID為tweenMax的物件（即為圖片本身）
            positionY= window.innerHeight/2-banner.height+window.pageYOffset;
            //利用PositionY儲存在畫面中Div應該出現的座標位置
            TweenMax.to(div,1,{css:{top:positionY},ease:Elastic.easeOut});
            //利用TweenMax將Div移動到上面所儲存的位置
        } 
    </script>
    <style type="text/css">
        #bannerDiv {
            height: 54px;
            width: 108px;
            position: absolute;
        }
    </style>
</head>

<body style="background-color:#FFF">
    <div id="bannerDiv"><img src="mw_tweenmax.gif" name="tweenMax" width="108" height="54" id="tweenMax" /></div>
    <div
        style="width:400px; height:2000px; background-color:#EEE; margin-left:auto; margin-right:auto; font-size:13px; text-align:center">
        網頁內容</div>
</body>

</html>

看完了上面幾個範例之後，相信大家可以利用TweenMax搭配HTML和Javascript來取代更多需要Flash才可以完成的效果了，祝大家設計順利！

Tags:

You may also like...

48,701 Responses

  1. JasonWal表示:
    2023-12-2811:57:45

    paxlovid cost without insurance: paxlovid buy – paxlovid pill

    回覆
  2. Hermanges表示:
    2023-12-2809:32:45

    amoxicillin medicine amoxicillin capsules 250mg amoxicillin 250 mg price in india

    回覆
  3. JasonWal表示:
    2023-12-2809:03:42

    can you buy amoxicillin over the counter canada: amoxicillin 500mg tablets price in india – amoxicillin 500 coupon

    回覆
  4. JasonWal表示:
    2023-12-2806:04:19

    average cost of prednisone: mail order prednisone – buy prednisone 10 mg

    回覆
  5. JasonWal表示:
    2023-12-2802:32:48

    antibiotics cipro: buy ciprofloxacin over the counter – buy ciprofloxacin over the counter

    回覆
  6. Raymondsmero表示:
    2023-12-2800:38:06

    https://clomid.site/# can i order generic clomid

    回覆
  7. JasonWal表示:
    2023-12-2722:53:42

    where to buy amoxicillin 500mg without prescription: amoxicillin no prescipion – amoxicillin canada price

    回覆
  8. JasonWal表示:
    2023-12-2719:28:04

    get cheap clomid price: cost generic clomid without insurance – can you buy clomid for sale

    回覆
  9. Hermanges表示:
    2023-12-2716:11:40

    cipro ciprofloxacin generic price buy cipro cheap

    回覆
  10. JasonWal表示:
    2023-12-2716:06:35

    buy prednisone online without a prescription: prednisone 12 tablets price – order prednisone with mastercard debit

    回覆
  11. JasonWal表示:
    2023-12-2713:00:51

    how to get generic clomid no prescription: can i purchase cheap clomid without rx – can i order clomid without prescription

    回覆
  12. BrianDutle表示:
    2023-12-2710:18:50

    https://ciprofloxacin.life/# ciprofloxacin 500 mg tablet price

    回覆
  13. JasonWal表示:
    2023-12-2710:02:26

    generic amoxicillin 500mg: amoxicillin price canada – amoxicillin 500mg capsules

    回覆
  14. JasonWal表示:
    2023-12-2707:15:16

    get clomid: where buy cheap clomid without prescription – can you buy generic clomid without prescription

    回覆
  15. Raymondsmero表示:
    2023-12-2706:48:00

    http://amoxil.icu/# can you buy amoxicillin uk

    回覆
  16. JasonWal表示:
    2023-12-2704:08:19

    paxlovid covid: paxlovid india – paxlovid for sale

    回覆
  17. Hermanges表示:
    2023-12-2702:20:27

    buying generic clomid price how to buy clomid without dr prescription can you buy cheap clomid for sale

    回覆
  18. JasonWal表示:
    2023-12-2700:08:25

    prednisone ordering online: prednisone otc uk – prednisone 5 mg tablet cost

    回覆
  19. JasonWal表示:
    2023-12-2620:49:27

    generic clomid tablets: where to get cheap clomid – where buy cheap clomid pill

    回覆
  20. JasonWal表示:
    2023-12-2617:37:41

    ciprofloxacin generic: buy cipro online – where can i buy cipro online

    回覆
  21. Raymondsmero表示:
    2023-12-2617:15:20

    https://ciprofloxacin.life/# ciprofloxacin 500 mg tablet price

    回覆
  22. Joshuafab表示:
    2023-12-2614:20:31

    http://canadapharmacy.guru/# canadian pharmacy world reviews canadapharmacy.guru

    回覆
  23. Wilfredtar表示:
    2023-12-2613:27:58

    online pharmacy india online shopping pharmacy india – п»їlegitimate online pharmacies india indiapharmacy.guru

    回覆
  24. RalphBic表示:
    2023-12-2612:50:58

    https://canadiandrugs.tech/# canadian king pharmacy canadiandrugs.tech

    回覆
  25. JeffreyAmush表示:
    2023-12-2612:49:49

    canadian world pharmacy safe canadian pharmacies canadian neighbor pharmacy canadiandrugs.tech

    回覆
  26. RalphBic表示:
    2023-12-2610:02:10

    http://edpills.tech/# ed medications edpills.tech

    回覆
  27. RalphBic表示:
    2023-12-2607:19:23

    https://canadiandrugs.tech/# canadian pharmacy prices canadiandrugs.tech

    回覆
  28. RalphBic表示:
    2023-12-2604:06:53

    http://canadiandrugs.tech/# legit canadian pharmacy online canadiandrugs.tech

    回覆
  29. RalphBic表示:
    2023-12-2600:39:57

    http://indiapharmacy.guru/# online pharmacy india indiapharmacy.guru

    回覆
  30. sitemap表示:
    2023-12-2600:17:56

    Whoa! This blog looks jut like mmy oldd one! It’s onn a completedly differennt opic bbut iit hass pretty mufh the same page
    layout and design. Wonderful chhoice oof colors!

    回覆

發佈回覆給「RalphBic」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。