利用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協助我們製作動畫，我們更可以把心思放在排版、樣式和內容上面，省去了撰寫計算動畫程式的時間，希望大家可以利用它做出很棒的作品！最後附上本範例的原始檔給大家參考。
Greate pieces. Keep writing such kind of info on your
site. Im really impressed by it.
Hi there, You’ve done an incredible job. I will definitely digg it and for my part suggest to my friends.
I am sure they’ll be benefited from this web site.
Feel free to visit my homepage – dentavim on amazon
https://sweetbonanza.network/# sweet bonanza free spin demo
Informative article, totally what I was looking for.
my blog … the growth matrixs
That is a really good tip especially to those fresh to the blogosphere.
Short but very precise information… Thank you for sharing this one.
A must read post!
Look at my website pronerve 6 scam
whoah this blog is great i love studying your posts. Keep up the good work!
You understand, lots of people are hunting around for this info, you could aid them greatly.
Here is my web-site; nerve fresh
slot siteleri 2024: slot bahis siteleri – en iyi slot siteler
Good post. I learn something totally new and challenging on websites I stumbleupon everyday. It’s always interesting to read through content from other writers and use something from their websites.
Фонбет промокод бонусы при регистрации промокод
Фонбет регулярно предлагает своим пользователям промокоды, которые позволяют получить дополнительные бонусы и привилегии. Например, промокод ‘GIFT200’ предоставляет новым клиентам бесплатную ставку или другие бонусы при регистрации. Промокоды могут распространяться через рекламные кампании, партнерские программы и специальные акции. Использование промокодов помогает пользователям увеличивать свои шансы на выигрыш и делает процесс игры более увлекательным и прибыльным.
Hi there, I desire to subscribe for this webpage to take latest updates, thus where can i do it please
help out.
Feel free to visit my web page :: nervefresh
Hurrah, that’s what I was seeking for, what a stuff!
existing here at this weblog, thanks admin of this site.
Also visit my blog: herpesyl reddit
Does your website have a contact page? I’m having a tough time locating
it but, I’d like to shoot you an email. I’ve got some suggestions for your blog
you might be interested in hearing. Either way, great website
and I look forward to seeing it develop over time.
Look at my homepage; fitspresso coffee loophole reviews
I love your blog.. very nice colors & theme. Did
you create this website yourself or did you hire someone to do
it for you? Plz answer back as I’m looking to construct my own blog and would
like to find out where u got this from. cheers
My homepage; what are the ingredients in prodentim
guvenilir slot siteleri 2024: en iyi slot siteler – guvenilir slot siteleri 2024
Yes! Finally someone writes about testoprime.
We absolutely love your blog and find a lot of your post’s to be
what precisely I’m looking for. Do you offer guest writers to write content for
you personally? I wouldn’t mind producing a post or elaborating on most of
the subjects you write concerning here. Again, awesome web site!
Also visit my site – provadent for gums and teeth
Thank you for the good writeup. It in reality was a amusement account it.
Glance complicated to more added agreeable from you!
By the way, how could we keep in touch?
My website :: can i use clear lungs with proair
I was wondering if you ever considered changing the structure 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 one or 2
pictures. Maybe you could space it out better?
Feel free to surf to my blog post :: how much is provadent
Greate pieces. Keep writing such kind of information on your
page. Im really impressed by your site.
Hey there, You’ve performed an incredible job. I’ll definitely digg it and
personally recommend to my friends. I am sure they’ll be benefited from this web site.
Feel free to visit my web site; what is growth matrix
I was able to find good advice from your articles.
What’s up to all, how is everything, I think every one is getting more from this web page, and your views are
nice in favor of new users.
my page: para que sirve testoprim-d
Have you ever considered about adding a little bit
more than just your articles? I mean, what you say is fundamental and all.
Nevertheless think about if you added some great photos
or videos to give your posts more, “pop”! Your content is excellent but with images and videos, this website could definitely be one of the greatest in its niche.
Fantastic blog!
Visit my blog dentavim kopen
Wow! Finally I got a blog from where I be capable of genuinely take
useful data regarding my study and knowledge.
my website … fitspresso sugar balance
Amazing blog! Is your theme custom made or did you download it from somewhere?
A theme like yours with a few simple tweeks would really
make my blog jump out. Please let me know where you got your theme.
Thanks
Feel free to surf to my blog post … herpesyl ingredients
Hi there! I simply wish to offer you a big thumbs up for your great
info you have got here on this post. I’ll be returning to your
web site for more soon.
Feel free to surf to my site: nerve fresh reviews and complaints
Hey There. I found your blog using msn. This is an extremely well written article.
I will make sure to bookmark it and come back to read more of your useful information. Thanks for the post.
I will certainly return.
Feel free to visit my homepage; lottery defeater software scam
Great post. I was checking continuously this blog and I’m impressed!
Extremely useful information specially the last part 🙂 I care for such info
much. I was looking for this certain information for a very long time.
Thank you and good luck.
Also visit my web site: amazon herpesyl
Thanks a lot for providing individuals with a very pleasant chance to discover important secrets from this web site. It is often so good and as well , jam-packed with a good time for me personally and my office mates to visit your site at least three times in one week to learn the new stuff you have got. Not to mention, I’m at all times amazed with all the unique thoughts you give. Certain 2 points in this posting are essentially the best we’ve ever had.
I don’t know whether it’s just me or if everyone else encountering problems
with your website. It looks like some of the written text within your posts are running off the screen. Can somebody else please comment and let me know if this is happening to them as
well? This may be a problem with my browser because I’ve had
this happen previously. Appreciate it
Feel free to surf to my blog post: provadent
Yes! Finally someone writes about provadent reviews.
Hey! I could have sworn I’ve been to this website before but after checking
through some of the post I realized it’s new to me.
Nonetheless, I’m definitely happy I found it and I’ll be bookmarking and checking back frequently!
my blog post: billionaire brain wave review