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

馬老師在前一篇文章介紹過GreenSock的Tweening Platform在Flash中的應用後,接下來要跟各位分享「GreenSock Animation Platform」(GSAP),那麼多英文聽起來好像很複雜,就讓我為各位簡單介紹一下吧!

首先GreenSock一開始真的是針對Flash的Tween(補間)寫了許多好用的Class供設計師們使用,在不斷的更新和強化之後,目前已經出到v11(第十一版)了,但只要熟悉網路平台的朋友應該都知道,近幾年Flash在網頁上的應用,除了遊戲之外正在減少中,所以在GreenSock的v12(第十二版)中,加入了JavaScript的Class,也就是說我們可以在HTML網頁中使用TweenLite或TweenMax…等來製作動畫,也藉此版本把發展計劃的名稱從「GreenSock Tweening Platform」(GreenSock補間平台)更名為「GreenSock Animation Platform」(GreenSock動畫平台),主要是把「Tweening」換成「Animation 」,因為前者主要為Flash在使用的名詞,而後者就屬於比較廣義的「動畫」,所以未來就算你還在使用Flash的TweenMax,他也是屬於「GreenSock Animation Platform」中的一員了。

在網頁上GreenSock目前提供使用的有「TweenLite」、「TweenMax」、「TimelineLite」、「TimelineMax」這四個項目,雖比Flash來的少,不過也是最常用的幾項,相信可以幫助設計師們在不使用Flash的情形之下,製作許多不同凡響的動畫效果,另外關於這四項的差別也跟Flash版本一樣,之前有介紹過在這邊就不多提了,接下來就看一下簡單的使用方式吧。

首先跟Flash版本一樣,必須先下載備用載點)JS的Class,下載解壓縮後,會有以下的資料夾:

  • docs:參考文件。
  • examples:裡面有很多html的展示,對於想要了解本Class非常有幫助。
  • src:主要Class資料夾。

在網頁上主要使用的資料夾為src,而若是網頁要使用這個Class,跟Flash需要先import,不過HTML的指令如下:

<script src="src/minified/TweenMax.min.js"></script>

接下來就開始針對HTML和Javascript進行編輯,先看看我製作的第一個範例,下面是本範例整個網頁的程式碼:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTML Tweening Basic</title>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        function scaleSmall() {
            var photo = document.getElementById("cat");
            TweenMax.to(photo, 2, {
                width: 300,
                height: 200
            });
        }
    </script>
</head>
<body style="font-size:13px; background-color:#FFF">
    <p style="text-align:center"><img src="cat.jpg" alt="波妞 大頭照" name="cat" width="600" height="400" id="cat"
            onClick="scaleSmall()"></p>
    <p style="text-align:center">請點擊貓咪照片</p>
</body>
</html>

基本上就是點擊後圖片縮小的效果,第10行即為TweenMax製作動畫的程式,當然利用TweenMax製作動畫,其中動畫類型也是重要的參數,第二個案例就加上了動畫類型,大家可以參考動畫變化的形式,下面是本範例整個網頁的程式碼:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening ease</title>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        function scaleSmall() {
            var photo = document.getElementById("cat");
            TweenMax.to(photo, 2, {
                width: 300,
                height: 200,
                ease: Elastic.easeOut
            });
        }
    </script>
</head>
<body style="font-size:13px; background-color:#FFF">
    <p style="text-align:center"><img src="cat.jpg" alt="波妞 大頭照" name="cat" width="600" height="400" id="cat"
            onClick="scaleSmall()"></p>
    <p style="text-align:center">請點擊貓咪照片</p>
</body>
</html>

除此之外,動畫變化的大小,當然也可以利用比例來計算,第三個範例就是用圖片寬度和高度比例來進行動畫縮小,各位也可以參考,下面是本範例整個網頁的程式碼:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening ease</title>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        function scaleSmall() {
            var photo = document.getElementById("cat");
            TweenMax.to(photo, 2, {
                width: photo.width * 0.8,
                height: photo.height * 0.8,
                ease: Elastic.easeOut
            });
        }
    </script>
</head>
<body style="font-size:13px; background-color:#FFF">
    <p style="text-align:center"><img src="cat.jpg" alt="波妞 大頭照" name="cat" width="600" height="400" id="cat"
            onClick="scaleSmall()"></p>
    <p style="text-align:center">請連續點擊貓咪照片</p>
</body>
</html>

當然在原先TweenMax可以使用的參數「onStart」、「onUpdate」、「onComplete」也一樣可以使用,第四個範例就加上了這部分的程式碼,下面是本範例整個網頁的程式碼:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening onCompleteSock HTMLTweening onComplete</title>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        function scaleSmall() {
            var photo = document.getElementById("cat");
            TweenMax.to(photo, 2, {
                width: 300,
                height: 200,
                ease: Elastic.easeOut,
                onComplete: okFn
            });
        }

        function okFn() {
            alert("動畫執行完畢");
        }
    </script>
</head>
<body style="font-size:13px; background-color:#FFF">
    <p style="text-align:center"><img src="cat.jpg" alt="波妞 大頭照" name="cat" width="600" height="400" id="cat"
            onClick="scaleSmall()"></p>
    <p style="text-align:center">請點擊貓咪照片</p>
