利用GreenSock Tweening Platform製作動畫

因為馬老師剛開始利用程式製作補間動畫的Class是Tweener,所以前面介紹了很多篇這方面的文章,但當然這方面的Class不是只有Tweener而已,所以接下來介紹一個目前發展起來比Tweener還要棒很多的Class,它是由GreenSock研發的Tweening Platform(補間平台),其中包含了:「TweenNano」、「TweenLite」、「TweenMax」、「TimelineLite」、「TimelineMax」。

為什麼說他發展得比較好呢?除了Tweener能做到的幾乎它都可以以外,也因為Tweener已經停止開發,所以未來將不會有新增的功能,但TweenMax還在不斷的更新中,在官網還有以下的比較案例:

各種補間動畫 速度測試

從上面的案例可以看出來利用GreenSock所研發的Tweening Platform的執行效能會比其他的好(FPS越高越好),所以接下來就來看看GreenSock Tweening Platform的簡介。

TweenNano、TweenLite與TweenMax算是同樣功能,但在製作後檔案容量是TweenNano<TweenLite<TweenMax,也就是說利用TweenNano所製作出來的動畫容量是最小的,舉個例來說,像這樣的動畫效果,TweenNano製作後swf大小為:5KB、TweenLite:8KB、TweenMax:21KB,不過在功能上面也是TweenNano<TweenLite<TweenMax,也就是說TweenMax可以掌控的效果比較多,也更具有彈性,例如:TweenNano就沒有辦法執行:pause()、play()、restart()…等,而TweenLite沒辦法執行:貝茲曲線運動、濾鏡…等,所以要用哪個版本的Tween,端看想要製作的動畫效果來考量,官方也有針對此三者製作比較表供大家參考。

另外TimelineLite和TimelineMax算是同樣功能,但看到後面的英文單字應該可以了解與上述具有相同的關聯,而這方面的Class是可以掌握時間軸上面的變化,在Tweener中,我們只能用Delay來控制動畫先後順序,而在GreenSock所研發的Tweening Platform中則可以利用TimlinelineLite或TimelineMax來處理。

馬上來介紹有關這個Class的一些使用方式,與Tweener一樣的是必須先下載備用載點),然後在需要使用的Flash檔案中import該Class,下載解壓後會有以下的資料夾:

  • badges:GreenSock圖標。
  • com:主要Class資料夾。
  • demo_swfs:裡面有很多swf的展示,對於想要了解本Class非常有幫助。
  • docs:參考文件。

在import時,看你想要使用的Class來import,例如需要使用TweenNano則:

import com.greensock.TweenNano;

若需同時使用TweenLite和TweenMax則:

import com.greensock.TweenLite;
import com.greensock.TweenMax;

想偷懶,則:(別擔心,Flash只會內嵌有使用到的部分)

import com.greensock.*;

至於製作補間的程式碼,其實官方就有製作swf來給大家參考,這邊也把官方的範例放進來給大家參考:

基礎動畫製作 範例檔

上面的案例可以讓你測試動畫效果,下方也會產生該段動畫的程式碼供你使用,實在是非常方便。另外關於Tween的語法也可以改成下面這種版本:

TweenLite.from(mc, 1.5, {y:0, alpha:0});

一個是告訴動畫要去哪,另一個是告訴動畫要從哪開始變化,關於Tweener可以使用的delay、onComplete、onStart、onUpdate…等,這個Class也都可以使用,例如:

TweenLite.to(mc, 1.5, {x:100, ease:Elastic.easeOut, delay:1, onComplete:okFn});
function okFn() {
    trace("動畫執行完畢");
}

這個Class還有很多特別的動畫效果,例如:濾鏡、短距離旋轉、貝茲曲線、聲音、色彩變換…等,大家也可以參考官方製作的swf來參考動畫效果與取得程式碼:

特殊動畫效果 範例圖

在動畫控制上面可以使用如下的程式碼來控制動畫:

var myTween:TweenLite = new TweenLite(mc, 1, {x:100, y:100});

myTween.pause();
//暫停動畫播放

myTween.resume();
//恢復動畫播放

myTween.reverse();
//反向播放

myTween.play();
//播放動畫

myTween.restart();
//重播動畫

myTween.invalidate();
//移除補間並使元件恢復原始狀態

myTween.kill();
//清除補間動畫

TweenLite.killTweensOf(mc);
//清除所有物件之補間動畫

以上是有關GreenSock Tweening的介紹,接下來介紹有關TimelineLite與TimelingMax的部分。

