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

29,433 Responses

  1. FarukhRig表示:

    Betzula Twitter, canl? bahis konusunda ustun f?rsatlar sunar. Fenerbahce Galatasaray derbisi icin Betzula giris yaparak canl? bahis oynamaya baslayabilirsiniz.

    Betzula’n?n guvenilir altyap?s?, sorunsuz bir deneyim sunar. Betzula Twitter hesab?n? takip ederek yeni kampanyalardan haberdar olabilirsiniz.

    favori futbol kuluplerinizin bahislerinizi an?nda yapabilirsiniz.

    Ayr?ca, bet zula giris linki, mobil cihazlar uzerinden kolay erisim sunar. Ozel olarak, https://denizlieniyimasaj.com/ – bet zula giris, tum bahis severler icin en iyi cozum.

    Betzula, spor bahislerinden canl? casino oyunlar?na kadar tum kullan?c?lar?n ihtiyaclar?n? kars?lar. Fenerbahce Galatasaray derbisi icin bahis yapmak icin Betzula ile kazanmaya baslay?n!
    371212+

  2. Wallacefex表示:

    Casino Siteleri: guvenilir casino siteleri – deneme bonusu veren casino siteleri

  3. Wallacefex表示:

    sweet bonanza demo oyna: sweet bonanza – sweet bonanza kazanma saatleri

  4. Scotthom表示:

    What is Uniswap?
    Uniswap is a decentralized exchange (DEX) protocol built on the Ethereum blockchain. It enables direct peer-to-peer cryptocurrency transactions, allowing users to trade coins without intermediaries. This makes it a cornerstone of the Decentralized Finance (DeFi) ecosystem.
    uniswap exchange
    Benefits of Using Uniswap
    Uniswap offers several advantages over traditional, centralized exchanges:

    Decentralization: Users maintain control of their funds, minimizing the risk of hacking or fraud associated with central exchanges.
    Liquidity Pools: Uniswap uses automated liquidity pools instead of traditional order books, enabling seamless and efficient trading.
    Open Access: Anyone with an Ethereum wallet can trade on Uniswap, facilitating financial inclusivity.
    No Registration: Trade instantly without creating an account or passing through identity verification processes.
    How to Use Uniswap
    Getting started with Uniswap is simple and intuitive. Follow these steps:

    Create and fund an Ethereum wallet if you don’t have one. Some popular options include MetaMask, Trust Wallet, and Coinbase Wallet.
    Connect your wallet to the Uniswap platform by navigating to their website and initiating the connection process.
    Choose the tokens you wish to trade. Always ensure you are aware of the gas fees involved in the transaction.
    Initiate the swap and confirm the transaction in your wallet. Your new tokens will be available once the transaction is confirmed on the blockchain.
    Security Tips
    While Uniswap is a secure platform, it’s crucial to follow best practices to ensure your funds remain safe:

    Always ensure you are accessing the legitimate Uniswap website by verifying the URL.
    Keep your wallet’s private keys secure and never share them with anyone.
    Regularly update your cryptocurrency wallet and browser to prevent vulnerabilities.
    Conclusion
    Uniswap has revolutionized the way cryptocurrency trading operates by providing a secure, user-friendly, and inclusive platform. Whether you are a seasoned trader or a newcomer to the crypto world, Uniswap offers a powerful tool for navigating the DeFi landscape.

  5. There is certainly a great deal to learn about this topic. I like all of the points you have made.

  6. Frankelava表示:

    Welcome to PancakeSwap: A Beginner’s Guide
    PancakeSwap is a decentralized exchange platform on the Binance Smart Chain, designed for swapping BEP-20 tokens. With its vibrant ecosystem, ease of use, and low transaction fees, it’s become a popular choice among crypto enthusiasts.
    Pancakeswap exchange
    What is PancakeSwap?
    PancakeSwap is an automated market maker (AMM) that allows users to trade directly from their crypto wallets. There’s no order book involved; instead, trades are made against a liquidity pool. Here’s how you can get started:

    How to Use PancakeSwap?
    Set Up Your Wallet
    First, you need a crypto wallet like MetaMask or Trust Wallet. Ensure your wallet supports BEP-20 tokens.
    Connect to Binance Smart Chain
    Configure your wallet to connect to the Binance Smart Chain network. Detailed guides are available in your wallet settings.
    Purchase BNB
    You’ll need BNB (Binance Coin) to cover transaction fees. Buy BNB from a reputable exchange and transfer it to your wallet.
    Access PancakeSwap
    Visit the official PancakeSwap website and connect your wallet by clicking on the ‘Connect Wallet’ button.
    Start Trading
    Once connected, you can begin swapping BEP-20 tokens. Choose the tokens you wish to trade and confirm your transactions.
    Benefits of PancakeSwap
    Lower Fees: Operating on Binance Smart Chain, the fees are more affordable than Ethereum-based exchanges.
    Fast Transactions: Experience quick transaction speeds due to the efficiency of BSC.
    Yield Farming: Earn rewards by providing liquidity or participating in various farming pools.
    Conclusion
    PancakeSwap offers a user-friendly approach to trading cryptocurrencies, engaging users with its gamified elements like lotteries and collectibles. Whether you’re a beginner or an experienced trader, PancakeSwap provides an efficient and exciting way to dive into the world of decentralized finance. Always ensure to perform your due diligence before engaging in trading activities.

    For more detailed guides and support, visit the .

  7. FarukhRig表示:

    Betzula giris, spor bahisleri konusunda benzersiz secenekler sunar. Fenerbahce Galatasaray derbisi icin en h?zl? sekilde kazanma sans?n?z? art?rabilirsiniz.

    Betzula’n?n h?zl? odeme yontemleri, sorunsuz bir deneyim sunar. guncel duyurular? kac?rmadan ozel promosyonlardan haberdar olabilirsiniz.

    en onemli spor etkinliklerinin bahislerinizi an?nda yapabilirsiniz.

    Ayr?ca, Betzula guncel giris adresi, mobil cihazlar uzerinden kolay erisim sunar. Ozel olarak, https://aydinlikevlernakliyat.com/ – bet zula giris, kolay ve h?zl? giris imkan?.

    Betzula, en genis bahis seceneklerinden ozel turnuvalara kadar profesyonel bir hizmet sunar. Fenerbahce Galatasaray derbisi icin bahis yapmak icin Betzula ile kazanmaya baslay?n!
    371212+

  8. FarukhRig表示:

    Betzula, casino oyunlar? konusunda benzersiz secenekler sunar. buyuk futbol kars?lasmalar? icin Betzula giris yaparak yuksek oranlar? kesfedebilirsiniz.

    Betzula’n?n guvenilir altyap?s?, her cihazdan erisim imkan? tan?r. Betzula Twitter hesab?n? takip ederek bonus f?rsatlar?ndan haberdar olabilirsiniz.

    Turkiye Super Lig derbilerinin en iyi oranlarla kazanc saglayabilirsiniz.

    Ayr?ca, Betzula guncel giris adresi, kesintisiz bahis deneyimi sunar. Ozel olarak, https://denizlieniyimasaj.com/ – betzula twitter, tum bahis severler icin en iyi cozum.

    Betzula, en genis bahis seceneklerinden ozel turnuvalara kadar tum kullan?c?lar?n ihtiyaclar?n? kars?lar. Fenerbahce Galatasaray derbisi icin bahis yapmak icin simdi giris yap?n!
    371212+

  9. JasonUnsoG表示:

    http://slotsiteleri25.com/# slot oyunlar?

  10. JimmyGully表示:

    Discover Stargate Finance: Your Gateway to DeFi
    In the rapidly evolving world of decentralized finance (DeFi), Stargate Finance stands out as a reliable platform for decentralized transactions and yield optimization. Let’s explore how Stargate Finance can enhance your financial strategies.
    stargate fi
    Why Choose Stargate Finance?
    Stargate Finance offers a comprehensive suite of tools designed to facilitate seamless and secure transactions. Here’s why you should consider integrating Stargate Finance into your DeFi experience:

    Seamless Cross-Chain Transactions: Facilitate instant and smooth transactions across multiple blockchain networks without the hassle of traditional exchanges.
    High-Performance Liquidity Pools: Access a wide range of liquidity pools to optimize your yield farming strategies and maximize returns.
    Secure Protocols: Enjoy peace of mind with top-tier security measures designed to protect your assets and data.
    Features that Enhance Your DeFi Experience
    Stargate Finance uniquely positions itself by offering features that cater to both novice and veteran DeFi users:

    Intuitive User Interface: Navigate effortlessly through the platform with a user-friendly interface that simplifies complex DeFi operations.
    24/7 Customer Support: Get assistance anytime with a dedicated support team available to resolve queries and help optimize your DeFi strategies.
    Comprehensive Analytics: Leverage data-driven insights to make informed decisions, tailor your yield farming, and monitor performance.
    Getting Started with Stargate Finance
    Ready to dive into the world of DeFi with Stargate Finance? Here’s a quick guide to get you started:

    Visit the and create your account.
    Connect your crypto wallet to begin accessing the features.
    Explore liquidity pools and start yield farming to optimize your returns.
    With these resources, you can securely and efficiently manage your decentralized financial strategies.

    Conclusion
    Stargate Finance empowers you to confidently participate in the DeFi landscape, offering secure, efficient, and user-friendly solutions for the modern investor. Discover what it means to have a true gateway to financial freedom and innovation with Stargate Finance.

    For more information and to get started today, .

    Understanding Stargate Finance Token
    The Stargate Finance Token is an integral part of the blockchain ecosystem, especially for those involved in decentralized finance (DeFi). As a bridge to seamless blockchain transactions, it plays a crucial role in enhancing interoperability across different networks.

    Key Features of Stargate Finance Token
    Stargate Finance Token stands out in the DeFi space for several reasons. Here are its key features:

    Interoperability: Facilitates cross-blockchain transactions with ease.
    Scalability: Designed to handle a large volume of transactions.
    Security: Incorporates advanced security protocols for secure transfers.
    Liquidity Pools: Offers attractive opportunities for liquidity providers.
    Benefits of Using Stargate Finance Token
    Using the Stargate Finance Token provides several benefits to investors and users:

    Cost Efficiency: Reduces transaction fees compared to traditional methods.
    Speed: Transfers are quick, minimizing waiting times.
    Investment Potential: Opportunity for profitable returns through staking and liquidity.
    Innovation: Continuously updates to incorporate the latest in blockchain technology.
    How to Get Started with Stargate Finance Token
    Getting started with Stargate Finance Token is straightforward:

    Visit a reputable that lists Stargate tokens.
    Create an account and complete any necessary verification.
    Deposit funds into your account via fiat or cryptocurrency transfer.
    Purchase Stargate Finance Tokens from the exchange market.
    Consider joining liquidity pools or staking to maximize your returns.

  11. капельница от запоя цена [url=http://vyvod-iz-zapoya-nizhnij-novgorod11.ru/]капельница от запоя цена[/url] .

  12. FrankEmine表示:

    sweet bonanza demo oyna: sweet bonanza oyna – sweet bonanza

  13. FrankEmine表示:

    sweet bonanza slot: sweet bonanza guncel – sweet bonanza demo oyna

  14. Matthewtrurn表示:

    Introducing Velodrome Finance: Maximize Your Crypto Yields
    In the rapidly evolving world of decentralized finance (DeFi), Velodrome Finance emerges as a robust platform for enthusiasts looking to enhance their crypto yield returns. This guide will walk you through the essentials of Velodrome Finance and how you can benefit from its features.
    velodrome finance
    Why Choose Velodrome Finance?
    Velodrome Finance stands out as a comprehensive DeFi protocol designed specifically for liquidity providers. Its innovative approach focuses on maximizing rewards while maintaining efficient and secure trading mechanisms. Here’s why it’s capturing the attention of the DeFi community:

    Efficient Token Swaps: Velodrome offers seamless and cost-effective token swapping capabilities.
    Liquidity Pools: Participants can provide liquidity to various pools, optimizing their earning potential.
    Yield Optimization: With advanced strategies, Velodrome helps users achieve superior returns on their investments.
    Secure Protocol: Security is a top priority, and Velodrome utilizes cutting-edge technology to protect user assets.
    Getting Started with Velodrome
    Embarking on your journey with Velodrome Finance is straightforward. Here’s a step-by-step guide to help you dive into the platform:

    Create a Wallet: To engage with Velodrome, you first need a compatible crypto wallet.
    Connect Your Wallet: Visit and securely link your crypto wallet.
    Explore Liquidity Pools: Browse through available pools and decide where to allocate your assets for optimal returns.
    Stake and Earn: Once you’ve funded a pool, begin staking and watch your earnings grow as you benefit from trading fees and incentives.
    Community and Support
    Velodrome Finance boasts a vibrant community ready to assist users at any step. Whether you’re a seasoned DeFi user or a newcomer, you can find guidance and support from community forums and dedicated customer service.

    Conclusion
    With its focus on maximizing crypto yield, Velodrome Finance is a compelling choice for anyone looking to delve deeper into the DeFi space. From efficient token swaps to robust security measures, it offers a complete ecosystem for those eager to optimize their returns. Visit the official site and start your journey towards enhanced financial growth.

  15. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали ремонт iphone 14 pro max рядом, можете посмотреть на сайте: ремонт iphone 14 pro max рядом
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  16. JasonUnsoG表示:

    https://slotsiteleri25.com/# en kazancl? slot oyunlar?

  17. BradleyEdino表示:

    sweet bonanza demo oyna sweet bonanza sweet bonanza kazanma saatleri

  18. выведение из запоя на дому в сочи [url=https://www.vyvod-iz-zapoya-sochi24.ru]https://www.vyvod-iz-zapoya-sochi24.ru[/url] .

  19. цена на вывод из запоя в стационаре цена на вывод из запоя в стационаре .

  20. BradleyEdino表示:

    sweet bonanza oyna sweet bonanza oyna sweet bonanza oyna

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

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