馬老師 雲端研究室

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...

11,946 Responses

  1. ремонт бытовой техники в волгограде表示:
    2024-09-2406:01:01

    Если вы искали где отремонтировать сломаную технику, обратите внимание – профи тех сервис волгоград

    回覆
  2. Edisonanazy表示:
    2024-09-2405:27:27

    comprare farmaci online all’estero: Farmacia online piu conveniente – Farmacia online piГ№ conveniente

    回覆
  3. HarryGed表示:
    2024-09-2404:32:05

    4rabet india promo code: A 4rabet bonus code allows users to unlock additional bonuses like free bets, deposit matches, or special offers across different sections of the platform, including sports betting and the casino. This code can be applied during registration or deposit to activate promotional offers.

    回覆
  4. PatrikNom表示:
    2024-09-2402:20:02

    Что такое мемы и как они появились

    回覆
  5. Edisonanazy表示:
    2024-09-2402:00:30

    viagra consegna in 24 ore pagamento alla consegna: acquisto viagra – cialis farmacia senza ricetta

    回覆
  6. DanielHit表示:
    2024-09-2401:19:16

    Предприятие «Кинематика»: Эффективные услуги для производственной уравновешивания и анализов промышленных устройств

    Организация «Кинематика» специализируется на изготовлении и выпуске прецизионных приборов для сбалансированности и проверки промышленного оборудования. Товары компании востребована для поддержки и налаживания многих промышленных устройств, включая вентиляционные системы, шредеры, карданные агрегаты, передачи крутящего момента и металлорежущие станки.

    Основополагающие изделия компании:
    1. Arbalance — переносной система вибродиагностики
    Прибор разработан для уровновешивания механизмов устройств в вместе с подшипниками в собственных подшипниках. Прибор Арбаланс гарантирует высокое качество производственных процессов с минимальными издержками. Основные его преимущества:

    Система автоматизированного анализа: не требует участия оператора.
    Спектральная диагностика: обнаруживают проблемы.
    Двойной канал измерения: даёт возможность фиксировать вибрации сразу в двух измерениях, увеличивая производительность.
    Цена: 84000 рублей

    2. Модуль Балком-1А — малогабаритный прибор балансировки
    Система Балком-1А подходит для балансировки вращательных механизмов в собственных подшипниках. Главной особенностью является простота эксплуатации и автоматический расчет. Система дополнена:

    Измерение вибрации в двух каналах.
    Анализ спектра вибраций для оценки состояния механизмов.
    Цена: 73 000 руб.

    3. Балансировочная система Балком-2 — измерительная система для измерительных станков
    Прибор Балком-2 применяется в станциях балансировки для виброизмерений. Он предлагает точность прецизионной балансировки роторов и другого оборудования в производстве.

    Цена: от 90000 руб. до 95 тыс. руб. в зависимости от сборки.

    4. Балком-4 — для балансировки многосоставных систем карданных механизмов
    Балком-4 разработан для сбалансированности карданных систем и эксплуатируется в технических комплексах. Этот модуль даёт высокую точность и прецизионность при уравновешивании в разных направлениях.

    Цена: от 100 000 руб. до 126 000 руб..

    Передовые системы диагностики и анализа
    Фирма «Кинематика» также выпускает системы для беспрерывного отслеживания технического состояния устройств. Эти системы применяют бесконтактными сенсорами для виброизмерений и различных параметров. Например, Реконт позволяет отслеживать редукторы по параметрам кинематической точности и оборотам.

    回覆
  7. Charlesmop表示:
    2024-09-2401:04:14

    http://sildenafilit.pro/# miglior sito per comprare viagra online
    comprare farmaci online con ricetta

    回覆
  8. LouisFoums表示:
    2024-09-2400:57:30

    comprare farmaci online all’estero: Farmacia online piu conveniente – acquisto farmaci con ricetta

    回覆
  9. Edisonanazy表示:
    2024-09-2323:43:16

    migliori farmacie online 2024: Farmacie on line spedizione gratuita – farmacie online sicure

    回覆
  10. instagram viewer_ypSl表示:
    2024-09-2323:31:11

    stories you want to view http://www.aniststories.com/ .

    回覆
  11. CharlesrooNo表示:
    2024-09-2322:40:32

    farmaci senza ricetta elenco Tadalafil generico migliore farmaci senza ricetta elenco

    回覆
  12. Edisonanazy表示:
    2024-09-2322:22:31

    viagra originale in 24 ore contrassegno: viagra – miglior sito dove acquistare viagra

    回覆
  13. ремонт бытовой техники волгоград表示:
    2024-09-2320:52:47

    Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт техники в волгограде

    回覆
  14. криптобосс промокод на бонус при регистрации表示:
    2024-09-2320:35:02

    Уникальный бездепозитный бонус в Cryptoboss Casino, восхитительное предложение!
    Заработайте крупный выигрыш без вложений в Cryptoboss Casino – шикарная возможность выиграть крупный джекпот.
    Cryptoboss Casino радует новыми бездепозитными бонусами – новые призы для вас.
    Эксклюзивный бездепозитный бонус в Cryptoboss Casino – играйте и выигрывайте без риска.
    Новые игроки получают уникальное предложение от Cryptoboss Casino – возможность выиграть крупный джекпот без вложений.
    Бездепозитный бонус в Cryptoboss Casino – это реальность – заработайте крупный выигрыш без риска.
    Используйте уникальное предложение от Cryptoboss Casino для новичков – шикарная возможность заработать без вложений.
    Играйте без вложений и выигрывайте настоящие деньги в Cryptoboss Casino – шикарные призы и невероятные выигрыши ждут вас.
    Получите шанс выиграть крупный джекпот без вложений в Cryptoboss Casino – возможность заработать крупный выигрыш бесплатно.
    криптобосс бездепозитный бонус за регистрацию бонусы на пополнение cryptoboss casino .

    回覆
  15. Edisonanazy表示:
    2024-09-2320:04:36

    farmacie online autorizzate elenco: Cialis generico controindicazioni – farmacie online autorizzate elenco

    回覆
  16. Edisonanazy表示:
    2024-09-2318:45:46

    top farmacia online: Farmacie on line spedizione gratuita – farmacia online senza ricetta

    回覆
  17. JohnGed表示:
    2024-09-2317:11:51

    4rabet promo code 2014: This refers to promo codes shared on 4rabet’s official Telegram channel. These codes can be used to claim bonuses for the current day, offering a variety of rewards from deposit matches to free spins.

    回覆
  18. Ремонт парогенераторов в Москве表示:
    2024-09-2316:59:53

    Профессиональный сервисный центр по ремонту парогенераторов в Москве.
    Мы предлагаем: ремонт парогенераторов в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

    回覆
  19. RhysGed表示:
    2024-09-2315:50:49

    4rabet casino bonus code: The currently active promo code for 4rabet, which can be used to claim a daily bonus, such as a free bet or deposit match.

    回覆
  20. buy viagra online表示:
    2024-09-2315:26:36

    buy viagra online

    回覆
  21. Normanfer表示:
    2024-09-2315:16:15

    п»їfarmacia online espaГ±a: farmacias online seguras en espaГ±a – farmacia online barata y fiable

    回覆
  22. ремонт бытовой техники волгоград表示:
    2024-09-2313:05:49

    Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт цифровой техники волгоград

    回覆
  23. криптобосс промокод表示:
    2024-09-2313:03:20

    Получите эксклюзивный cryptoboss casino промокод|Специальное предложение от cryptoboss casino
    Секретный промокод от cryptoboss casino|Увеличьте свой выигрыш с cryptoboss casino промокодом
    Только сегодня! cryptoboss casino промокод|Играйте в cryptoboss casino с бонусным кодом
    Увеличьте свои шансы на победу в cryptoboss casino промокодом|cryptoboss casino – играйте со скидкой по промокоду
    cryptoboss casino промокод бездепозитный cryptoboss ru casino криптобосс промокод на бонус при регистрации .

    Играйте в cryptoboss casino с преимуществом промокода
    Используйте cryptoboss casino промокод для увеличения выигрыша
    Играйте в cryptoboss casino с дополнительными бонусами от промокодов|Получите уникальное предложение с cryptoboss casino промокодами
    Успейте воспользоваться cryptoboss casino промокодом и выиграть больше|cryptoboss casino промокод – ваш путь к большим выигрышам|Специальное предложение для игроков cryptoboss casino: промокод|Играйте с выгодой: cryptoboss casino промокод|Играйте в cryptoboss casino с эксклюзивным промокодом для успеха|Бонусы и привилегии с cryptoboss casino промокодом|Получите дополнительные бонусы с cryptoboss casino промокодом|Используйте промокод в cryptoboss casino для больших побед|cryptoboss casino – ваша удача по промокоду|cryptoboss casino промокоды – ваш путь к успеху|Получите уникальные бонусы с cryptoboss casino промокодом|cryptoboss casino промокод – ваш ключ к победе|Играйте в cryptoboss casino с дополнительными бонусами по промокоду|Успейте активировать cryptoboss casino промокод для дополнительных выигрышей|Используйте cryptoboss casino промокод для увеличения шансов на победу|Уникальные предложения от cryptoboss casino с промокодом|Увеличьте свои шансы на победу в cryptoboss casino с промокодом|Получите дополнительные бонусы в crypt

    回覆
  24. JamesMix表示:
    2024-09-2313:00:58

    comprar viagra en espaГ±a envio urgente: comprar viagra contrareembolso 48 horas – sildenafilo cinfa 100 mg precio farmacia

    回覆
  25. DennisRep表示:
    2024-09-2312:18:16

    https://tadalafilo.bid/# farmacia online madrid

    回覆
  26. Normanfer表示:
    2024-09-2310:55:12

    farmacia barata: farmacia 24 horas – farmacia online 24 horas

    回覆
  27. FloydDwent表示:
    2024-09-2310:21:45

    https://farmaciaeu.com/# farmacia en casa online descuento
    п»їfarmacia online espaГ±a

    回覆
  28. MichaelGed表示:
    2024-09-2308:44:11

    4rabet promo code list: A code that grants users free bets, allowing them to place wagers without using their own funds. It’s a great way to try out betting on the platform.

    回覆
  29. DouglasHoapy表示:
    2024-09-2308:40:12

    1xBet
    The best 1xBet promo codes are those that offer the highest value, such as large deposit matches, numerous free bets, or free spins. These codes can significantly enhance the betting experience by providing more opportunities to win.

    回覆
  30. Normanfer表示:
    2024-09-2308:26:15

    farmacia online envГ­o gratis: Cialis precio – farmacias online baratas

    回覆

發佈留言

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