就像上面有提到在Tweener中我們如果希望三個元件在不同的時間點開始移動,就只能使用delay或是另外寫程式來控制,現在我們可以使用Timeline相關的Class來完成這樣的任務,甚至還可以讓時間軸倒著播放也沒問題,以下就是有關TimelineLite的官方範例:

TimelineLite 範例檔

另外是TimelineMax的範例檔,供大家參考:

TimelineMax 範例檔

以上就是針對GreenSock Tweening Platform大致的介紹,建議有空可以前往官網鑽研更多其他的功能,另外其實GreenSock另外還有TransformManagerLoaderMax,各位也可以先參考官網文章或是未來再跟大家分享我的使用心得。

註:本範例所使用的範例版權屬於GreenSock公司所有。

You may also like...

11,706 Responses

  1. LanceNex表示:

    я уже смотрел обзор здесь https://my-obzor.com/ перед тем, как сделать заказ. Не сказать, что все отзывы были 100% положительные, там уже упоминались основные минусы и плюсы.

  2. StephenDeery表示:

    Привет, дорогой читатель!
    купить диплом в Москве

    Желаю всем отличных оценок!
    https://dancerussia.ru/forum/viewtopic.php?t=16180

    купить диплом о среднем специальном
    купить диплом института
    купить диплом магистра

  3. Larryzilex表示:

    PBN sites
    We will build a structure of PBN sites!

    Benefits of our self-owned blog network:

    We execute everything so google does not realize THAT THIS IS A privately-owned blog network!!!

    1- We buy domain names from different registrars

    2- The leading site is hosted on a VPS hosting (VPS is fast hosting)

    3- The remaining sites are on distinct hostings

    4- We designate a distinct Google profile to each site with verification in Google Search Console.

    5- We develop websites on WordPress, we don’t employ plugins with the help of which malware penetrate and through which pages on your websites are generated.

    6- We refrain from duplicate templates and utilise only distinct text and pictures

    We do not work with website design; the client, if desired, can then edit the websites to suit his wishes

  4. FobertWen表示:

    Привет, дорогой читатель!
    купить диплом Гознак

    Желаю любому отличных оценок!
    http://mail.webco.by/forum/viewtopic.php?f=81&t=27595&p=196665

    купить диплом в Москве
    купить диплом о среднем специальном
    купить диплом университета

  5. StephenDeery表示:

    Today, I went to the beach front with my kids. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is totally off topic but I had to tell someone!
    #be#jk3#jk#jk#JK##

    купить турецкий номер для смс

  6. GichardPheve表示:

    Приветики!
    купить диплом бакалавра

    Желаю любому пятерошных) оценок!
    http://www.livecenter.ru/index.php?showtopic=737&pid=1623&st=0&amp;

    купить диплом техникума
    купить диплом бакалавра
    где купить диплом

  7. Larryzilex表示:

    PBN sites
    We’ll establish a network of private blog network sites!

    Advantages of our privately-owned blog network:

    WE DO everything SO THAT Google DOES NOT comprehend THAT this A private blog network!!!

    1- We obtain web domains from different registrars

    2- The primary site is hosted on a VPS server (VPS is rapid hosting)

    3- Additional sites are on various hostings

    4- We designate a individual Google account to each site with confirmation in Search Console.

    5- We create websites on WordPress, we don’t utilise plugins with the help of which malware penetrate and through which pages on your websites are generated.

    6- We never duplicate templates and use only individual text and pictures

    We do not work with website design; the client, if desired, can then edit the websites to suit his wishes

  8. Larryzilex表示:

    PBN sites
    We shall build a network of privately-owned blog network sites!

    Merits of our privately-owned blog network:

    We perform everything SO THAT google does not realize THAT this is A PBN network!!!

    1- We obtain web domains from various registrars

    2- The primary site is hosted on a VPS server (Virtual Private Server is rapid hosting)

    3- Other sites are on different hostings

    4- We assign a individual Google profile to each site with confirmation in Search Console.

    5- We make websites on WordPress, we do not utilise plugins with aided by which malware penetrate and through which pages on your websites are created.

    6- We refrain from reproduce templates and employ only unique text and pictures

    We do not work with website design; the client, if desired, can then edit the websites to suit his wishes

  9. JseraldAposy表示:

    Добрый день всем!
    купить диплом Вуза

    Желаю всем положительных оценок!
    http://www.birulevo.su/component/option,com_smf/Itemid,34/topic,21482.0/

    купить диплом бакалавра
    купить диплом о среднем образовании
    купить диплом института

  10. DevinChami表示:

    Сколько купить аттестат – ключ к вашему будущему. На данном сервисе вы можете просто и быстро приобрести свидетельство, обязательный для того, чтобы дальнейшего обучения или профессионального роста. Наша специалисты обеспечивают качество и конфиденциальность услуги. Покупайте школьный аттестат у нас и проявите новые перспективы для вашего профессионального роста и трудоустройства.

  11. DevinChami表示:

    http://arusak-attestats.ru – Купить аттестат о среднем – ключ для вашему перспективам. В нашем сервисе все вы сможете легко и оперативно приобрести аттестат, нужный для дальнейшего изучения или трудоустройства. Наша специалисты гарантируют качество и конфиденциальность услуги. Заказывайте школьный аттестат здесь и откройте другие возможности для того, чтобы вашего образования и карьеры.

  12. Larryzilex表示:

    PBN sites
    We will establish a system of privately-owned blog network sites!

    Pros of our PBN network:

    We carry out everything so google doesn’t grasp THAT THIS IS A self-owned blog network!!!

    1- We buy domains from separate registrars

    2- The primary site is hosted on a VPS hosting (Virtual Private Server is rapid hosting)

    3- The rest of the sites are on distinct hostings

    4- We allocate a individual Google profile to each site with confirmation in Search Console.

    5- We design websites on WP, we don’t use plugins with aided by which malware penetrate and through which pages on your websites are created.

    6- We don’t repeat templates and utilise only exclusive text and pictures

    We never work with website design; the client, if wanted, can then edit the websites to suit his wishes

  13. RobertErymn表示:

    В нашем обществе, где аттестат – это начало удачной карьеры в любой сфере, многие пытаются найти максимально простой путь получения качественного образования. Необходимость наличия официального документа переоценить попросту невозможно. Ведь диплом открывает двери перед людьми, стремящимися начать трудовую деятельность или продолжить обучение в университете.
    Мы предлагаем оперативно получить любой необходимый документ. Вы имеете возможность купить аттестат старого или нового образца, что становится отличным решением для человека, который не смог закончить обучение или потерял документ. Аттестат изготавливается с особой тщательностью, вниманием ко всем нюансам, чтобы на выходе получился продукт, максимально соответствующий оригиналу.
    Плюсы подобного подхода заключаются не только в том, что вы сможете быстро получить свой аттестат. Процесс организован удобно, с профессиональной поддержкой. От выбора необходимого образца аттестата до точного заполнения персональных данных и доставки по России — все под полным контролем качественных мастеров.
    Таким образом, для тех, кто ищет максимально быстрый способ получения необходимого документа, наша услуга предлагает отличное решение. Купить аттестат – значит избежать долгого обучения и не теряя времени перейти к достижению собственных целей, будь то поступление в университет или старт профессиональной карьеры.

    http://prema-attestats.ru/

  14. RobertErymn表示:

    В нашем обществе, где аттестат – это начало отличной карьеры в любом направлении, многие стараются найти максимально быстрый путь получения образования. Наличие официального документа трудно переоценить. Ведь диплом открывает дверь перед любым человеком, желающим вступить в сообщество квалифицированных специалистов или учиться в высшем учебном заведении.
    Мы предлагаем быстро получить этот необходимый документ. Вы имеете возможность купить аттестат, что является выгодным решением для человека, который не смог закончить обучение, потерял документ или хочет исправить свои оценки. Аттестат изготавливается аккуратно, с максимальным вниманием к мельчайшим элементам. В результате вы получите полностью оригинальный документ.
    Преимущество такого подхода заключается не только в том, что можно быстро получить свой аттестат. Процесс организован просто и легко, с нашей поддержкой. Начиная от выбора нужного образца аттестата до консультации по заполнению персональной информации и доставки в любой регион России — все под абсолютным контролем квалифицированных мастеров.
    Таким образом, всем, кто ищет быстрый способ получить необходимый документ, наша услуга предлагает выгодное решение. Купить аттестат – значит избежать длительного процесса обучения и сразу переходить к достижению своих целей: к поступлению в ВУЗ или к началу успешной карьеры.

    http://prema-attestats.ru/

  15. Larryzilex表示:

    PBN sites
    We shall establish a system of PBN sites!

    Advantages of our PBN network:

    We perform everything SO THAT Google doesn’t comprehend THAT this A privately-owned blog network!!!

    1- We buy domains from separate registrars

    2- The leading site is hosted on a VPS hosting (Virtual Private Server is high-speed hosting)

    3- Other sites are on distinct hostings

    4- We assign a separate Google profile to each site with confirmation in Search Console.

    5- We design websites on WP, we do not use plugins with aided by which malware penetrate and through which pages on your websites are created.

    6- We don’t reiterate templates and utilize only individual text and pictures

    We refrain from work with website design; the client, if desired, can then edit the websites to suit his wishes

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。