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

18,635 Responses

  1. JoshuaAtope表示:

    Welcome to SushiSwap: Your Gateway to Decentralized Finance
    SushiSwap is a leading decentralized finance (DeFi) platform that allows users to trade cryptocurrencies directly from their digital wallets. Built on top of the Ethereum blockchain, SushiSwap is designed to offer a seamless, trustless, and secure trading experience.
    sushiswap
    Key Features of SushiSwap
    Here’s what sets SushiSwap apart from other decentralized exchanges:

    Swaps: Instantly swap a wide array of tokens without the need for an intermediary.
    Liquidity Pools: Provide liquidity to earn rewards from transaction fees and Sushi tokens.
    Yield Farming: Stake your tokens and earn additional incentives with high returns.
    Governance: Participate in community decision-making processes to shape the future of the platform.
    How to Use SushiSwap
    Follow these steps to get started on SushiSwap:

    Connect Your Wallet: Select a compatible wallet like MetaMask to interact with the platform securely.
    Select Tokens: Choose the cryptocurrencies you wish to swap.
    Confirm Transaction: Review and confirm your transaction details.
    Manage Liquidity: Optionally, add liquidity to pools and earn rewards.
    Why Choose SushiSwap?
    SushiSwap offers numerous advantages for crypto traders:

    Decentralized control ensures your funds are always under your personal control.
    Competitive fees and rewards mechanisms encourage active participation.
    A diverse range of tokens and pairs expands your trading options.
    Join the SushiSwap community now and transform the way you trade using our state-of-the-art platform.

    Stay Informed
    Stay updated with the latest developments and community news by joining SushiSwap’s social media channels and forums. Unlock the potential of decentralized trading today.

  2. Raymondgoatt表示:

    Pendle Finance: Unlocking New Opportunities in DeFi
    As the world of decentralized finance (DeFi) continues to evolve, Pendle Finance is at the forefront, offering innovative solutions for yield and trading. This platform has quickly become a go-to resource for individuals looking to maximize their crypto investments.
    pendle finance
    What is Pendle Finance?
    Pendle Finance is a DeFi protocol designed to provide enhanced yield management opportunities by leveraging tokenization of future yield. It allows users to trade tokenized yield, offering flexibility and potential for optimized earnings.

    Key Features
    Yield Tokenization: Convert future yield into tradable assets, enhancing liquidity.
    Yield Trading: Enter and exit yield positions at strategic times to capitalize on market conditions.
    Multi-Chain Support: Access a wide range of DeFi ecosystems through cross-chain functionality.
    Benefits of Using Pendle Finance
    Pendle Finance provides numerous benefits to its users, making it a compelling choice for DeFi enthusiasts and investors:

    Diversified Investment Options: By tokenizing future yields, Pendle offers a variety of strategies to enhance your investment portfolio.
    Market Flexibility: Trade yield tokens freely, allowing for strategic entry and exit points.
    Enhanced Liquidity: Tokenization increases the liquidity of yields, offering more opportunities for dynamic financial strategies.
    How to Get Started with Pendle
    Embarking on your Pendle Finance journey is straightforward. Follow these steps to unlock the potential of yield trading:

    Create an Account: Set up a user account on the Pendle Finance platform.
    Link Your Wallet: Connect your cryptocurrency wallet to seamlessly manage transactions.
    Start Trading: Explore the available yield tokens and start trading to optimize your returns.
    Conclusion
    In a rapidly changing financial landscape, Pendle Finance stands out by offering innovative solutions aimed at enhancing investment opportunities. Whether you are a seasoned DeFi user or a newcomer, Pendle provides tools and resources to empower your financial growth. Join the community and start unlocking the potential of your investments today!

  3. BradleyEdino表示:

    en cok kazand?ran slot oyunlar? slot casino siteleri az parayla cok kazandiran slot oyunlar?

  4. Dannyfut表示:

    dark internet dark market url tor marketplace

  5. BradleyEdino表示:

    sweet bonanza demo oyna sweet bonanza slot sweet bonanza guncel

  6. Jasonneelo表示:

    Welcome to dYdX: The Future of Decentralized Trading
    dYdX is a leading decentralized exchange (DEX) platform designed specifically for perpetual trading. Powered by a unique layer 2 solution, it offers zero gas fees and high-speed transactions, ideal for traders looking to maximize efficiency and minimize costs.
    dydx trade
    Why Choose dYdX?
    Fully Decentralized: Enjoy complete control over your funds and trades with no third-party intervention.
    No Gas Fees: Thanks to our layer 2 integration, trade without worrying about expensive gas fees.
    Advanced Features: Utilize advanced trading features like cross-margining and isolated margin accounts to optimize your strategies.
    Getting Started with dYdX
    To start trading on dYdX, simply connect your wallet and begin trading a wide range of perpetual contracts. Our ensures that both novice and experienced traders can navigate and execute trades with ease.

    Trade Perpetual Contracts with Confidence
    Perpetual contracts are a powerful trading tool that allows you to speculate on the future price movements of a variety of cryptocurrencies without owning the underlying asset. With dYdX, you can:

    Leverage Up to 20x: Enhance your trading potential with leverage options tailored to your risk tolerance.
    Variety of Pairs: Trade a diverse selection of cryptocurrency pairs across multiple markets.
    Security at dYdX
    Your security is paramount at dYdX. Our platform employs state-of-the-art security measures to protect your assets and data, ensuring peace of mind with every trade you make.

    Join the dYdX Community
    Join a global community of traders who are revolutionizing the way decentralized finance operates. Stay updated and connected through our social media channels and community forums.

    Note: Always conduct thorough research and consider your risk tolerance before engaging in cryptocurrency transactions.

  7. RonnieCex表示:

    Welcome to Owlto Finance
    Owlto Finance is your ultimate partner for secure and efficient financial solutions. Whether you’re a personal investor or a large-scale business, we have the services that cater to your financial needs.
    owlto fi
    Why Choose Owlto Finance?
    Choosing the right financial platform is crucial for safeguarding your investments and ensuring growth. Here are some reasons why Owlto Finance stands out:

    Security: Your assets’ safety is our top priority, employing state-of-the-art security measures to protect your finances.
    Efficiency: Our platform is designed for efficiency, ensuring that your transactions are processed seamlessly and quickly.
    User-Friendly Interface: Intuitive and easy to navigate, our platform simplifies your financial management.
    Our Services
    Owlto Finance offers a wide range of services tailored to your specific needs, whether you’re looking to invest, save, or manage your funds better.

    Investment Options: Choose from a variety of investment plans that align with your goals and risk tolerance.
    Savings Accounts: Flexible saving options to grow your money with competitive interest rates.
    Financial Advising: Get expert advice from our team of experienced financial advisors to navigate your financial future.
    Getting Started with Owlto Finance
    Starting your financial journey with Owlto Finance is easy and straightforward:

    Sign Up: Create your account in minutes with our streamlined registration process.
    Customize Your Portfolio: Select from our range of financial products to customize your portfolio according to your needs.
    Monitor and Adjust: Use our tools to track your financial progress and make adjustments as necessary.
    Join Our Community
    At Owlto Finance, you’re not just investing; you’re joining a community of like-minded individuals who value financial freedom and security. Join us today and take control of your financial future.

    For more information, visit our website and start your journey with Owlto Finance now!

  8. Mariongaupe表示:

    Understanding Rhino Technology
    Rhino technology represents the forefront of digital finance solutions, offering innovative tools for both consumers and businesses. Designed to streamline processes and enhance user experience, Rhino technology stands out as a pivotal development in the financial world.
    rhino bridge
    Features of Rhino Technology
    Scalability: Rhino technology is built to grow with user needs, supporting both small operations and larger enterprises with ease.
    Security: Integration of advanced security protocols ensures that transactions and data are protected from unauthorized access.
    User-Friendliness: With a focus on intuitive design, Rhino technology offers an interface that is easy for users of all levels to navigate.
    Applications of Rhino Technology in Finance
    In the financial sector, Rhino technology plays a crucial role in enhancing efficiency and ensuring compliance with industry standards. It empowers users with tools that simplify complex financial operations, making them more accessible and less time-consuming. Beyond financial transactions, Rhino technology aids in data analysis, helping businesses make informed decisions based on real-time analytics.

    In conclusion, Rhino technology is a transformative force in the financial industry. Its ability to provide scalable, secure, and user-friendly solutions positions it as a crucial player in digital finance. As industries continue to evolve, relying on such cutting-edge technology ensures that businesses remain competitive, efficient, and secure.

  9. Ramirokibly表示:

    Understanding Hop Exchange
    Hop Exchange is a groundbreaking platform designed to simplify the process of transferring cryptocurrencies across multiple blockchains. This guide will explore its functionality, benefits, and how you can make the most of its features.
    hop protocol
    What is Hop Exchange?
    Hop Exchange is a decentralized protocol that facilitates efficient and cost-effective cross-chain cryptocurrency transfers. It aims to solve the challenges of interoperability between blockchain networks, enabling seamless asset movement without compromising security or incurring high fees.

    Features of Hop Exchange
    Cross-Chain Compatibility: Easily transfer tokens across different blockchain networks.
    Low Transaction Fees: Enjoy minimized expenses compared to traditional bridging solutions.
    High-Speed Transfers: Experience rapid transaction confirmations and settlements.
    Secure Transactions: Rely on advanced security protocols to protect your assets.
    How Does Hop Exchange Work?
    Hop Exchange functions by employing liquidity pools and multi-chain bridges. When a user initiates a cross-chain transfer, the protocol uses these pools to swap assets between the source and destination chains, effectively minimizing transaction times and costs.

    Benefits of Using Hop Exchange
    Seamless Experience: Eliminate the hassle of navigating multiple platforms for asset transfers.
    Cost Savings: Reduce overhead costs associated with traditional exchanges and bridging services.
    Enhanced Security: Leverage advanced cryptographic techniques to safeguard your transactions.
    DeFi Integration: Integrate easily with decentralized finance platforms, broadening your investment opportunities.
    Getting Started with Hop Exchange
    To start using Hop Exchange, follow these simple steps:

    Connect your digital wallet to the Hop Exchange platform.
    Select the source and destination networks for your transfer.
    Input the amount of cryptocurrency you wish to move and authorize the transaction.
    Confirm the transfer and monitor the progress via the platform’s dashboard.
    With Hop Exchange, you can easily navigate the complex landscape of cryptocurrency with a tool that emphasizes efficiency, affordability, and security. Whether you are an individual investor or a business, Hop Exchange offers the flexibility needed to keep pace with the rapidly evolving blockchain ecosystem.

  10. Ismaelfer表示:

    It’s awesome to pay a quick visit this web site and reading the views of all colleagues on the topic of this article, while I am also zealous of getting know-how.
    https://millionigrushek.ru/

  11. SpencerBag表示:

    Welcome to Dexscreener
    If you’re looking for comprehensive and real-time cryptocurrency market data, look no further than Dexscreener. With a plethora of tools at your disposal, you can analyze, trade, and excel in the ever-evolving world of cryptocurrencies.
    dex screener
    Features of Dexscreener
    Real-Time Data: Get the latest updates on cryptocurrency prices, market trends, and trading volumes.
    Comprehensive Charts: Utilize interactive charts to spot trends and make informed trading decisions.
    Customizable Alerts: Set alerts for when your favorite cryptocurrencies hit your chosen price points.
    Why Choose Dexscreener?
    Dexscreener stands out in the crowded field of cryptocurrency analysis tools for several reasons:

    Unmatched Accuracy
    Accuracy is king in the world of crypto trading. With Dexscreener, you can trust that you’re getting precise data, ensuring that every trading decision is backed by solid information.

    User-Friendly Interface
    Whether you’re a seasoned trader or a newcomer, Dexscreener’s intuitive interface makes it easy to navigate and utilize. The platform is designed to provide a seamless user experience.

    Community and Support
    Join a vibrant community of traders and investors. Dexscreener offers robust customer support to help you at every step of your trading journey. Whether you have a query or need detailed insight, our support team is there to assist.

    Getting Started
    Start your cryptocurrency trading journey with Dexscreener today. Sign up in a few simple steps and gain access to invaluable trading tools and insights right away.

    For more information, visit the Dexscreener website and discover how you can succeed in the cryptocurrency market!

  12. Henry Alan Shadrack. For services to the Community in Chelmsford, Essex.

  13. Each step in this process enabled the next; had consumer domestication not taken place, it could be straightforward for most customers to switch away with minimal friction.

  14. Churches across France had been renamed “Temples of Purpose” and the Notre Dame was “de-baptized” for the occasion.

  15. mham 株式 インデックス ファンド 225

  16. An ongoing tax obligation, in live performance with private confidence and acceptance of the forex, underpins the value of the foreign money.

  17. After the road was extended to Littenweiler, the garden city of Waldsee, which had solely been established after World Struggle I, additionally profited.

  18. Nonetheless, this a mistake that lets the Black king escape.

  19. ヒ 掲示板表示:

    Seigniorage is the net revenue derived from the issuing of currency.

  20. Komsa, R. (2005) Arrival rate of nonindigenous insect species into the United States through foreign trade.

  21. 野暮とは表示:

    Christopher Michael Giles Adams, Operations Officer, Research Vessel Companies, Pure Surroundings Analysis Council.

  22. In case you are in search of a one-of-a-kind experience throughout your UK go to, vacation spot administration London corporations can provide help to design your London journey schedule.

  23. The Bureau of Engraving and Printing has two locations: one in Washington, D.C., and another in Fort Worth, Texas.

  24. Much less mentioned her father went to the hospital June 21 and died six days later when his coronary heart, kidney and lungs failed.

  25. By fostering creativity and self-confidence, pyrite lets you confidently transfer beyond any worries and embrace optimistic thoughts.

發佈留言

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