利用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...

20,562 Responses

  1. mostbet_qlsa表示:

    mostbet официальный сайт вход https://mostbet10011.ru/ .

  2. I would like to thank you for the efforts you’ve put in writing this website. I am hoping to see the same high-grade content by you in the future as well. In truth, your creative writing abilities has inspired me to get my own website now 😉

  3. 1win_kg_joki表示:

    1вин зеркало вход https://www.1win10076.ru .

  4. 1win_ghPa表示:

    1win скачать с официального сайта https://1win10073.ru/ .

  5. 1win_qnPa表示:

    1win ссылка 1win10073.ru .

  6. MichaelTut表示:

    cloud server personal us cloud server

  7. 1win_stoi表示:

    1win ставки официальный сайт http://www.1win10007.ru .

  8. Elmerbuils表示:

    вавада: vavada – вавада

  9. JamesLoarf表示:

    открытие компании в великобритании открыть фирму в великобритании

  10. Elmerbuils表示:

    пинап казино: пин ап казино – пин ап казино официальный сайт

  11. Uazrdhm表示:

    Заказать диплом об образовании. Производство документа занимает минимум времени, а цена – невысокая. Таким образом вы сможете сохранить деньги и время и найти работу мечты. Купить диплом на заказ в Москве можно используя сайт компании. – employment.bz/employer/russiany-diplomans

  12. 1win_kg_ksPr表示:

    1win официальный сайт скачать на андроид бесплатно http://www.1win10075.ru .

  13. Richardfek表示:

    vavada casino vavada вход vavada casino

  14. KennethKex表示:

    vavada casino: вавада официальный сайт – vavada вход

  15. ZackaryGer表示:

    https://pinupaz.top/# pin up azerbaycan

  16. ZackaryGer表示:

    https://pinupaz.top/# pin-up casino giris

  17. Cazrezd表示:

    Приобрести диплом о высшем образовании!
    Мы предлагаем документы университетов, расположенных на территории всей России. Документы выпускаются на бумаге высшего качества: netjobsall.com/profile/florence255866

  18. Sazrlzz表示:

    Купить диплом ВУЗа по выгодной цене возможно, обратившись к проверенной специализированной компании. Мы предлагаем документы об окончании любых ВУЗов РФ. Купить диплом о высшем образовании– dyado.listbb.ru/viewtopic.phpf=2&t=1520

  19. Sazrvaw表示:

    Заказать документ института вы сможете в нашей компании. Мы предлагаем документы об окончании любых университетов РФ. Вы получите диплом по любой специальности, любого года выпуска, включая документы Советского Союза. Даем 100% гарантию, что при проверке документов работодателями, подозрений не возникнет. diplomass.com/kupit-diplom-s-zaneseniem-v-reestr-bistro-i-nadezhno-28/

  20. JamesLoarf表示:

    регистрация компании в англии регистрация фирмы в англии

  21. JamesLoarf表示:

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

  22. Elmerbuils表示:

    vavada вход: вавада зеркало – vavada casino

  23. Elmerbuils表示:

    пин ап казино: пин ап казино официальный сайт – пин ап вход

  24. Mazrcuz表示:

    Где заказать диплом по нужной специальности?
    Готовый диплом со всеми печатями и подписями целиком и полностью отвечает стандартам, никто не сумеет отличить его от оригинала – даже со специальным оборудованием. Диплом о среднем образовании – быстро и легко! haruncologlu.com/kupit-diplom-gosudarstvennogo-obrazca-21

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

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