利用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,325 Responses

  1. Cletusiders表示:

    usa mexico pharmacy: usa mexico pharmacy – mexico drug stores pharmacies

  2. MicahTails表示:

    UsMex Pharm: Mexican pharmacy ship to USA – certified Mexican pharmacy

  3. CharlesJubre表示:

    кра сайт – кракен даркнет, кракен тор

  4. RandyKargo表示:

    certified Mexican pharmacy Us Mex Pharm UsMex Pharm

  5. SteveViand表示:

    http://usmexpharm.com/# Us Mex Pharm

  6. Sazrtlz表示:

    Заказать диплом под заказ в столице вы можете используя сайт компании. artrp.5nx.ru/viewtopic.phpf=3&t=16518

  7. DennisDor表示:

    usa mexico pharmacy: certified Mexican pharmacy – Us Mex Pharm

  8. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:сервисные центры в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  9. DennisDor表示:

    Mexican pharmacy ship to USA: UsMex Pharm – UsMex Pharm

  10. Cletusiders表示:

    certified Mexican pharmacy: usa mexico pharmacy – Us Mex Pharm

  11. DennisDor表示:

    UsMex Pharm: Us Mex Pharm – Mexican pharmacy ship to USA

  12. RandyKargo表示:

    usa mexico pharmacy USMexPharm Us Mex Pharm

  13. Xazrrhs表示:

    Купить диплом ВУЗа!
    Мы изготавливаем дипломы любых профессий по приятным ценам. Вы покупаете диплом в надежной и проверенной компании. : babygirls013.copiny.com/question/details/id/1072929

  14. This is a really good tip especially to those fresh to the blogosphere. Brief but very precise information… Thanks for sharing this one. A must read article.

  15. MicahTails表示:

    mexican pharmacy: mexican pharmacy – Mexican pharmacy ship to USA

  16. MicahTails表示:

    usa mexico pharmacy: buying from online mexican pharmacy – mexican drugstore online

  17. I like reading through an article that will make men and women think. Also, many thanks for allowing for me to comment.

  18. SteveViand表示:

    https://usmexpharm.com/# mexican pharmacy

  19. Sazrdwj表示:

    Мы изготавливаем дипломы любой профессии по приятным ценам.
    Вы покупаете диплом в надежной и проверенной компании. Купить диплом университета– http://forum.fiat-club.ru/blog_post.phpdo=updateblog&blogid=/ – forum.fiat-club.ru/blog_post.phpdo=updateblog&blogid=

  20. Marvinrow表示:

    Если вас интересует оклейка Mercedes-AMG G 63 обращайтесь к профессионалам! Наша компания предлагает премиальную оклейку защитными и декоративными плёнками, идеально подчёркивающими характер вашего автомобиля. Глянцевая или матовая текстура – выберите свой стиль и обеспечьте кузову надёжную защиту от сколов, царапин и выгорания.

  21. MicahTails表示:

    usa mexico pharmacy: mexican pharmacy – certified Mexican pharmacy

  22. DennisDor表示:

    Mexican pharmacy ship to USA: usa mexico pharmacy – mexican rx online

  23. RandyKargo表示:

    UsMex Pharm [url=http://usmexpharm.com/#]mexican border pharmacies shipping to usa[/url] USMexPharm

  24. Cletusiders表示:

    UsMex Pharm: certified Mexican pharmacy – Mexican pharmacy ship to USA

  25. Sazryev表示:

    Мы изготавливаем дипломы любых профессий по невысоким ценам.– diplom-top.ru/kupit-diplom-o-srednem-obrazovanii-v-reestr/

  26. MicahTails表示:

    mexican pharmacy: usa mexico pharmacy – Us Mex Pharm

  27. SteveViand表示:

    http://usmexpharm.com/# pharmacies in mexico that ship to usa

  28. Trefymh表示:

    Купить диплом ВУЗа. Заказ официального диплома через надежную компанию дарит ряд преимуществ для покупателя. Такое решение позволяет сберечь как длительное время, так и значительные финансовые средства. digitalagency.copiny.com/question/details/id/1083615

發佈留言

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