利用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協助我們製作動畫，我們更可以把心思放在排版、樣式和內容上面，省去了撰寫計算動畫程式的時間，希望大家可以利用它做出很棒的作品！最後附上本範例的原始檔給大家參考。
I truly love your blog.. Excellent colors & theme. Did you make this amazing site yourself? Please reply back as I’m wanting to create my very own site and want to know where you got this from or exactly what the theme is called. Many thanks.
Hey there! I’m at work surfing around your blog from my new iphone!
Just wanted to say I love reading your blog and look forward to
all your posts! Carry on the superb work!
You’re so interesting! I don’t believe I’ve read through something like that before. So nice to discover somebody with a few original thoughts on this subject matter. Really.. thanks for starting this up. This website is something that’s needed on the internet, someone with a bit of originality.
Is it your post or maybe somebody else wrote it? Because i`m thinking about this situation and i don`t know what to think about it. I`m really confused that.
You made various good points there. I did a search on the topic and found most people will have the same opinion with your blog.
I’m not sure where you are getting your information, but good topic. I needs to spend some time learning much more or understanding more. Thanks for magnificent information I was looking for this information for my mission.
When I originally commented I clicked the -Notify me when new surveys are added- checkbox and already when a comment is added I purchase four emails sticking with the same comment. Can there be by any means it is possible to get rid of me from that service? Thanks!
When I originally commented I clicked the -Notify me when new comments are added- checkbox and already when a comment is added I receive four emails with similar comment. Perhaps there is in whatever way it is possible to get rid of me from that service? Thanks!
Hello! I just wish to give you a big thumbs up for the excellent information you’ve got right here on this post. I am returning to your website for more soon.
I am typically to blogging and that i actually appreciate your articles. This great article has really peaks my interest. My goal is to bookmark your web blog and keep checking for brand new details.
It’s difficult to find well-informed people for this topic, however, you sound like you know what you’re talking about! Thanks
That’s why you have to have effective web based business home keep when it comes to taking items right your individual web-based online business. cash
Chaga mushroom coffee been recently brought to plenty of everything about simply because of the Ukrainian article author Alexandr Solzhenitsyn by it’s new ‘Cancer Ward’ in which traditional qualities is generally cured of a tumors on the help consume. Siberian Chaga
I really like your blog.. very nice colors & theme. Did you make this website yourself or did you hire someone to do it for you? Plz answer back as I’m looking to design my own blog and would like to know where u got this from. thanks a lot
I think this internet site holds very excellent indited subject material articles .
Great information. Lucky me I came across your blog by chance (stumbleupon). I have saved as a favorite for later!
Real nice style and good subject material, practically nothing else we require : D.
Здесь вы найдете разнообразный видео контент отдых ялта интурист цены
This internet site is my aspiration, real great style and perfect written content.
I was wondering if you ever thought of changing the
page layout of your blog? Its very well written; I love what youve got to say.
But maybe you could a little more in the way of content so people could connect with it better.
Youve got an awful lot of text for only having 1 or two pictures.
Maybe you could space it out better?
Here is my site สาระน่ารู้
Howdy! Do you know if they make any plugins to help
with Search Engine Optimization? I’m trying to get my blog to
rank for some targeted keywords but I’m not seeing very good
success. If you know of any please share. Cheers!
You can read similar article here
I wanted to write you this tiny remark so as to give thanks the moment again for the nice principles you’ve featured on this page. It was quite generous of people like you to allow easily just what numerous people could possibly have sold as an ebook to get some cash on their own, and in particular considering that you could possibly have tried it in the event you considered necessary. The creative ideas also worked to be the great way to comprehend the rest have the identical keenness similar to my own to know the truth much more pertaining to this condition. I am certain there are lots of more fun moments ahead for individuals that read through your site. java burn reviews
I wanted to send you the bit of note so as to say thanks again with the remarkable suggestions you’ve contributed on this website. This has been really wonderfully open-handed of people like you to supply extensively precisely what some people would have made available as an ebook in making some cash for their own end, chiefly now that you could have done it in the event you wanted. Those creative ideas likewise served to provide a great way to realize that most people have similar zeal just like my personal own to find out a whole lot more when considering this matter. I am certain there are thousands of more enjoyable opportunities up front for people who read through your site. the genius wave
You’re so cool! I don’t suppose I’ve read something like that before. So nice to find someone with a few genuine thoughts on this issue. Seriously.. thank you for starting this up. This website is something that’s needed on the internet, someone with a bit of originality.
You have made some decent points there. I checked on the internet for additional information about the issue and found most people will go along with your views on this web site.
Very nice post. I just stumbled upon your weblog and wanted to say that I have truly enjoyed surfing around your blog posts. After all I will be subscribing to your rss feed and I hope you write again soon!
I seriously love your website.. Great colors & theme. Did you make this amazing site yourself? Please reply back as I’m planning to create my own personal blog and would love to learn where you got this from or what the theme is named. Many thanks.
buy monograph generic – pletal cheap buy pletal generic
Undeniably believe that which you said. Your favorite
reason seemed to be on the internet the easiest thing to be aware of.
I say to you, I definitely get annoyed while people think about worries that they just don’t know about.
You managed to hit the nail upon the top as well as defined out the whole
thing without having side-effects , people could take a signal.
Will likely be back to get more. Thanks
You have mentioned very interesting points! ps nice internet site. “In music the passions enjoy themselves.” by Friedrich Wilhelm Nietzsche.