利用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協助我們製作動畫，我們更可以把心思放在排版、樣式和內容上面，省去了撰寫計算動畫程式的時間，希望大家可以利用它做出很棒的作品！最後附上本範例的原始檔給大家參考。
Hey fantastic blog! Doees running a blkog like this ttake a lot of work?
I haqve vry little exprtise in programminbg hoowever I wass hopig too start myy
own bllog in the neear future. Anyways, if yoou havfe any suggestionns or
tips forr new blog ownes please share. I know thiks iis offf subjecct nevrrtheless I ssimply hhad tto ask.
Kudos!
Hi there, afte reading this remarrkable paragrph i amm also delighted to hare my know-how herte with colleagues.
all tthe time i ussd to read smalleer articlees thwt ass welll clear their motive, annd hat iss aso happeniing with tnis piece of writijg which
I amm reading here.
Very goo blog! Do yoou have anyy recommenddations forr aspiring writers?
I’m planning too start my own blokg soon but I’m a lttle lost oon everything.
Would yyou adviise starting with a free platform like WordPress orr
goo for a paaid option? There aree soo many options outt there that I’m totally colnfused ..
Anny recommendations? Appreciate it!
Wow, this piece of writing is nice, my sister is analyzing these kinds of things, so I am going to inform her.
My web-site :: KASACK HERREN
Howdy would you mind stating wich bkog platfokrm you’re using?
I’m planning tto staqrt myy oown blog in tthe nesr fuuture buut I’m having a difficulpt
timee deciding between BlogEngine/Wordpress/B2evolution andd Drupal.
Thhe reason I ask is bercause yoiur layout seedms diffeent then mkst blgs annd I’m lookingg forr something unique.
P.S My apologues foor eing off-topic bbut I hadd to ask!
Heya just wanted to give you a quick heads up and let you know a few of the pictures aren’t loading properly.
I’m not sure why but I think its a linking issue. I’ve tried it in two different browsers and
both show the same results.
Your style is very unique in comparison to other folks I’ve read stuff from.
I appreciate you for posting when you have the opportunity, Guess I
will just bookmark this blog.
Today, I went to the beachfront with my kids. I found a sea shell and gave it to
my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed.
There was a hermit crab inside and it pinched her ear. She never
wants to go back! LoL I know this is totally
off topic but I had to tell someone!
дома отдыха подмосковья с бассейном и шведским сосновая роща курганская область цены
хостел в ейске гостиница атмосфера новочеркасск романтик отель россия крым судак
партенит санатории и пансионаты цены отель тихий дон водопады туапсе
of course like your web-site however you have to check the spelling on several of your posts. Many of them are rife with spelling problems and I find it very troublesome to tell the reality then again I will surely come back again.
мухачева 256 альмира сочи
бенефит гостиница пермь санаторий акрон геленджик дом на берегу моря
словакия гостиница в саратове стоимость номеров кипарис отель сочи ессентуки санаторий центросоюз путевки
отель маринус геленджик витязево крым
санаторий виктория ессентуки цены отзывы о санатории сосны быково хостел 21 век котельники
советская 110 ноябрьск алушта улица глазкрицкого отель арго алушта
I loved your idea there, I tell you blogs are so exciting sometimes like looking into people’s private life’s and work. Every new remark wonderful in its own right.
Might we expect to see more of these same problems in the future?
санаторий недалеко от москвы как доехать до лазаревского на поезде
псков отель поиск отелей москва гостиница коралл адлер
гостиница в абхазии на берегу моря цена размещение с животными гостиница интурист пятигорск официальный сайт
отдых в абхазии пицунда 2021 гостиница белоруссия красная поляна
гостиница полет самара санаторий дорохово телефон регистратуры санатории для женского здоровья
тэс крым официальный сайт санатории ленинградской области с бассейном гостиница омега сириус
сан фрунзе санаторий эльбрус кисловодск официальный
подольск вороново п кабардинка краснодарский край лиго морская симеиз отзывы
роза хутор расстояние до моря отели на новый год 2022 санаторий чайка евпатория отзывы по льготным путевкам
стоимость санатория в кисловодске золотой колос
гостиница дубна корпус 1 курорт мисхор валеологическая здравница семейный курорт береговой алушта
санаторий валун в архипо осиповке музей дача шаляпина в кисловодске санаторий тарханы пятигорск цены на 2022
Clear, concise and easy to access.
fantastic post, very informative. I wonder why more of the ther experts in the field do not break it down like this. You should continue your writing. I am confident, you have a great readers’ base already!
Cherished is likely to be what people say about your comments.
We absolutely love your blog and find the majority of your post’s to be exactly what I’m looking for. Do you offer guest writers to write content to suit your needs? I wouldn’t mind composing a post or elaborating on a number of the subjects you write about here. Again, awesome weblog!
I discovered your weblog site on google and verify just a few of your early posts. Proceed to maintain up the very good operate. I simply further up your RSS feed to my MSN News Reader.
Fantastic piece of writing here1
These kind of posts are always inspiring and I prefer to read quality content so I happy to find many good point here in the post. writing is simply wonderful! thank you for the post
Just a quick note to express my appreciation. Take care
I am very happy to look your post. Thanks a lot and i am taking a look ahead to touch you.
Just what I needed to know thank you for this.
Great info! Keep post great articles.