利用Tweener製作動畫 – 貝茲曲線

在看過前面一篇Tweener基礎篇之後,應該會發現我們的動畫元件雖然可以依照不同的模式移動,但是在路徑上還依然是保持直線移動,而這一篇文章就要來示範如何讓元件利用貝茲曲線來產生移動路徑,至於甚麼是貝茲曲線?大家可以參考維基百科上面的說明,這邊就不贅述了。

在Tweener的官方網站裡有提供一個貝茲曲線產生器的Flash動畫讓大家下載,不過由於官方示範這個貝茲曲線產生器所使用的是舊版本的Tweener Class,所以在程式碼範例上有些缺失,馬老師這邊提供我修改過且進行中文化後的範例供大家下載

Tweener 貝茲曲線產生器 螢幕截圖

範例中Add Bezier Point是增加節點,Remove Point是刪除節點,利用這些功能並拖曳上面的範例曲線,就可以製作出你想要移動的路徑,接下來請先把「需要先被匯入與執行的Tweener」三行指令放置在程式碼的最前面,接著再把「Tweener動畫指令」貼上即可!這樣一來以後連製作這樣的路徑也會變得很方便了!

整個動畫的程式碼如下,也提供利用此效果製作的動畫檔給大家參考:

import caurina.transitions.Tweener
import caurina.transitions.properties.CurveModifiers
CurveModifiers.init()

Tweener.addTween(ball, {x:475, y:80, _bezier:[{x:150, y:43}, {x:71, y:206.5}], time:1, transition:"linear"});

希望這個範例對大家有所幫助,如果還有疑問,也可以在這邊回應唷~

You may also like...

18,880 Responses

  1. FrankGlora表示:

    UsaIndiaPharm: UsaIndiaPharm – UsaIndiaPharm

  2. Sazriro表示:

    Купить диплом на заказ в столице можно используя сайт компании. learnsoft.copiny.com/question/details/id/1084476

  3. Robertmob表示:

    аренда прокат авто в москве arenda-avto213.ru/

  4. Cazrvor表示:

    Заказать диплом любого университета!
    Мы можем предложить документы ВУЗов, которые находятся в любом регионе Российской Федерации. Документы делаются на “правильной” бумаге высшего качества: karasteamfulldmroleplay.getbb.ru/viewtopic.phpf=62&t=3122

  5. Aw, this was an extremely nice post. Taking a few minutes and actual effort to make a very good article… but what can I say… I put things off a lot and never seem to get anything done.

  6. Stephanpeedy表示:

    посмотреть на этом сайте https://xn—–6kcacs9ajdmhcwdcbwwcnbgd13a.xn--p1ai

  7. Georgeunula表示:

    reputable indian pharmacies: UsaIndiaPharm – UsaIndiaPharm

  8. mostbet_ohMi表示:

    mostbet kg скачать https://mostbet5001.ru/ .

  9. DavidSooni表示:

    UsaIndiaPharm UsaIndiaPharm buy prescription drugs from india

  10. CarltonUnith表示:

    https://usaindiapharm.com/# Online medicine order

  11. Georgeunula表示:

    UsaIndiaPharm: UsaIndiaPharm – india pharmacy mail order

  12. FrankGlora表示:

    USA India Pharm: UsaIndiaPharm – UsaIndiaPharm

  13. sklad_cfKi表示:

    камера хранения для вещей в москве камера хранения для вещей в москве .

  14. HomerPaply表示:

    посмотреть на этом сайте электрик томск

  15. Sazrddt表示:

    Заказать диплом о высшем образовании !
    Приобретение диплома университета РФ у нас является надежным делом, потому что документ будет заноситься в государственный реестр. Приобрести диплом института diplomers.com/kupit-diplom-s-zaneseniem-v-reestr-bistro-i-nadezhno-78

  16. Заинтересованы в качественной продукции?, интернет-магазин Camogear. Мы предлагаем разнообразные товары. Не упустите возможность, от лучших брендов. Следите за нами. Гарантия качества – это наша цель. в Camogear.
    військові штани військові штани .

  17. Georgeunula表示:

    UsaIndiaPharm: UsaIndiaPharm – USA India Pharm

  18. промокод на продамус скидка подключение promokod-prdms.ru .

  19. Robertdaw表示:

    профессиональная уборка https://cleaning-top24.ru

  20. Iariorubo表示:

    Приобрести диплом университета по выгодной стоимости возможно, обращаясь к надежной специализированной фирме. Купить документ университета вы имеете возможность в нашем сервисе. asxdiploman.com/legalnoe-zanesenie-diploma-v-reestr-bistro-i-prosto-2

  21. Waltonnix表示:

    Online medicine home delivery: top 10 online pharmacy in india – Online medicine home delivery

  22. DavidSooni表示:

    online shopping pharmacy india UsaIndiaPharm india pharmacy

發佈回覆給「sklad_cfKi」的留言 取消回覆

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