利用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協助我們製作動畫，我們更可以把心思放在排版、樣式和內容上面，省去了撰寫計算動畫程式的時間，希望大家可以利用它做出很棒的作品！最後附上本範例的原始檔給大家參考。
https://mexicopharmacy.win/# pharmacies in mexico that ship to usa
order ed pills
Spot on with this write-up, I actually think this amazing site needs far more attention. I’ll probably be returning to see more, thanks for the info.
indian pharmacy paypal: Top online pharmacy in India – pharmacy website india
http://mexicopharmacy.win/# mexico pharmacies prescription drugs
purple pharmacy mexico price list: Best pharmacy in Mexico – purple pharmacy mexico price list
http://edpillpharmacy.store/# best ed meds online
erectile dysfunction medications online
Needed to create you this very small note just to say thanks a lot yet again on the precious guidelines you have shown here. It’s simply particularly generous of you to make unhampered all most of us could possibly have marketed as an electronic book to generate some bucks for themselves, most notably since you could have done it if you ever considered necessary. These good tips in addition acted to become a good way to fully grasp that most people have the same zeal much like my own to realize much more in regard to this condition. I am sure there are some more pleasurable situations ahead for people who go through your site. phen q
I wanted to write you a very small word just to say thank you again for these superb concepts you’ve provided above. It has been certainly tremendously generous of you to make freely all that many of us could have advertised for an e-book in order to make some money for their own end, mostly considering the fact that you could have done it if you desired. Those concepts as well served to become a good way to be sure that other individuals have the same interest similar to mine to figure out more and more with respect to this issue. I know there are a lot more pleasurable sessions in the future for those who find out your blog. phen q
I intended to post you that bit of remark to help say thank you once again for all the lovely thoughts you have provided here. It’s quite seriously open-handed of people like you giving extensively all that a lot of folks would’ve advertised for an e-book to make some bucks for their own end, especially given that you could possibly have tried it in case you desired. The strategies additionally served like a easy way to realize that the rest have a similar passion much like my own to see very much more when considering this condition. I’m certain there are millions of more enjoyable instances in the future for those who take a look at your website. sumatra slim belly tonic
I intended to send you one very little word so as to give many thanks over again just for the wonderful things you have shown above. It is quite remarkably open-handed with you to offer without restraint just what many individuals could possibly have marketed for an ebook in order to make some bucks for themselves, specifically now that you might well have done it in the event you wanted. The principles also worked as the easy way to be certain that other people online have the identical dream the same as my very own to see much more in respect of this issue. I believe there are a lot more enjoyable moments ahead for those who read through your blog. sumatra slim belly tonic
https://indiapharmacy.shop/# Online medicine home delivery
ed medications online
https://mexicopharmacy.win/# mexico drug stores pharmacies
I intended to compose you that little bit of observation just to say thanks a lot once again for these striking advice you have documented in this article. This has been really surprisingly generous with you in giving freely exactly what many people would have offered for sale for an electronic book to generate some bucks for their own end, even more so considering that you could have done it in case you wanted. Those ideas as well served to be the fantastic way to comprehend other individuals have a similar dream the same as my own to find out whole lot more regarding this issue. I am certain there are millions of more pleasurable sessions in the future for individuals who find out your blog. fitspresso
It is perfect time to make some plans for the future and
it is time to be happy. I’ve learn this post and if I may I desire to recommend you some interesting things or suggestions.
Perhaps you could write subsequent articles referring to
this article. I desire to read more things about it!
Take a look at my website; gluco freedom
I needed to write you that little bit of remark just to say thanks once again for your personal spectacular knowledge you have featured in this case. It was really unbelievably open-handed of people like you to grant unhampered all that a number of us might have distributed as an ebook to earn some money for their own end, especially given that you could have done it if you wanted. Those suggestions in addition served to become a great way to know that other individuals have a similar zeal just like my personal own to find out great deal more in regard to this problem. I believe there are millions of more pleasurable sessions up front for individuals who read your website. fitspresso reviews
https://mexicopharmacy.win/# mexican drugstore online
low cost ed meds
mexican online pharmacies prescription drugs: Purple pharmacy online ordering – mexican pharmaceuticals online
cheap ed medicine: ed medication online – п»їed pills online
I’m extremely impressed with your writing skills as well
as with the layout on your blog. Is this a paid
theme or did you modify it yourself? Anyway keep up the excellent quality writing, it’s rare to
see a great blog like this one these days.
My webpage; pronerve 6 reviews
Excellent pieces. Keep posting such kind of information on your page.
Im really impressed by your site.
Hey there, You’ve performed a great job. I will definitely digg it and
personally suggest to my friends. I am sure they will be benefited from this
website.
Feel free to visit my site – does lung clear pro work
It is in point of fact a nice and helpful piece of information. I am satisfied that
you simply shared this useful info with us.
Please stay us up to date like this. Thanks for sharing.
My site … pronerve 6
Right away I am going away to do my breakfast, when having my breakfast coming yet again to read more news.
my web blog – pro nerve 6 ingredients
https://indiapharmacy.shop/# world pharmacy india
When I originally commented I appear to have clicked the
-Notify me when new comments are added- checkbox
and now each time a comment is added I get 4 emails with the same comment.
Is there an easy method you can remove me from that service?
Thanks a lot!
My webpage; pronerve 6 capsules
https://mexicopharmacy.win/# mexican rx online
best ed meds online
https://edpillpharmacy.store/# ed medicines online
ed meds on line
Aw, this was a really nice post. Taking a few minutes and actual effort to create a top notch article… but what can I say… I procrastinate a whole lot and never seem to get nearly anything done.
mail order pharmacy india: Top online pharmacy in India – buy prescription drugs from india
purple pharmacy mexico price list: mexican pharmacy – mexico drug stores pharmacies
https://edpillpharmacy.store/# cheapest online ed treatment