利用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協助我們製作動畫，我們更可以把心思放在排版、樣式和內容上面，省去了撰寫計算動畫程式的時間，希望大家可以利用它做出很棒的作品！最後附上本範例的原始檔給大家參考。
This is really fascinating, You’re a very skilled blogger. I have joined your rss feed and look ahead to looking for extra of your fantastic post. Also, I’ve shared your site in my social networks!
Thankyou for this post, I am a big big fan of this internet site would like to continue updated.
I love what you’ve created here, this is definitely one of my favorite sites to visit.
You are not right. I am assured. I can prove it. Write to me in PM, we will talk.
I will share you blog with my sis.
I was reading through some of your content on this internet site and I believe this web site is very informative ! Continue posting .
Thank you pertaining to sharing the following great subject matter on your website. I ran into it on google. I am going to check to come back after you publish additional aricles.
I think other website proprietors should take this web site as an model, very clean and great user pleasant style and design .
Im impressed. I dont think Ive met anyone who knows as much about this subject as you do. Youre truly well informed and very intelligent. You wrote something that people could understand and made the subject intriguing for everyone. Really, great blog youve got here.
Thank you for all the information was very accurate, just wondering if all this is possible.~
As a matter of fact, we’ve also tested the program on Windows 7 and the result was almost the same. Thus, the application works just as advertised and offers a smooth gaming experience.
PC Pitstop likes to give special attention to each one of our products, so that you can make the perfect choices based on your individual needs. With this particular gadget as a guiding light, there is no need to spend a fortune on large monitors in order to enjoy playing a game or watching a movie http://www.advisortic.com/?p=23484
50e0806aeb prynjany
P2P (Peer-to-Peer) file sharing is a second category that refers to the direct sharing between two computers over a local network or the Internet. The network consists of clients and a server where clients connect to share the file. The clients can be referred to as 2-way clients and the server as a 2-way server. Samba is an example of a 2-way server. P2P applications are not covered by digital contracts (as of http://www.kotakenterprise.com/?p=39205
50e0806aeb keinea
On top of that, it is fully usable and portable.Q:
ajax request to geoserver return null value
I’m experimenting with geoserver using wfs.
SimpleFeatureType schema =
ValidationUtils.createTypedFeatureType(
” https://www.promosongroup.com/wp-content/uploads/2022/06/LogLady.pdf
50e0806aeb ariedalb
A light and efficient alternative
Portable Alternate TaskManager is lightweight. The application does not occupy a substantial amount of memory, which means the operating system can reserve more for other tasks. You have to keep in mind, though, that the application is no substitute to the standard Windows task manager.
Since Portable Alternate TaskManager compiles no code, it is not compatible with 32-bit and 64-bit CPUs. Nevertheless, it can be used on x86 systems.
2014. http://www.giffa.ru/who/mirador-crack-keygen-latest-2022/
50e0806aeb benkaa
It’s a one-click solution.
Additionally, W32/Buzus Trojan Cleaner is included in System Information’s Revo Uninstaller element.
When the program has finished processing files, it gives you the possibility to preview the result, if necessary.
As an antivirus data element, this is a good way to demonstrate the efficiency of the application.
Generally, you should try and make use of this tutorial as a guide. Resetting the clock by using an https://speedsuperads.com/wp-content/uploads/2022/06/CopyTrans_Contacts.pdf
50e0806aeb xilwen
You are here
Instabug takes 1 million apps in Android app store to ensure minimal data usage
[PHOTO: INSTABUG]
Instabug has surged past 1 million downloads on Google Play Store and over 500,000 total downloads across the Amazon App Store and iTunes App Store, according to the company’s CEO and co-founder Chiren Hidroze.
INSTABUG
For the apps that have been written by Chiren https://ruhanii.com/wp-content/uploads/2022/06/xanche.pdf
50e0806aeb englbera
So whatever problem you have, this software will always be of great help, just make sure that you pick a WD Recovery portable hard drive, of which they’re virtually self-recovery.
/* This file is part of the Pangolin Project.
*
*
* Copyright (c) 2011 Steven Lovegrove
*
* Permission is hereby granted, free of charge, http://rollout.cl/wp-content/uploads/2022/06/PDFdu_Free_Image_to_PDF.pdf
50e0806aeb graeorr
and leave a comment!
Screenshots
Project Food Truck
Idea for a first person shooter that gives the player and you as a vehicle, 1st Person Shooter About Shareware Game
Utopia Inhaber
A tool to show what inhabers you want to show. This tool helps to present a basic Utopia Design with all needed Drawings and added Textures and Skeletons to a.WAD File
Buggy
A game https://wakelet.com/wake/byIUeANT30PVgfVkxP_Vh
50e0806aeb randcha
There are a few programs that provide parents with a chance to monitor their children from a distance and keep an eye on their devices and network activity. Of course, your children do not need to have a smartphone on them all the time – it would be better to attach some sort of wearable devices to the child’s body in order to monitor his/her activity. These gadgets might help with delivering personal digital assistants, Wi-Fi hubs and the like.
However, there is http://selectgarden.net/lm1v-crack-with-license-code-free-latest-2022/
50e0806aeb aleekali
https://www.66sj.com/wp-content/uploads/2022/06/Export_Settings.pdf
29e70ea95f shabroo
http://www.reiten-scheickgut.at/wp-content/uploads/2022/06/satigay.pdf
29e70ea95f rincael
https://teenmemorywall.com/wp-content/uploads/2022/06/acacdero.pdf
29e70ea95f futtab
https://cbdresourceguide.com/wp-content/uploads/2022/06/hashindi.pdf
29e70ea95f hamkar
https://esport-ready.com/wp-content/uploads/2022/06/Cheewoo_Part_CAM.pdf
29e70ea95f holdaf
https://auroracos.com/wp-content/uploads/2022/06/OpenSoundboard.pdf
29e70ea95f karodel
1. Field of the Invention
The present invention relates to the field of wireless telephony. More specifically, the present invention relates to in-car communication systems, such as voice mail, text messaging, and other communication services.
2. Description of Related Art
Cellular telephones provide in-person and out-of-pocket telephone service wherein voice communication is provided over the wireless telephony network. These cellular telephones may be connected directly to the network using, e.g., https://brookinwapaccons.wixsite.com/theojunkbagsding/post/readirispro14crackserialkeys
ec5d62056f cylbingl
For the latter, simply adjust the settings in the “Settings” menu to suit your system. The way it is set, one of the grass blades should always be in the middle of the screen, and move only when you move your mouse; the slow movement of the blades in conjunction with the music and sound is most definitely a summer experience you’d love to experience, and one you can relive whenever you feel the urge.
Description Summary
Grassland Wallpaper and Screen S https://oceanfrontmauicondos.com/originpro-8-5-0-sr1-build-161-serial-key-keygen/
ec5d62056f marrprom
AllFileAid Free
If you have accidentally removed a file, and you need some free recovery software you can still try this free recovery software.
RecoveryAnywhere
RecoveryAnywhere is a powerful program for Windows it can recover lost or deleted files from NTFS, FAT, and HFS + partitions. It’s an easy-to-use tool that allows you to access lost and deleted files. https://secure-dawn-77736.herokuapp.com/Indrajal_Book_In_Hindi_Pdf_For_Read.pdf
ec5d62056f birtora
Frontier, designed and developed by Vaibhav A. Sane, is an online ‘learning tool’ that provides ‘learning through doing’. It consists of a set of 19 case study activities, 10 quiz questions and 7 essay topics. Each topic had multiple questions from which you can choose. The activities were intended to guide learners to critical thought and evaluation, and include such topics as goal setting, developing an argument, describing, interpreting, describing and interpreting, analyzing, inquiring, https://findcembphodouhyca.wixsite.com/haunamora/post/hd-online-player-3-chor-machaye-shor-movie-english-su
ec5d62056f talechet
[Home Page]
[How to build it]
Requirements
[Installing python and
dev-packages](
After downloading and installing python, it is very easy to install and use
the dev packages by simply type the following on the command prompt. https://still-ocean-57164.herokuapp.com/Rules_Of_Wealth_Richard_Templar_Free_Download_Pdf_32.pdf
ec5d62056f arriipy