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

1,573 Responses

  1. Excellent read, I just passed this onto a colleague who was doing a little research on that. And he actually bought me lunch because I found it for him smile So let me rephrase that.|

  2. Right here is the right website for anyone who really wants to find out about this
    topic. You realize so much its almost hard to argue with you (not that I personally will need
    to…HaHa). You definitely put a new spin on a subject that’s been discussed for years.

    Excellent stuff, just excellent!

    Here is my blog post; 온라인바카라

  3. Fall in Pound表示:

    Wish I’d thought of this. Am in the field, but I procrastinate alot and haven’t written as much as I’d like. Thanks.

  4. Stewartpiq表示:

    вакансии мрия резорт спа санатории в евпатории цены на 2021
    гостевой дом илиос евпатория адмирал гостевой дом belhotel белореченск
    ореанда санаторий карагай санаторий отзывы пансионаты санкт петербурга недорого

  5. Enummap表示:

    Herman CeLDTjSPkbDmSqP 6 21 2022 online cialis pharmacy The Messenger of Allah п·є said Get up, O Ali, get up, O Hamzah, get up, O Ubaidah bin al Harith bin Abdul Muttalib

  6. Stewarthrh表示:

    пансионат багрипш абхазия санаторий солнечный ивановская область
    дом отдыха петрово дальнее управление делами президента хостел волоколамск гостиница на нагорной 26
    отдых в семидворье крым гостиница исток владивосток курортная поликлиника в пятигорске

  7. Stewartrxb表示:

    новый афон грифон гостиница жемчужина сочи цены на 2021
    дома отдыха в истре и истринском районе ситикомфорт отель на арбатской сочи гостиница русь
    хоста сочи фото крафт отель анапа апартаменты берлога великий новгород

  8. Stewartpox表示:

    отель глория ялта кома купить
    санаторий надежда самара официальный сайт анапа отдых с питанием грейс калифорния адлер
    африканская деревня отель в ялте с бассейном на крыше отели на красной поляне

  9. Stewartxxk表示:

    пансионат лучистый крым кисловодск сухум
    бутик отель татьяна прованс звенигород официальный сайт отели и гостиницы сочи поездка в пятигорск
    отель хаял казань турбаза славянское подворье ульяновск геленджик в августе

  10. Magnificent goods from you, man. I’ve understand your stuff previous to and you are just extremely great.
    I really like what you’ve acquired here, certainly like
    what you are stating and the way in which you say it.
    You make it entertaining and you still care for to keep it wise.
    I can not wait to read much more from you. This is actually a wonderful
    site.

    Here is my web page :: calculator with history screen

  11. live koore表示:

    Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is wonderful, let alone the content!

  12. Stewartyhu表示:

    лоо отдых 2021 цены на берегу моря новогодние праздники 2022 в сочи
    санаторий в московской области недорого лечебный крым звездный сагаан морин отель улан удэ
    гостиница альянс великий новгород юг спорт сочи официальный сайт цены ивушка лучезарная ул 14 сочи

  13. Your explanation is organized very easy to understand!!! I understood at once. Could you please post about baccaratcommunity ?? Please!!

  14. Timothyquarm表示:

    Hello2. And Bye2.

  15. kardinal表示:

    ทางเราจำหน่าย kardinal stiick , kks quik
    , ks kurve ต้องขอบอกได้เลยว่า kschill.com เป็นตัวแทนหลักอย่างเป็นทางการในไทย ที่ใหญ่ที่สุด และเป็นเจ้าเดียวกับ RELX THAILAND สินค้าทุกแบรนด์ ทุกรุ่น เราได้ทำการคัดสรร บุหรี่ไฟฟ้า ที่เป็นหนึ่งในนวัตกรรม ช่วยเลิกบุหรี่ ที่มีประสิทธิดีเยี่ยม และช่วยได้จริง มาให้ลูกค้าได้เลือกใช้ โดยสินค้าทุกชิ้นของเรา สั่งตรงจากโรงงาน

  16. scb99表示:

    This is valuable stuff.In my opinion, if all website owners and bloggers developed their content they way you have, the internet will be a lot more useful than ever before.

  17. I have read so many articles or reviews about the blogger
    lovers however this piece of writing is really a fastidious piece of writing, keep it up.

    My homepage :: เว็บบทความ

  18. outwazy表示:

    Genital metaplasias refer to the replacement of the normal endometrial or cervical glandular epithelium by cells that are either not encountered in the normal endometrium or cervix or, if present, are usually inconspicuous elements lasix and potassium Elevated stress levels have been shown to have an impact on your estrogen levels, as your body has to burn through your progesterone stores to make cortisol, the stress hormone

  19. casino online表示:

    Your article has answered the question I was wondering about! I would like to write a thesis on this subject, but I would like you to give your opinion once 😀 casino online

  20. We are a group of volunteers and starting a new initiative in our community. Your blog provided us with valuable information to work on|.You have done a marvellous job!

  21. Ilves agua表示:

    Most often since i look for a blog Document realize that the vast majority of blog pages happen to be amateurish. Not so,We can honestly claim for which you writen is definitely great and then your webpage rock solid.

  22. I’m impressed, I need to say. Really rarely do I encounter a blog that’s both educational and entertaining, and let me tell you, you have hit the nail on the head.

  23. This article actually helped me with a report I was doing.

  24. Go Here表示:

    I am very happy to look your post. Thanks a lot and i am taking a look ahead to touch you.

  25. tuberias表示:

    I just added your web site to my blogroll, I hope you would look at doing the same.

  26. Might we expect to see more of these same problems in the future?

  27. Thanks , I’ve recently been searching for info about this topic for ages and yours is the best I have discovered so far. But, what concerning the bottom line? Are you certain concerning the source?

  28. Nice blog here! Also your web site loads up very fast! What host are you using? Can I get your affiliate link to your host? I wish my web site loaded up as fast as yours lol

  29. If you are going for finest contents like myself, only
    pay a quick visit this web page daily as it gives quality contents, thanks

發佈留言

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