</body>
</html>

看完了以上的範例,大家對於TweenMax在網頁中的使用應該有基本的認識,當然接下來就要看你的創意和HTML、Javascript、CSS的操作能力了,在這邊也製作一個較完整的範例供大家參考,下面是本範例整個網頁的程式碼:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenSock HTMLTweening Sample 1</title>
    <style type="text/css">
        #yahoo {
            height: 240px;
            width: 560px;
            margin-right: auto;
            margin-left: auto;
            overflow: hidden;
        }

        /* yahoo Div 樣式(最外層) */
        #yahoo #pic {
            height: 210px;
            width: 2240px;
            overflow: hidden;
            left: 0px;
            position: relative;
        }

        /* 放置圖片Div樣式 */
        #yahoo #btn {
            text-align: right;
            float: left;
            height: 30px;
            width: 560px;
        }

        /* 下方文字連結Div */
        #yahoo #btn a {
            margin-left: 5px;
            padding-top: 2px;
            padding-right: 4px;
            padding-bottom: 2px;
            padding-left: 4px;
        }

        /* 下方文字連結樣式 */
    </style>
    <script src="src/minified/TweenMax.min.js"></script>
    <script language="javascript">
        function moveFn(no) {
            var banner = document.getElementById("pic");
            TweenMax.to(banner, 1, {
                css: {
                    left: (no - 1) * -560
                },
                ease: Quad.easeInOut
            });
        }
    </script>
</head>
<body style="font-size:13px; background-color:#FFF">
    <div id="yahoo">
        <div id="pic"><img src="yahoo/y1.jpg" id="p1" width="560" height="210"><img src="yahoo/y2.jpg" width="560"
                height="210"><img src="yahoo/y3.jpg" width="560" height="210"><img src="yahoo/y4.jpg" width="560"
                height="210"></div>
        <div id="btn"><a href="javascript:;" onClick="moveFn(1)">1</a><a href="javascript:;" onClick="moveFn(2)">2</a><a
                href="javascript:;" onClick="moveFn(3)">3</a><a href="javascript:;" onClick="moveFn(4)">4</a></div>
    </div>
</body>
</html>

在網頁上有TweenMax協助我們製作動畫,我們更可以把心思放在排版、樣式和內容上面,省去了撰寫計算動畫程式的時間,希望大家可以利用它做出很棒的作品!最後附上本範例的原始檔給大家參考。

You may also like...

4,789 Responses

  1. AgustinBougs表示:

    https://mexicanpharm24.pro/# mexican drugstore online
    best online pharmacy india

  2. BrandonJer表示:

    pharmacy drugs drug pharmacy ed solutions

  3. Gregorypurne表示:

    ed meds online without doctor prescription https://indianpharmdelivery.com/# world pharmacy india

  4. porn表示:

    Hi! I could have sworn I’ve visited this web site before but after going through some of the posts I realized it’s new to me. Nonetheless, I’m certainly happy I came across it and I’ll be book-marking it and checking back frequently.

  5. Rogerfraus表示:

    csgo gambling sites csgo gambling

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

  7. Ремонт телефонов表示:

    Профессиональный сервисный центр ремонт телефонов москва сервисные центры по ремонту мобильных телефонов

  8. tonic greens表示:

    I can’t say enough good things about this article. It’s clear, concise, and packed with useful information.

  9. Hi Dear, are you genuinely visiting this web site on a
    regular basis, if so after that you will absolutely take pleasant knowledge.

    Have a look at my web page prodentim dosage

  10. Hmm is anyone else encountering problems with the images on this blog loading?
    I’m trying to figure out if its a problem on my end or if
    it’s the blog. Any responses would be greatly appreciated.

    Feel free to visit my website; lottery defeater software apk

  11. prodentim表示:

    This was such a well-written post! I learned so much from your insights. Keep up the great work.

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

  13. Тут делают продвижение сео продвижение медицинского сайта seo медицинских сайтов

  14. Michaelgax表示:

    buy oral ivermectin order stromectol ivermectin coronavirus

  15. Stevenjaw表示:

    https://zithromax.company/# can i buy zithromax over the counter
    zithromax online usa no prescription

  16. Тут делают продвижение создание медицинского сайта создание сайтов для клиники

  17. Matthewweind表示:

    rybelsus generic: buy rybelsus – Rybelsus 7mg

  18. NicolasLoole表示:

    http://zithromax.company/# zithromax capsules australia

  19. SamuelCic表示:

    http://stromectol.agency/# ivermectin tablet 1mg

  20. магазин сейфов предлагает сейфы 3 класс взломостойкости взломостойкие сейфы 3 класса

  21. Michaelgax表示:

    neurontin 600mg gabapentin for sale neurontin 150 mg

  22. Stevenjaw表示:

    http://gabapentin.auction/# neurontin 800 mg tablets
    where can i buy zithromax medicine

  23. Тут делают продвижение сео продвижение медицинского сайта комплексное продвижение медицинских сайтов

  24. Matthewweind表示:

    amoxicillin in india: Amoxicillin For sale – generic amoxicillin 500mg

  25. Hi there to all, how iss everything, I thionk everry one is gwtting
    mode ffom this weeb page, and you vews aree fastidious foor neew people.

發佈留言

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