利用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協助我們製作動畫，我們更可以把心思放在排版、樣式和內容上面，省去了撰寫計算動畫程式的時間，希望大家可以利用它做出很棒的作品！最後附上本範例的原始檔給大家參考。
https://indiadrugs.pro/# online pharmacy india
Прикольные анекдоты. История анекдотов.
{Tôi rất hài lòng khám phá trang web tuyệt vời này. Tôi cần cảm ơn bạn {vì đã|dành thời gian cho|chỉ vì điều này|vì điều này|cho bài đọc tuyệt vời này!! Tôi chắc chắn đánh giá cao từng của nó và tôi đã đã đánh dấu trang để xem điều mới trong blog của bạn.|Tôi có thể chỉ nói rằng thật nhẹ nhõm để khám phá một người mà thực sự hiểu họ là gì thảo luận trực tuyến. Bạn chắc chắn biết cách đưa một rắc rối ra ánh sáng và làm cho nó trở nên quan trọng. Nhiều người hơn nữa cần phải kiểm tra điều này và hiểu khía cạnh này của. Tôi đã ngạc nhiên bạn không nổi tiếng hơn vì bạn chắc chắn có món quà.|Tốt bài đăng. Tôi chắc chắn đánh giá cao trang web này. Tiếp tục viết!|Thật khó tìm những người có hiểu biết sâu rộng về điều này, tuy nhiên, bạn nghe có vẻ bạn biết mình đang nói gì! Cảm ơn|Bạn nên tham gia một cuộc thi dành cho một blog trực tuyến hữu ích nhất. Tôi sẽ khuyến nghị trang web này!|Một cuộc thảo luận thú vị đáng giá bình luận. Tôi tin rằng bạn nên viết thêm về chủ đề này, nó có thể không là một điều cấm kỵ vấn đề nhưng điển hình mọi người không nói về chủ đề những điều này. Đến phần tiếp theo! Chúc mọi điều tốt đẹp nhất!|Chào buổi sáng! Tôi chỉ muốn cho bạn một rất to cho thông tin xuất sắc bạn có ngay tại đây trên bài đăng này. Tôi sẽ là quay lại blog của bạn để biết thêm thông tin sớm nhất.|Khi tôi ban đầu để lại bình luận tôi có vẻ như đã nhấp hộp kiểm -Thông báo cho tôi khi có bình luận mới- và từ bây giờ bất cứ khi nào có bình luận được thêm vào tôi nhận được bốn email cùng chính xác một bình luận. Có lẽ có một phương pháp dễ dàng bạn có thể xóa tôi khỏi dịch vụ đó không? Chúc mừng.|Lần sau Tôi đọc một blog, Tôi hy vọng rằng nó sẽ không làm tôi thất vọng nhiều như bài này. Ý tôi là, Vâng, đó là sự lựa chọn của tôi để đọc hết, dù sao thì tôi thực sự nghĩ bạn sẽ có điều gì đó hữu ích để nói về. Tất cả những gì tôi nghe được là một loạt tiếng rên rỉ về điều gì đó mà bạn có thể sửa nếu bạn không quá bận tìm kiếm sự chú ý.|Đúng với bài viết này, tôi thành thật tin rằng trang web tuyệt vời này cần nhiều hơn nữa sự chú ý.
https://mexicanpharma.icu/# mexican border pharmacies shipping to usa
canadian pharmacy 24h com safe: canadian pharmacy phone number – pharmacy in canada
global pharmacy canada: Cheapest online pharmacy – trustworthy canadian pharmacy
canadian pharmacy prices: Pharmacies in Canada that ship to the US – best canadian pharmacy
medication from mexico pharmacy: mexican border pharmacies shipping to usa – purple pharmacy mexico price list
canada pharmacy online legit Cheapest online pharmacy canadian pharmacy 24h com safe
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: ремонт крупногабаритной техники в тюмени
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
{Tôi cực kỳ hài lòng khám phá trang web tuyệt vời này. Tôi muốn cảm ơn bạn {vì đã|dành thời gian cho|chỉ vì điều này|vì điều này|cho bài đọc tuyệt vời này!! Tôi chắc chắn yêu thích từng một phần nó và tôi cũng đã đánh dấu để xem thông tin mới trên trang web của bạn.|Tôi có thể chỉ nói rằng thật thoải mái để khám phá một người thực sự biết họ là gì đang nói về trên internet. Bạn chắc chắn nhận ra cách đưa một rắc rối ra ánh sáng và làm cho nó trở nên quan trọng. Nhiều người hơn nữa phải đọc điều này và hiểu khía cạnh này của. Tôi không thể tin bạn không nổi tiếng hơn vì bạn chắc chắn có món quà.|Rất tốt bài đăng. Tôi chắc chắn đánh giá cao trang web này. Tiếp tục với nó!|Thật khó tìm những người hiểu biết về điều này, nhưng bạn nghe có vẻ bạn biết mình đang nói gì! Cảm ơn|Bạn nên là một phần của một cuộc thi dành cho một trang web trực tuyến có chất lượng cao nhất. Tôi sẽ Rất khuyến nghị blog này!|Một hấp dẫn đáng giá bình luận. Tôi tin rằng bạn cần viết thêm về chủ đề này, nó có thể không là một điều cấm kỵ vấn đề nhưng nói chung mọi người không nói về vấn đề như vậy. Đến phần tiếp theo! Cảm ơn rất nhiều.|Chào bạn! Tôi chỉ muốn cho bạn một rất cho thông tin xuất sắc bạn có ngay tại đây trên bài đăng này. Tôi đang quay lại blog của bạn để biết thêm thông tin sớm nhất.|Khi tôi ban đầu bình luận tôi có vẻ như đã nhấp vào hộp kiểm -Thông báo cho tôi khi có bình luận mới- và bây giờ mỗi lần được thêm vào tôi nhận được bốn email có cùng nội dung. Có một cách bạn có thể xóa tôi khỏi dịch vụ đó không? Cảm ơn rất nhiều.|Lần sau Tôi đọc một blog, Hy vọng rằng nó không thất bại nhiều như bài này. Ý tôi là, Tôi biết điều đó là sự lựa chọn của tôi để đọc, nhưng tôi thực sự tin bạn sẽ có điều gì đó hữu ích để nói về. Tất cả những gì tôi nghe được là một loạt tiếng rên rỉ về điều gì đó mà bạn có thể sửa nếu bạn không quá bận tìm kiếm sự chú ý.|Đúng với bài viết này, tôi hoàn toàn tin trang web này cần nhiều hơn nữa sự chú ý.
Hi, Neat post. There is a problem together with your website in internet explorer, would test
this? IE still is the market leader and a huge portion of folks will pass
over your fantastic writing because of this problem.
my homepage – tonic greens herpes cure
{Tôi háo hức để tìm thấy trang web này. Tôi muốn cảm ơn bạn {vì đã|dành thời gian cho|chỉ vì điều này|vì điều này|cho bài đọc tuyệt vời này!! Tôi chắc chắn thích thú từng một chút nó và tôi đã đánh dấu để xem thông tin mới trong trang web của bạn.|Tôi có thể chỉ nói rằng thật thoải mái để khám phá một cá nhân mà thực sự biết họ là gì thảo luận trên web. Bạn chắc chắn hiểu cách đưa một vấn đề ra ánh sáng và làm cho nó trở nên quan trọng. Nhiều người hơn nữa thực sự cần đọc điều này và hiểu khía cạnh này câu chuyện của bạn. Thật ngạc nhiên bạn không nổi tiếng hơn vì bạn chắc chắn nhất sở hữu món quà.|Rất tốt bài viết. Tôi chắc chắn đánh giá cao trang web này. Tiếp tục làm tốt!|Thật khó đến những người hiểu biết cho điều này, nhưng bạn có vẻ bạn biết mình đang nói gì! Cảm ơn|Bạn nên là một phần của một cuộc thi dành cho một trang web trên internet có chất lượng cao nhất. Tôi sẽ khuyến nghị trang web này!|Một cuộc thảo luận thú vị đáng giá bình luận. Tôi tin rằng bạn nên xuất bản thêm về vấn đề này, nó có thể không là một điều cấm kỵ chủ đề nhưng điển hình mọi người không thảo luận chủ đề những điều này. Đến phần tiếp theo! Chúc mừng!|Xin chào! Tôi chỉ muốn cho bạn một rất to cho thông tin tuyệt vời bạn có ngay tại đây trên bài đăng này. Tôi sẽ là quay lại blog của bạn để biết thêm thông tin sớm nhất.|Khi tôi ban đầu bình luận tôi có vẻ như đã nhấp hộp kiểm -Thông báo cho tôi khi có bình luận mới- và bây giờ mỗi lần được thêm vào tôi nhận được 4 email có cùng nội dung. Có lẽ có một phương tiện bạn có thể xóa tôi khỏi dịch vụ đó không? Chúc mừng.|Lần sau Tôi đọc một blog, Tôi hy vọng rằng nó không thất bại nhiều như bài này. Rốt cuộc, Vâng, đó là sự lựa chọn của tôi để đọc hết, nhưng tôi thực sự nghĩ bạn sẽ có điều gì đó thú vị để nói về. Tất cả những gì tôi nghe được là một loạt phàn nàn về điều gì đó mà bạn có thể sửa nếu bạn không quá bận tìm kiếm sự chú ý.|Đúng với bài viết này, tôi nghiêm túc nghĩ trang web tuyệt vời này cần nhiều hơn nữa sự chú ý.
Получите промокод для 1win и активируйте бонусы на сайте через 1win рабочее зеркало
http://rybelsus.tech/# buy semaglutide online
Получите промокод для 1win и активируйте бонусы на сайте через 1win сайт
Сайт предоставляет информацию о биодобавках http://биодобавки.рф состав, польза и рекомендации по применению. Здесь вы найдёте обзоры эффективных добавок для улучшения здоровья, иммунитета и энергии на основе научных данных и экспертных мнений.
buy ventolin tablets online: buy ventolin online nz – ventolin capsule
lasix 40mg: furosemide online – lasix generic
buy ventolin over the counter nz: Ventolin inhaler best price – ventolin over the counter uk
Бонус Код Букмекерской Мелбет При Регистрации – это код для новых пользователей, так как он дает денежные призы на первый депозит новым игрокам. С их помощью вы получите на 30% больше возврата средств, чем при стандартной регистрации, или фрибет. Букмекерская контора Мелбет работает на рынке беттинга уже довольно долго. За время существования она успела получить доверие многотысячной аудитории игроков и сформировать четкую стратегию взаимодействия с клиентами. Для всех участников БК доступны различные поощрения, подарки и акции. Среди них – активировать промокод, расширяющий список привилегий для нового, или активного пользователя.
rybelsus price: Semaglutide pharmacy price – buy rybelsus
rybelsus: rybelsus – Rybelsus 7mg
lasix online: buy furosemide – furosemida 40 mg
{Tôi rất vui để tìm thấy trang này. Tôi muốn cảm ơn bạn {vì đã|dành thời gian cho|chỉ vì điều này|vì điều này|cho bài đọc tuyệt vời này!! Tôi chắc chắn đánh giá cao từng của nó và tôi đã lưu làm mục ưa thích để xem thông tin mới trong trang web của bạn.|Tôi có thể chỉ nói rằng thật thoải mái để khám phá một người mà thực sự biết họ là gì đang nói về trên mạng. Bạn chắc chắn biết cách đưa một vấn đề ra ánh sáng và làm cho nó trở nên quan trọng. Nhiều người hơn nữa cần phải kiểm tra điều này và hiểu khía cạnh này của. Tôi đã ngạc nhiên bạn không nổi tiếng hơn cho rằng bạn chắc chắn có món quà.|Tốt bài viết trên blog. Tôi chắc chắn yêu thích trang web này. Cảm ơn!|Thật khó tìm những người có hiểu biết sâu rộng về điều này, nhưng bạn nghe có vẻ bạn biết mình đang nói gì! Cảm ơn|Bạn cần là một phần của một cuộc thi dành cho một trang web trực tuyến tốt nhất. Tôi sẽ khuyến nghị trang web này!|Một hấp dẫn chắc chắn đáng giá bình luận. Tôi tin rằng bạn cần xuất bản thêm về chủ đề này, nó có thể không là một điều cấm kỵ chủ đề nhưng thường xuyên mọi người không nói về chủ đề như vậy. Đến phần tiếp theo! Cảm ơn rất nhiều.|Xin chào! Tôi chỉ muốn cho bạn một rất cho thông tin tuyệt vời bạn có ở đây trên bài đăng này. Tôi sẽ là trở lại trang web của bạn để biết thêm thông tin sớm nhất.|Khi tôi ban đầu để lại bình luận tôi có vẻ như đã nhấp hộp kiểm -Thông báo cho tôi khi có bình luận mới- và từ bây giờ bất cứ khi nào có bình luận được thêm vào tôi nhận được bốn email có cùng nội dung. Phải có một cách bạn có thể xóa tôi khỏi dịch vụ đó không? Chúc mừng.|Lần sau nữa Tôi đọc một blog, Tôi hy vọng rằng nó không làm tôi thất vọng nhiều như bài này. Ý tôi là, Tôi biết điều đó là sự lựa chọn của tôi để đọc hết, dù sao thì tôi thực sự nghĩ bạn sẽ có điều gì đó hữu ích để nói về. Tất cả những gì tôi nghe được là một loạt tiếng rên rỉ về điều gì đó mà bạn có thể sửa nếu bạn không quá bận tìm kiếm sự chú ý.|Đúng với bài viết này, tôi thực sự cảm thấy trang web này cần nhiều hơn nữa sự chú ý.
Hi! This is my first visit to your blog! We are a collection of volunteers and starting a new project in a community in the
same niche. Your blog provided us valuable information to work on. You have done a outstanding job!
my web blog :: provadent scam reviews
cost of brand name neurontin: neurontin 100 mg – buy generic neurontin
http://furosemide.men/# lasix dosage
This is my first time pay a visit at here and i am genuinely pleassant to read all at alone
place.
Here is my webpage: reviews of lung clear pro
Greetings! Very useful advice within this article! It is the little changes that will make the biggest changes. Thanks a lot for sharing!