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

12,219 Responses

  1. stamp maker online [url=http://stamp-creator-online0.com]stamp maker online[/url] .

  2. http://www.airlines-inform.ru/personal/user/?UID=73969 [url=pokatili.ru/f/viewtopic.php?f=10&t=80977]pokatili.ru/f/viewtopic.php?f=10&t=80977[/url] .

  3. JasonUnsoG表示:

    http://sweetbonanza25.com/# sweet bonanza yorumlar

  4. Wallacefex表示:

    slot oyunlar?: az parayla cok kazandiran slot oyunlar? – guvenilir slot siteleri

  5. RobertFow表示:

    Профессиональный портал для строительства https://blogcamp.com.ua проекты, материалы, расчеты, советы и вдохновение. Все, чтобы ваш ремонт или стройка были успешными.

  6. Kevinkaw表示:

    Ваш путеводитель в мире строительства https://dcsms.uzhgorod.ua идеи, планы, пошаговые инструкции и лучшие материалы. Узнайте, как построить дом мечты или обновить интерьер.

  7. RobertMut表示:

    пневмозаглушка пзу купить пневматические заглушки

  8. MichaelunmaK表示:

    купить анаболические стероиды https://drags-masses.com

  9. JamesFen表示:

    Разработка интернет магазина https://magikfox.ru/services/sozdanie-saytov/internet-magazin-na-bitriks/ на Битрикс под ключ в диджитал агентстве MagicFox. Демократичные цены на создание сайта магазина на Bitrix. Интеграция с 1С, службами доставки, системами оплаты. Полная настройка функционала. Работаем по всей России.

  10. OLaneevige表示:

    What a material of un-ambiguity and preserveness of precious know-how regarding unexpected emotions.

    https://bike-drive.com.ua/diy-headlight-sealing-guide.html

  11. FrankEmine表示:

    en kazancl? slot oyunlar?: guvenilir slot siteleri – az parayla cok kazandiran slot oyunlar?

  12. BradleyEdino表示:

    deneme bonusu veren siteler yeni yeni deneme bonusu veren siteler yeni deneme bonusu veren siteler

  13. online stamp maker [url=www.stamp-creator-online0.com/]online stamp maker[/url] .

  14. BradleyEdino表示:

    deneme bonusu veren siteler yeni denemebonusuverensiteler25 deneme bonusu veren yeni siteler

  15. Robertked表示:

    Студия дизайна интерьера https://bconline.com.ua и архитектуры: создаем уникальные проекты для квартир, домов и коммерческих пространств. Эстетика, функциональность и индивидуальный подход – в каждом решении.

  16. RobertTab表示:

    Все об озеленении и благоустройстве https://bathen.rv.ua Ландшафтный дизайн, проекты садов, террас и парков. Идеи для создания зеленых зон, подбор растений и профессиональные услуги для вашего участка.

  17. Isaactog表示:

    Портал о строительстве https://aziatransbud.com.ua статьи, видео, инструкции, каталоги материалов и инструментов. Советы для дома и бизнеса. Легко строить, удобно ремонтировать!

  18. Anthonyhella表示:

    Портал для строительства https://6may.org и ремонта: полезные советы, современные материалы, проекты и идеи. Все, что нужно для воплощения ваших задумок – от фундамента до крыши.

  19. DavidDaree表示:

    Всё для строительства и ремонта https://artpaint.com.ua на одном портале: советы экспертов, обзоры материалов, расчет сметы и готовые решения для вашего дома или бизнеса.

  20. FrankEmine表示:

    Deneme Bonusu Veren Siteler: en guvenilir casino siteleri – en iyi casino sitesi

  21. 128. Two buddies pause beneath a big stone urn crammed with ornamental flowers.

  22. One such response operate is the Taylor rule.

發佈留言

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