bada 2D游戲編程之十——關鍵幀動畫原理

?

前面提到的逐幀動畫有一個關鍵的缺點就是需要為動畫中的每一幀都提供一張單獨的圖片，由于每一幀的圖片都需要單獨提供，制作起來比較麻煩，圖片量也比較大。用關鍵幀動畫可以很好的解決這個問題，下面就給大家進行講解bada平臺的關鍵幀動畫。

?

1， 什么是關鍵幀動畫

關鍵幀動畫的原理是只需要提供一張圖片（或者對象），然后對這張圖片（或者對象）進行處理產生出不同的效果，例如進行放縮處理產生出大小不同的效果，還有進行透明度處理產生出透明度不同的效果等，連續播放處理出來的效果就形成了動畫。

往往這種處理的效果有限，只能進行一些常規的處理，如改變大小、透明度、位置、角度等，所以關鍵幀動畫不適合表現復雜的變形，例如在逐幀動畫中提到的描述一株向日葵從苗芽狀態成長到綻放花朵的過程動畫就不能用關鍵幀動畫來完成，因為這個動畫中的效果不是僅僅通過變形就能實現的，而是需要對圖片中內容的改變，這種情況下就只有采用逐幀動畫了。

下面給大家描述如何用一張圖片來實現一個動畫。

這是提供的一張金魚的圖片，

?

然后用關鍵幀動畫來實現這條金魚從小長到大的變化過程，

?

?

?

這個動畫就是對提供的圖片進行大小的改變來實現的，不需要對每個大小的圖片都提供一張圖片，中間圖片的產生交給系統去處理，節省了很多的工作量。

?

2， 相關概念

關鍵幀動畫是對圖片(或者對象)的屬性值進改變，一般可以改變的屬性為大小、透明度、位置坐標和旋轉角度等，這樣來理解的話，關鍵幀動畫也可以稱為屬性動畫。下面要介紹的這些概念都是和屬性值相關的：

開始值：起始幀中的的屬性值；

結束值：結束幀中的的屬性值；

關鍵值：在起始幀和結束幀之間產生的屬性值，這些值都是按照一定的方式計算出來的；

持續時間：動畫持續的時間；

關鍵幀：開始值和結束值表示的幀都稱為關鍵幀；

過渡幀：關鍵值表示的幀稱為過渡幀；

插值器：可以理解為關鍵值產生的計算方式；

?

3， 相關類

在關鍵幀動畫中最重要的是如何得到關鍵值，因為關鍵值得依靠各種復雜的計算來得到。bada在這方面提供了為開發者提供了很大的幫助，來幫助開發者很方便的獲取關鍵值。

?

3.1 屬性動畫

下面的這些屬性動畫都是用于模擬從一個屬性值變化到另一個屬性值的變化過程的，都提供了GetAnimatedValue ()或者其它函數來根據時間獲取屬性值。這樣將得到的屬性值作為幀屬性進行播放就可以形成動畫了。

類	功能說明
IntegerAnimation	用于計算整數型的屬性值，如用于計算旋轉角度屬性值
FloatAnimation	用于計算浮點型的屬性值，如用于計算旋轉角度屬性值?？梢缘玫礁↑c值，更加精確
PointAnimation	用于計算位置屬性
DimensionAnimation	用于計算大小屬性
RectangleAnimation	用于同時計算位置和大小屬性
RotateAnimation	用于計算旋轉角度屬性

這些類都可以通過傳入開始值、結束值、持續時間和插值器來進行初始化。

?

3.2 插值器

插值器定義了屬性值的計算方式，能夠讓關鍵值呈一定的規律進行變化。這種變化最終體現在動畫的播放速度上，可以產生勻速播放、加速播放和減速播放等各種效果。

其實改變動畫的播放速度有兩種方式，第一種是在動畫中各幀的屬性值保持不變的情況下去改變幀的持續時間，如原有每幀的持續時間是40ms，先進將這值改為20ms，這樣播放速度就明顯加快了；第二種就是在保持原有動畫中各幀持續時間不變的情況下去改變各幀的屬性值，將屬性值變的更大或者更小，這樣也能產生加速或者減速的效果。

