利用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協助我們製作動畫，我們更可以把心思放在排版、樣式和內容上面，省去了撰寫計算動畫程式的時間，希望大家可以利用它做出很棒的作品！最後附上本範例的原始檔給大家參考。
Spot on with this write-up, I honestly believe this web site needs a great deal more attention. I’ll probably be returning to read more, thanks for the advice!
http://indiapharmacy.shop/# indian pharmacies safe
india online pharmacy: Online pharmacy USA – Online medicine order
I just could not go away your web site prior to suggesting that
I really loved the standard info an individual supply to your visitors?
Is going to be again steadily to inspect new posts
Here is my blog post: manup gummies scam
http://edpillpharmacy.store/# online ed drugs
I intended to compose you this bit of observation so as to thank you very much as before for these marvelous knowledge you’ve discussed in this case. It’s so incredibly open-handed with people like you to make extensively all that a few people might have supplied for an e book in making some money for themselves, and in particular seeing that you could have tried it in the event you decided. These pointers also served to be the fantastic way to realize that many people have the same dream just as mine to figure out more and more with regard to this matter. I am certain there are some more fun sessions ahead for many who scan your site. nitric boost ultra
I intended to post you the very small note just to thank you so much as before relating to the amazing strategies you have shared on this website. It was really strangely open-handed with people like you to provide unreservedly what exactly most people might have marketed for an e book to generate some money on their own, specifically seeing that you might have done it if you ever wanted. These tactics as well acted to be the fantastic way to understand that the rest have similar fervor just like mine to know a great deal more with regard to this matter. I’m sure there are millions of more pleasurable sessions ahead for individuals who scan through your website. nitric boost ultra
You ought to be a part of a contest for one of the best sites on the internet. I’m going to highly recommend this website!
I needed to draft you that tiny note to be able to say thanks once again with your lovely things you’ve shared on this website. It was remarkably generous of you to give unhampered precisely what a few individuals could have offered as an ebook to make some bucks on their own, and in particular considering the fact that you might well have tried it in the event you decided. The smart ideas also acted as a fantastic way to know that other people have a similar zeal much like my personal own to learn a good deal more in terms of this condition. I’m certain there are thousands of more fun sessions ahead for those who browse through your blog post. sight care reviews
Online medicine home delivery: Best Indian pharmacy – п»їlegitimate online pharmacies india
http://edpillpharmacy.store/# erectile dysfunction medications online
I needed to send you a very little observation so as to thank you very much again for these unique solutions you’ve discussed in this case. This has been simply surprisingly generous of you in giving without restraint all that a number of us would’ve marketed as an electronic book to help make some profit on their own, primarily considering the fact that you might have done it if you ever decided. Those strategies as well acted to become great way to fully grasp that other individuals have similar eagerness really like my very own to know a whole lot more when it comes to this problem. I’m certain there are thousands of more fun occasions ahead for those who find out your website. sight care pills
pharmacy website india: Indian pharmacy international shipping – cheapest online pharmacy india
I intended to write you one little bit of note to give thanks yet again about the stunning guidelines you have provided in this case. It was really wonderfully generous of people like you to convey easily all that a few individuals would have advertised as an e book in making some money for themselves, certainly considering that you could possibly have tried it if you considered necessary. These thoughts as well served to become a fantastic way to recognize that other individuals have the same eagerness just like mine to grasp a little more when it comes to this matter. Certainly there are several more pleasurable periods up front for many who check out your blog. tonic greens reviews
I needed to compose you this bit of remark just to thank you over again on your pretty suggestions you’ve contributed on this site. It has been generous with you in giving openly what exactly a few individuals would’ve supplied for an electronic book to generate some cash for themselves, precisely now that you might have done it in the event you wanted. Those secrets likewise served to be a fantastic way to understand that most people have the same dreams really like my own to learn more around this matter. I know there are thousands of more pleasant occasions up front for those who examine your site. tonic greens
You made some decent points there. I checked on the net for more information about the issue and found most people will go along with your views on this site.
I intended to send you the bit of observation to finally thank you very much the moment again considering the exceptional opinions you have contributed on this site. It is open-handed with people like you to convey publicly exactly what most people would have offered for sale for an e book to get some cash for themselves, most notably now that you could possibly have tried it if you wanted. Those basics also worked as a great way to be aware that some people have a similar eagerness just like my own to find out very much more with respect to this issue. I’m certain there are a lot more pleasant periods up front for folks who examine your blog. tonic greens
I intended to put you the bit of remark to help say thanks a lot yet again with your breathtaking secrets you’ve provided on this website. It was unbelievably open-handed with people like you to offer easily all most people would have made available for an e book to make some profit for their own end, primarily since you might well have tried it in the event you decided. These thoughts as well acted to provide a great way to be aware that other people have similar fervor the same as mine to grasp way more on the subject of this matter. I am certain there are millions of more enjoyable opportunities ahead for many who examine your website. tonic greens
http://indiapharmacy.shop/# indian pharmacy online
buying from online mexican pharmacy: Best online Mexican pharmacy – mexican mail order pharmacies
medicine in mexico pharmacies: Certified Mexican pharmacy – mexican border pharmacies shipping to usa
imusporin us – buy gloperba online cheap order colcrys online cheap
http://edpillpharmacy.store/# erectile dysfunction online
buying prescription drugs in mexico: Best online Mexican pharmacy – buying from online mexican pharmacy
top 10 pharmacies in india: Online pharmacy USA – buy medicines online in india
http://edpillpharmacy.store/# cheapest online ed meds
Everything is very open with a clear clarification of the challenges. It was truly informative. Your website is useful. Thank you for sharing!
Great web site you’ve got here.. It’s difficult to find quality writing like yours nowadays. I truly appreciate individuals like you! Take care!!
I’m not that much of a internet reader to be honest but your blogs really nice, keep it
up! I’ll go ahead and bookmark your website to come back in the future.
All the best
indian pharmacy online: Best Indian pharmacy – buy medicines online in india