利用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協助我們製作動畫，我們更可以把心思放在排版、樣式和內容上面，省去了撰寫計算動畫程式的時間，希望大家可以利用它做出很棒的作品！最後附上本範例的原始檔給大家參考。
Helpful info. Fortunate me I found your website by chance, and I am
stunned why this accident didn’t came about earlier!
I bookmarked it.
Feel free to surf to my blog post; pronerve 6
I wanted to compose you a tiny observation to give thanks once again for your personal exceptional methods you have shown at this time. This has been quite tremendously generous with you to offer extensively just what most people would have marketed for an ebook in order to make some profit on their own, specifically given that you could possibly have tried it if you considered necessary. Those pointers likewise worked like a great way to recognize that other people online have the identical dream just as mine to know the truth lots more with reference to this problem. I’m certain there are lots of more pleasurable opportunities ahead for individuals that check out your site. quietum plus reviews
I intended to write you that very small observation just to thank you very much once again for all the marvelous ideas you’ve shown in this article. It was so unbelievably open-handed of you to allow easily what exactly a few individuals might have made available as an electronic book to help make some money for themselves, precisely considering that you might have tried it in case you decided. The advice as well served like a great way to fully grasp that someone else have a similar interest the same as my personal own to learn more and more regarding this issue. I am certain there are lots of more pleasant sessions in the future for many who look into your site. quietum plus
I wanted to send you the little bit of note to be able to say thanks a lot once again with the gorgeous ideas you have contributed here. It has been unbelievably generous of people like you to deliver unhampered exactly what a number of people could have supplied as an e-book to make some dough on their own, primarily given that you could have done it if you decided. Those tips as well served to become a good way to understand that some people have the identical fervor like my own to know the truth a great deal more pertaining to this problem. I know there are many more pleasant moments ahead for individuals who discover your site. java burn
I intended to compose you that very small remark in order to say thanks once again for the pleasing views you have discussed on this page. It’s really seriously generous of people like you to give extensively all that a lot of folks would’ve offered for an e book in order to make some dough for their own end, most notably now that you might have done it if you considered necessary. Those things additionally acted as the good way to understand that some people have a similar zeal really like my personal own to learn more and more when considering this problem. I am certain there are a lot more fun instances up front for folks who check out your blog. java burn reviews
I intended to compose you one little word to help say thank you yet again for these splendid suggestions you have documented in this article. It’s certainly surprisingly generous with people like you to convey openly just what a few individuals could have offered as an electronic book in order to make some profit for their own end, even more so considering that you could possibly have tried it if you ever wanted. These strategies additionally acted as the good way to comprehend other individuals have similar interest much like my own to know a whole lot more related to this condition. Certainly there are several more pleasant occasions in the future for individuals that see your blog. pronerve 6 reviews
That is a really good tip especially to those fresh to the blogosphere. Simple but very precise info… Thank you for sharing this one. A must read article!
I intended to compose you a little observation to thank you the moment again with your splendid advice you have discussed in this article. It was incredibly generous with people like you to grant easily all a few people could possibly have marketed as an e-book to help make some cash for themselves, especially considering that you might well have done it in the event you decided. These guidelines likewise worked to be the easy way to comprehend the rest have a similar keenness the same as mine to learn somewhat more with reference to this condition. I’m sure there are numerous more pleasurable moments in the future for those who take a look at your website. prostadine drops
http://tadalafil.auction/# buy cialis 20mg
I needed to draft you this little bit of remark so as to say thank you yet again for all the lovely information you have contributed above. It’s so tremendously generous with you to give unreservedly all that a number of people could have marketed for an e-book to make some bucks on their own, notably considering the fact that you might have done it if you wanted. These techniques also served to provide a easy way to fully grasp that other people online have the identical dreams just as my own to know the truth much more on the topic of this condition. I’m certain there are numerous more pleasurable instances ahead for individuals who looked over your blog. prostadine
generic viagra: Cheap Viagra online – canadian viagra
viagra dosage recommendations: Cheap generic Viagra – buy viagra online without a prescription
http://tadalafil.auction/# where can i buy cialis
Pretty! This was an incredibly wonderful article. Many thanks for providing this information.
does cialis really work: Generic Tadalafil 20mg price – cialis super active
free samples viagra cialis: where can i buy cialis in canada – how can i get cialis in australia
Needed to write you the tiny note so as to thank you yet again for all the splendid tactics you’ve contributed in this article. It was really tremendously open-handed with you to convey openly exactly what numerous people would’ve marketed as an electronic book to help with making some money for themselves, most importantly given that you could have tried it in case you decided. Those thoughts likewise worked to be the good way to fully grasp that other individuals have similar zeal like my very own to grasp significantly more with reference to this condition. I believe there are numerous more pleasurable times in the future for those who discover your blog. tonic greens reviews
I wanted to send you the little bit of note to finally thank you very much once again regarding the great tactics you have discussed at this time. It is so surprisingly generous with people like you to make extensively exactly what a number of people would’ve offered for sale for an electronic book to earn some bucks for themselves, especially now that you could possibly have done it in case you desired. These inspiring ideas as well acted to become a fantastic way to comprehend other people online have a similar desire similar to mine to understand much more with regard to this issue. I am certain there are several more pleasant instances ahead for individuals who find out your blog post. tonic greens
I wanted to post you this very little remark so as to say thanks over again considering the lovely advice you have discussed on this site. This is so tremendously generous with you to give unhampered exactly what a few individuals would’ve supplied as an e-book to help make some profit for their own end, most notably given that you might have done it in the event you desired. Those tips in addition worked to become good way to be certain that many people have similar keenness just as my very own to see much more concerning this issue. I am sure there are numerous more pleasant occasions in the future for many who read carefully your blog post. the growth matrix reviews
I needed to write you one little bit of observation just to say thanks a lot yet again for those stunning principles you’ve featured above. This is tremendously open-handed with you to give openly what exactly many individuals would have supplied for an electronic book to end up making some money for their own end, even more so considering that you might have done it in case you considered necessary. These ideas in addition acted to be a fantastic way to know that some people have a similar passion similar to mine to see a whole lot more around this problem. I know there are numerous more pleasant situations up front for many who scan through your website. the growth matrix
viagra: Viagra online price – buy generic viagra online
Everything is very open with a precise explanation of the issues. It was truly informative. Your website is extremely helpful. Thanks for sharing!
Needed to draft you a very little remark to thank you the moment again relating to the beautiful information you have shared above. It’s remarkably open-handed with people like you to convey openly precisely what a number of us could possibly have supplied for an e-book to end up making some bucks on their own, chiefly considering that you might well have tried it in case you wanted. Those things in addition acted to be the good way to understand that other people have a similar dreams really like my very own to understand very much more in terms of this condition. I am sure there are many more fun instances ahead for people who browse through your blog post. lottery defeater software reviews
cialis overnight delivery: Buy Cialis online – cialis viagra mail order uk discrete billing
http://sildenafil.llc/# buy viagra online
I was excited to uncover this site. I wanted to thank you for your time for this fantastic read!! I definitely savored every little bit of it and i also have you saved to fav to see new information on your website.
I wanted to draft you a tiny remark to help give many thanks as before for the pretty information you have shown on this site. It is really strangely generous with people like you to make publicly exactly what many people would’ve marketed as an electronic book to help make some bucks for their own end, primarily given that you might have done it if you desired. Those strategies as well served to be the good way to comprehend most people have the identical keenness the same as my very own to learn a little more with regards to this condition. I am certain there are some more fun situations in the future for those who read through your site. prodentim buy
Nice post. I understand something more difficult on different blogs everyday. Most commonly it is stimulating to study content off their writers and use a little something from their site. I’d would rather apply certain with the content on my blog whether you don’t mind. Natually I’ll provide link with your internet weblog. Thank you for sharing.
Needed to create you a very little word to finally give many thanks yet again for those extraordinary tips you’ve shared on this site. This is quite seriously generous with you to supply unhampered all a few individuals might have marketed as an e-book to help with making some cash for themselves, primarily given that you might have tried it in the event you wanted. Those solutions in addition served like a great way to recognize that other people online have the identical passion much like my personal own to find out very much more in regard to this issue. I believe there are some more enjoyable times up front for many who see your blog. alpha bites
I intended to put you that little word to be able to thank you so much the moment again for these pleasant strategies you’ve contributed at this time. This has been really wonderfully open-handed with you to make freely all a number of people might have supplied for an ebook to help make some money for themselves, specifically given that you might have tried it in case you desired. The points also worked like a good way to recognize that someone else have similar eagerness the same as mine to know the truth a great deal more in terms of this matter. I’m certain there are some more pleasurable moments ahead for individuals who check out your blog. alphabites