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

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

 

前面提到的逐幀動畫有一個關鍵的缺點就是須要爲動畫中的每一幀都提供一張單獨的圖片，因爲每一幀的圖片都須要單獨提供，製做起來比較麻煩，圖片量也比較大。用關鍵幀動畫能夠很好的解決這個問題，下面就給你們進行講解bada平臺的關鍵幀動畫。

 

1， 什麼是關鍵幀動畫

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

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

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

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

 

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

 

 

 

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

 

2， 相關概念

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

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

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

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

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

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

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

插值器：能夠理解爲關鍵值產生的計算方式；

 

3， 相關類

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

 

3.1 屬性動畫

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

類	功能說明
IntegerAnimation	用於計算整數型的屬性值，如用於計算旋轉角度屬性值
FloatAnimation	用於計算浮點型的屬性值，如用於計算旋轉角度屬性值。能夠獲得浮點值，更加精確
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()函數不斷的被調用來進行從新繪製就造成了動畫。