插值器就可以幫助開發者通過第二種方式來實現各種動畫效果。它能夠讓動畫幀的屬性值與時間成各種線性關系。

如線型插值器，屬性值隨時間均勻變化。這樣在相同的時間間隔內去取屬性值的話，得到的增量都是相同的。所以動畫也是表現出勻速播放。

如這種曲線關系，在相同的時間間隔內去取屬性值的話，剛開始得到的值之間變化較小，越往后得到的值的變化越來越大，則表現在動畫的播放速度是從慢到快的。

?

?

?

下面是bada提供的插值器類型：

類型	功能說明
ANIMATION_INTERPOLATOR_LINEAR?	屬性值按照線性規律變化，動畫播放則表現為勻速播放。
ANIMATION_INTERPOLATOR_DISCRETE?	屬性值在最后一幀時才發生變化，表現在動畫上則是前段時間不變，最后突然發送一下變化。可以用于實現那種突隱突現，來回閃爍的效果。
ANIMATION_INTERPOLATOR_EASE_IN?	屬性值變化先小后大，動畫播放則表現為先慢后快。
ANIMATION_INTERPOLATOR_EASE_OUT?	屬性值變化先大后小，動畫播放則表現為先快后慢。
ANIMATION_INTERPOLATOR_EASE_IN_OUT?	屬性值變化前期是先小后大，后期先大后小，動畫播放則是由慢到快，再由快到慢。
ANIMATION_INTERPOLATOR_BEZIER?	這個是按照貝塞爾曲線變化，可以實現進行自定義變化。

?

4， 實例

接下來用代碼實現前面的金魚由小變大的例子。

Step 1，準備動畫圖片

只需要準備一張圖片就可以了。圖片的尺寸為134×105像素。

?

?

Step 2，解析圖片

將圖片解析成系統支持的位圖。

AppResource* pAppRes = Application::GetInstance()->GetAppResource();

__pFishBmp =? pAppRes->GetBitmapN("fish.png");

?

Step 3，創建屬性動畫

創建尺寸屬性動畫，用于改變長度屬性值。動畫的初始值為提供的原始圖片的1/3，結束值為原始圖片的2倍，動畫持續的時間為1秒，采用的是線性插值器。

__pFishAni = new DimensionAnimation(Dimension(134/3,105/3),

Dimension(134*2,105*2),1000,ANIMATION_INTERPOLATOR_LINEAR);

?

Step 4，獲取屬性值

結合我們前面的文章用到的模塊代碼，采用“基于時間的固定間隔游戲循環”，只需要在UpdateLogic(int frameInterval) 函數中，根據時間值去獲取屬性值就可以了。

??? __aniDuration = __aniDuration + frameInterval;

??? if(__aniDuration <= 1000)

??? {

?????? __pFishAni->GetAnimatedValue(__aniDuration, __aniDimension);

??? }

??? else

??? {

?????? __aniDuration = 0;

??? }

?

Step 5，繪制圖片形成動畫

在Form的OnDraw()函數中根據得到的屬性值去進行繪制。

??? Canvas* pCanvas = this->GetCanvasN();

??? pCanvas->SetBackgroundColor(Color::COLOR_WHITE);

??? pCanvas->Clear();

??? pCanvas->DrawBitmap(Rectangle(100,100,__aniDimension.width,

__aniDimension.height), *__pFishBmp);

?

??? delete pCanvas;

?

這樣在游戲狀態的更加接口Draw()函數中調用RequestRedraw()去請求更新，然后OnDraw()函數不斷的被調用來進行重新繪制就形成了動畫。

?

?

?

轉載于:https://blog.51cto.com/badaeva/992747

總結

以上是生活随笔為你收集整理的bada 2D游戏编程之十——关键帧动画原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。