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

您可能也會喜歡…

發佈留言

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