第50節 - LibGDX: Interpolation
這一節我會介紹LibGDX的Interpolation (內插)。
在數學上,Interpolation就是找一個function(函數),完全符合一堆數據。此function稱作Interpolation Function, f(x)。
在LibGDX上,Interpolation的作用是操作actions類別,它可以把圖片在不同時間內指定不同的值所建立的動畫,我會在這節詳細介紹。
執行結果:
以下是本節LibGDX: Interpolation的執行結果:
Type of Interpolations
LibGDX的Interpolation有以下35種static field(屬性):
- static class: Interpolation.Bounce,
static field: bounce,
所以我們可以用Interpolation.bounce 或 bounce - bounceIn
- bounceOut
- circle
- circleIn
- circleOut
- elastic
- elasticIn
- elasticOut
- exp5
- exp5In
- exp5Out
- exp10
- exp10In
- exp10Out
- fade
- linear
- pow2
- pow2In
- pow2Out
- pow3
- pow3In
- pow3Out
- pow4
- pow4In
- pow4Out
- pow5
- pow5In
- pow5Out
- sine
- sineIn
- sineOut
- swing
- swingIn
- swingOut
例子1: Actions - MoveTo()
例子1會介紹Playing Card Linear Movement,則是把紙牌直線移動到目的地,結果如下圖:
執行程式結果
- DesktopLauncher是PC Desktop的Starter Class,我們在DesktopLauncher內設定顯示的大小為1024 X 768 px。
- 把以上圖片(png)儲存到Android的assets文件夾內。
- 把所有圖片(png)存入Texture物件內。
- 把按鈕和紙牌Texture物件存入Actor的Image物件內。
注意: Stage是一個舞台,在舞台內可以有不同的Actor,而Image也是Actor的一種。
- 建立一個Stage物件(stage)。
- 每次按下按鈕時,首先重設(Reset)Image物件的設定。
- 把紙牌Image物件存入Stage物件(stage)內。
- 用Image物件的addAction()方法加入moveTo()方法,這樣做就可以把紙牌在原本的位置(716, 606)直線移動到目的地位置(484, 343)。
- 設定監聽動作Gdx.input.setInputProcessor(stage),把Stage物件存入。
- 把背景Texture物件(bgTexture)用SpriteBatch物件(batch)在於Render()方法內顯示出來。
- 1-stage.act(); - 更新所有Actor,這個例子裡我們只有一個紙牌物件(cardImage1)。
2-stage.draw(); - 把所有Actor顯示在屏幕上,這個例子裡我們只有一個紙牌物件(cardImage1)。
其他方法 (Other Methods)
以下列出六種方法,方法1、2和3執行結果一樣,方法4、5和6加入Interpolation的話bounceOut,方法4、5和6執行結果一樣:
- 方法1 - 用addAction()方法把moveTo()方法存入。
- 方法2 - 建立一個Action物件(action),再用addAction()方法把moveTo()方法存入。
- 方法3 - 建立一個MoveToAction物件(moveAction),再設定位置和時間,最後用addAction()方法把moveTo()方法存入。
- 方法4 - 方法4和方法1相同,加入了interpolation (bounceOut)。
注意: 我們可以用Static Variable (Interpolation.bounceOut)。
或者加import static com.badlogic.gdx.math.Interpolation.*; 這樣做我們就可以簡化用bounceOut。 - 方法5 - 方法5和方法2相同,加入了interpolation (bounceOut)。
- 方法6 - 方法6和方法3相同,加入了interpolation (bounceOut)。
例子2 - Interpolation
例子2會介紹節一個Interpolation - bounce的動畫效果,結果如下圖:
執行程式結果
程式部分
- DesktopLauncher是PC Desktop的Starter Class,我們在DesktopLauncher內設定顯示的大小為1024 X 768 px。
- 把以上圖片(png)儲存到Android的assets文件夾內。
- 把所有圖片(png)存入Texture物件內。
- 把按鈕和紙牌Texture物件存入Actor的Image物件內。
注意: Stage是一個舞台,在舞台內可以有不同的Actor,而Image也是Actor的一種。
- 建立一個Stage物件(stage)。
- 每次按下按鈕時,首先重設(Reset)Image物件的設定。
- 把紙牌和bounce的Image物件存入Stage物件(stage)內。
- 用Image物件的addAction()方法加入所有動作。
- 設定監聽動作Gdx.input.setInputProcessor(stage),把Stage物件存入。
- 把背景Texture物件(bgTexture)用SpriteBatch物件(batch)在於Render()方法內顯示出來。
- 1-stage.act(); - 更新所有Actor,這個例子裡我們只有一個紙牌物件(cardImage1)。
2-stage.draw(); - 把所有Actor顯示在屏幕上,這個例子裡我們只有一個紙牌物件(cardImage1)。