利用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/# mexico drug stores pharmacies
ed medicines online: buy erectile dysfunction medication – online ed prescription
bookmarked!!, I love your website!
https://indiapharmacy.shop/# india pharmacy mail order
affordable ed medication: online ed prescription same-day – best online ed medication
Hello my family member! I want to say that this post is amazing, nice written and come with approximately all significant infos. I would like to look extra posts like this .
medicine in mexico pharmacies: Certified Mexican pharmacy – п»їbest mexican online pharmacies
https://mexicopharmacy.win/# mexican online pharmacies prescription drugs
mexican online pharmacies prescription drugs: Certified Mexican pharmacy – reputable mexican pharmacies online
buy ed meds: Best ED meds online – where to get ed pills
The very next time I read a blog, I hope that it won’t disappoint me as much as this one. After all, I know it was my choice to read, but I truly believed you’d have something interesting to say. All I hear is a bunch of complaining about something that you could possibly fix if you weren’t too busy searching for attention.
It is my belief that mesothelioma is definitely the most fatal cancer. It’s got unusual characteristics. The more I look at it a lot more I am confident it does not work like a true solid human cancer. In the event mesothelioma is a rogue viral infection, then there is the possibility of developing a vaccine in addition to offering vaccination for asbestos uncovered people who are at high risk involving developing foreseeable future asbestos linked malignancies. Thanks for revealing your ideas on this important ailment.
http://edpillpharmacy.store/# online ed drugs
One thing I’d really like to comment on is that fat reduction plan fast is possible by the proper diet and exercise. Someone’s size not merely affects appearance, but also the entire quality of life. Self-esteem, depression, health risks, as well as physical abilities are impacted in excess weight. It is possible to just make everything right whilst still having a gain. Should this happen, a condition may be the primary cause. While a lot food but not enough body exercise are usually the culprit, common health concerns and traditionally used prescriptions might greatly amplify size. Thanks a bunch for your post here.
best online ed treatment: Best ED pills non prescription – buy ed medication online
I intended to put you that tiny note to help say thanks as before for all the nice tips you have contributed here. This has been so seriously open-handed with people like you to convey unhampered precisely what many people could possibly have made available for an e-book to end up making some profit for their own end, precisely considering that you might have tried it in the event you wanted. Those good tips likewise served to provide a fantastic way to be certain that other people online have similar dream just as my own to know many more in terms of this problem. I’m certain there are numerous more fun occasions in the future for individuals who discover your site. smart hemp gummies
buying prescription drugs in mexico online: Best online Mexican pharmacy – purple pharmacy mexico price list
I needed to write you this little bit of remark just to thank you once again on the remarkable pointers you have documented in this case. It has been strangely generous with people like you to present unhampered what some people would’ve made available for an electronic book to help make some cash for themselves, especially considering the fact that you might have done it if you desired. These solutions in addition worked to become easy way to comprehend other people online have similar keenness like my own to figure out somewhat more around this issue. I believe there are many more enjoyable sessions in the future for individuals that read your site. lottery defeated
http://edpillpharmacy.store/# erectile dysfunction medicine online
I have to thank you for the efforts you’ve put in penning this website. I am hoping to view the same high-grade blog posts from you in the future as well. In truth, your creative writing abilities has encouraged me to get my own blog now 😉
I needed to draft you that little note to finally say thank you over again regarding the extraordinary basics you have shown here. This is simply shockingly generous of people like you in giving unhampered exactly what a number of people might have sold for an e book to get some dough for their own end, especially now that you might well have tried it if you ever decided. The basics as well acted to be the easy way to fully grasp that the rest have the same fervor similar to my personal own to know many more regarding this condition. I am certain there are some more pleasant opportunities in the future for many who browse through your site. lottery defeated reviews
I wanted to send you this very small remark to thank you very much the moment again considering the superb tactics you have documented at this time. This is simply unbelievably generous with people like you to allow without restraint all that a number of us might have advertised as an electronic book in order to make some profit for their own end, notably considering that you might have tried it if you ever considered necessary. The tricks as well acted as a good way to fully grasp many people have a similar eagerness just as mine to find out great deal more regarding this condition. I am certain there are numerous more pleasurable opportunities up front for folks who scan your site. boostaro reviews
Needed to send you this tiny note to help say thank you the moment again on the lovely basics you’ve discussed on this website. This is simply unbelievably open-handed with people like you to allow freely precisely what some people could possibly have distributed for an ebook in order to make some cash on their own, most notably seeing that you might well have done it in case you desired. These tricks as well worked like a great way to fully grasp other individuals have the identical desire much like my personal own to know more and more on the topic of this condition. I’m certain there are some more enjoyable situations in the future for individuals who take a look at your website. boostaro
cheap ed: Cheap ED pills online – low cost ed meds
reputable indian online pharmacy: Online pharmacy – india online pharmacy
http://mexicopharmacy.win/# best online pharmacies in mexico
buy medicines online in india: Top mail order pharmacies – indian pharmacy online
mexican pharmaceuticals online: Best pharmacy in Mexico – mexican border pharmacies shipping to usa
http://indiapharmacy.shop/# reputable indian online pharmacy
This website was… how do I say it? Relevant!! Finally I have found something which helped me. Kudos.