利用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協助我們製作動畫，我們更可以把心思放在排版、樣式和內容上面，省去了撰寫計算動畫程式的時間，希望大家可以利用它做出很棒的作品！最後附上本範例的原始檔給大家參考。
Hi! I could have sworn I’ve visited your blog before but after browsing through some of the articles I realized it’s new to me. Nonetheless, I’m definitely delighted I found it and I’ll be book-marking it and checking back often.
There are definitely quite a lot of particulars like that to take into consideration. That may be a great point to bring up. I supply the ideas above as normal inspiration however clearly there are questions like the one you deliver up where a very powerful thing shall be working in sincere good faith. I don?t know if best practices have emerged round issues like that, however I am sure that your job is clearly recognized as a fair game. Each girls and boys really feel the affect of only a moment’s pleasure, for the rest of their lives.
Oh my goodness! an incredible write-up dude. Appreciate it Nonetheless I’m experiencing problem with ur rss . Don’t know why Unable to register for it. Perhaps there is everyone obtaining identical rss dilemma? Anybody who knows kindly respond. Thnkx
rogaine oral – finpecia online buy finasteride 1mg uk
You’re so awesome! I do not think I have read something like this before. So nice to discover another person with original thoughts on this subject matter. Seriously.. many thanks for starting this up. This web site is something that is needed on the internet, someone with a little originality.
This is a topic that is near to my heart… Take care! Where are your contact details though?
I am really enjoying this appearance/design of your site مشروع الأسبوع: التنصت على أبراج مراقبة الطائرات! | هندسة نت . Would you at any time encounter any internet browser interface problems? A number of our own readers sometimes complained about my website not operating appropriately within Internet Explorer but looks good inside Opera. Are there any kind of ideas to assist solve the issue? Plus my thoughts go out to those in tsunami we hope you are ok and safer !!!
order leflunomide 10mg online cheap – buy calcium carbonate for sale order generic cartidin
I am truly delighted to glance at this website posts which consists of
plenty of helpful information, thanks for providing these statistics.
What’s up, after reading this remarkable post i am also cheerful to share
my knowledge here with friends.
My blog post; เว็บบทความ
At this moment I am going to do my breakfast, later than having
my breakfast coming again to read other news.
Hello there, I do think your blog could be having internet browser compatibility issues. When I take a look at your website in Safari, it looks fine but when opening in IE, it’s got some overlapping issues. I simply wanted to provide you with a quick heads up! Aside from that, wonderful site.
I needed to thank you for this great read!! I definitely loved every little bit of it. I’ve got you saved as a favorite to look at new things you post…
Aw, this was a really nice post. Taking a few minutes and actual effort to generate a really good article… but what can I say… I put things off a whole lot and don’t manage to get nearly anything done.
First of all I would like to say superb blog!
I had a quick question in which I’d like to ask if you don’t mind.
I was interested to know how you center yourself and
clear your head before writing. I have had a hard time clearing my mind in getting my thoughts out
there. I do enjoy writing but it just seems like the first 10 to 15 minutes
tend to be lost just trying to figure out how to begin.
Any recommendations or tips? Many thanks!
mexican drugstore online
http://cmqpharma.com/# mexico drug stores pharmacies
п»їbest mexican online pharmacies
This web site is really a walk-through for all of the info you wanted about this and didn’t know who to ask. Glimpse here, and you’ll definitely discover it.
Your passion for this topic is evident.검색엔진최적화 메타태그
how to purchase durex gel – purchase latanoprost online xalatan us
order generic ascorbic acid – order compro generic buy compro online
I am writing to let you know of the outstanding experience my friend’s girl enjoyed using your web site. She came to understand so many details, with the inclusion of how it is like to have an excellent coaching style to let many people very easily fully grasp certain advanced subject areas. You actually did more than our own expected results. I appreciate you for distributing the productive, trustworthy, edifying not to mention unique thoughts on the topic to Jane.
This is a crucial topic—thanks for addressing it.프라그마틱 슬롯 체험
I think this is one of the most vital information for me.
And i am glad reading your article. But want to remark on some general things, The site
style is ideal, the articles is really great : D. Good job,
cheers
Also visit my blog … เว็บวาไรตี้
Your post is a valuable addition to the discussion.직장인 대출
Write more, thats all I have to say. Literally, it seems as though
you relied on the video to make your point. You definitely know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving us something informative to read?
my blog post: read more
I’m looking forward to your future posts!신생아 특례 대출
cyclobenzaprine 15mg uk – buy donepezil for sale vasotec 5mg uk
oral zofran 4mg – buy kemadrin generic buy requip without prescription
Aw, this was an extremely nice post. Taking the time
and actual effort to generate a great article but what can I say I procrastinate
a whole lot and don’t manage to get anything done.
You’re so cool! I don’t believe I have read a single thing like this before. So nice to find someone with genuine thoughts on this subject matter. Seriously.. thank you for starting this up. This web site is something that is required on the web, someone with a bit of originality.