利用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,566 Responses

  1. CraigDor表示:

    buy generic 100mg viagra online viagra pills buying viagra online

  2. CraigDor表示:

    when will viagra be generic pfizer viagra 100mg price viagra cost

  3. Jamested表示:

    does ivermectin kill tapeworms can i buy ivermectin in mexico buy stromectol online

  4. Jamested表示:

    stromectol 12 mg tablets stromectol for sale stromectol 12 mg tablets

  5. Jamested表示:

    stromectol for sale stromectol ivermectin 3 mg stromectol tablets for humans

  6. Jamested表示:

    stromectol for humans for sale ivermectin 3 stromectol 12 mg tablets

  7. MichaelPlela表示:

    sildenafil citrate 100mg for sale sildenafil 100 mg lowest price viagra where to buy

  8. MichaelPlela表示:

    stromectol stromectol stromectol

  9. MichaelPlela表示:

    clomid for sale canada clomid tablets buy clomid

  10. MichaelPlela表示:

    where to buy cheap clomid online clomid buy clomid

  11. talett表示:

    If the…

    Free space game to quickly wow your friends!
    You are in a barren landscape, which is full of strange structures. These structures appeared in a very convenient line at the same time. And not a single person knows how they formed. But no one wants to look dumbfounded, so everyone wants to know the…

    Acer is about 40 cm tall, and the longest is just greater than 50 cm. The shape of the Acer stone is convex. The https://wakelet.com/wake/IECnCMaM8M-Tqj6Mz6Fvp 8cee70152a talett

  12. wenras表示:

    `Discogs release ID` is the release number associated with the track and corresponds to the release’s ID on Discogs (usually the number after the Release date). This number should not be used for anything else.

    `Audio filename` is the name of the actual audio file being generated.

    Download

    1. [Download diskjac](
    2. [Download code](
    3. [Download from Google Play]( https://wakelet.com/wake/RVWqiG8nnKibfOOfWVrNJ 8cee70152a wenras

  13. cainama表示:

    Note:-
    – It is not necessary to enter a “Zero” into the frequency box. Since this function calculates standard deviation for negative values, it is necessary to calculate a negative standard deviation.
    – Input range is from 0 to 100 (inclusive).
    – This function calculates standard deviation for negative frequencies x negative frequency x squared values.
    – Using the “Square” as input the function only calculates the standard deviation for positive values.

    A Stiildard Dev https://artienz.com/upload/files/2022/05/qIs1JnuW65Kdr7TB2lWz_19_772df670472f73818b469191a2945722_file.pdf 05e1106874 cainama

  14. rebemarg表示:

    This schematic (Right click on image to download the zip file) demonstrate what you can do with this application : Sending multiple probes signal to the Arduino analog inputs. For further information visit at
    Other is the same signal sent to each probe, (wavedrom) using pin 1 and BOTH probes using pin 9, you can adjust the amplitude too with the gain reference with a selector switch and https://tchatche.ci/upload/files/2022/05/MXA7tKZpz8elooiHP5L8_19_e3053e1eeaa835074e488c2c8ea89dc6_file.pdf 05e1106874 rebemarg

  15. neayas表示:

    ■ No limit on how many people you can talk to using your own bandwidth, but you can’t call long distance
    ■ Calls are on-demand, meaning no one can call you all day unless you respond by calling them
    ■ No support for cell phones

    We welcome any questions.

    Thanks,

    Ken Shirk
    President, Anastasia Information Services

    Held in the Manhasset, NY, USA area
    An https://popstay.info/upload/files/2022/05/RU7HnlBgOHPJvChEbYyz_19_eb2734306508fba0cf35337a3624681f_file.pdf 1b4b956d05 neayas

  16. samgerh表示:

    ■ Window Media 8
    3D Picture Browser is a privately held corporation, all consulting, collaboration, and development is done remotely.

    Explore by category and sort Search within category by dragging the dividers Find photos easily using a powerful search strategy

    Search all of your Media Library
    Search within each video, audio, image, and PDF file type
    Search up to 1M keywords available in the metadata
    Search by EXIF data

    Easily search your entire Windows https://vizsuverpars.weebly.com

    6add127376 samgerh

  17. MichaelPlela表示:

    viagra tablets for men sildenafil viagra tablets for men

  18. phemjale表示:

    Key Features of SuperCharger:

    Simple configuration.

    Support for sequential sessions.

    Ability to shorten and lengthen the boosting process.

    Ability to create a list with utilities and set their priority levels.

    While testing the performance enhancing options such as SuperCharger, it is worthwhile to keep in mind that not all applications are equal in terms of the amount of resources they consume. Some processes are resource heavy while others are… lean and effective.
    Through http://www.schornsteinfeger-duesseldorf.de/redirect.php?url=https://gogghenori.weebly.com

    6add127376 phemjale

  19. eirmand表示:

    It’s an easy to use utility that is able to do its job quickly and without much hassle.
    If you are in need of such an application, consider Audiograbber a safer solution for this purpose.

    Why You Should Always Choose a Professional For Car Audio Fitting & Repair

    When it comes to working on car audio, the importance of choosing a professionally trained car audio technician cannot be understated. It may sound obvious, but in this day and age, you can often https://rcifinselty.weebly.com

    6add127376 eirmand

  20. oliyavn表示:

    WithName
    SA1634 – FileMustNotHaveContent
    SA1638 – ElementsMustBeFollowedByBlankLine
    SA1651 – ‘}’BlockMustBeStandalone
    SA1665 – StartingCurlyBraceMustNotBeFollowedByBlankLine
    SA1666 – LongVariableNamesMustBeSpacedCorrectly
    SA1675 – CurlyBracesMustNotBeFollowedByBlankLine
    SA1676 – ABlockMustBe https://abdeparsau.weebly.com

    6add127376 oliyavn

  21. undupyp表示:

    IDDBGp gives you a familiar visual representation of your debugger. Nothing else to complicate your layout. Just drag and drop and you are ready to debug in minutes. PWD only, live status, and full expression support help you to obtain fast solutions.

    MSSQL 2005m Server Database Administration

    MacX MSSQL Manager is a powerful, easy-to-use, and powerful management software for Microsoft SQL database.
    There is a large selection of database management tools ( https://handnaptiojour.weebly.com

    6add127376 undupyp

  22. wendtanc表示:

    for HTML files
    ■ Create new web projects by name
    ■ Copy and paste objects
    ■ Protect the content on the webpages
    ■ Move objects in the panel (Update Update Tab)
    ■ Move objects between projects (Update Project Button)
    ■ You can use Shift+Click Select to quickly select an element in the panel.
    ■ Hypertext Builder files (.HTB) are XML files.
    You can edit the https://images.google.com.pe/url?q=https://daynikedsu.weebly.com

    6add127376 wendtanc

  23. Hello, this weekend is nice for me, since this moment i am reading
    this wonderful informative paragraph here at my home.

  24. rialau表示:

    Just keep an eye on the weak parts, which can either prove to be a fall-back for hackers or cause a security flaw to appear.Relation of corneal nerve defect length, number, and plantar rhizotomy to foot numbness in patients with diabetic distal symmetric polyneuropathy.
    The reduction of corneal nerve fibers correlates with diabetic neuropathic pain and progression of diabetic peripheral neuropathy (DPN). Little is known about the relationship of nerve fiber http://fotos24.org/url?q=https://asmemonsnan.weebly.com

    6add127376 rialau

  25. florjus表示:

    Enjoy OTA.

    ONE App for Windows is a revolutionary application that brings ONE TV, KISS and ONE Radio into one place. Want a telling show? Just swipe to your side to read the synopsis. Want to listen to music? just swipe to your side to see the lyrics of the song. It’s like a mini home theatre.

    ONE TV – the Korean version of NBC’s hit show Thursday Night Live

    Watch and listen to ONE TV shows and music https://gogghenori.weebly.com

    6add127376 florjus

  26. sabphe表示:

    May 19, 2019

    MSI matrix

    97.55

    SAP Pricing Assistant is the essential tool for the efficient pricing of SAP products and services. It helps business users to quickly access and retrieve pricing information while in the process of selling and creating a pricing plan in the application landscape.
    Quickly capture and analyse business and technical requirements through analysis features
    Through the analysis features of SAP Pricing Assistant you can get a deeper insight into your end customers businesses and technical requirements to http://ottawakiosk.com/ad.php?url=https://iliradco.weebly.com

    6add127376 sabphe

  27. anglzeph表示:

    The application’s inclusion of subtitles enabled options allows its users to synchronize them with the video file. Autoplay can be enabled or disabled, and the number of times that YouTube…

    3.

    YouTube Converter –
    Multimedia & Design/Audio… You have to download the software into your computer to use this program for converting. It is reported all the video sites are totally impossible to watch, and fortunately, the software could get those videos from YouTube itself to Mac. YouTube https://conlayferli.weebly.com

    6add127376 anglzeph

  28. itiemri表示:

    Read review

    See at Windows Store

    Not bad

    4.7

    5,300,420

    G

    Windows Store

    Oct 20, 2017

    Narrow It down to specific use cases

    Comments about GoldenSection Notes 1.0

    (likes)

    (dislikes)

    (0)

    Overall:

    4.5

    /5

    Helpfulness:

    4.2 http://www.alfakmv.ru/bitrix/rk.php?goto=https://britophordrag.weebly.com

    6add127376 itiemri

  29. itiemri表示:

    Read review

    See at Windows Store

    Not bad

    4.7

    5,300,420

    G

    Windows Store

    Oct 20, 2017

    Narrow It down to specific use cases

    Comments about GoldenSection Notes 1.0

    (likes)

    (dislikes)

    (0)

    Overall:

    4.5

    /5

    Helpfulness:

    4.2 http://www.alfakmv.ru/bitrix/rk.php?goto=https://britophordrag.weebly.com

    6add127376 itiemri

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

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