GWT Animation 初探

Animation 是 GWT 內的一個 class，名字取的很美妙，實際上是在做什麼的呢？ GWT 的 showcase 給了一個示範，不過裡頭的程式碼實在有點古怪，姑且直接來看 1.6 版的 API doc 怎麼說。

An Animation is a continuous event that updates progressively over time at a non-fixed frame rate.

哈哈... 根本就是騙人的，哪來什麼動畫 [笑]。簡單地說「Animation 是一個會持續要求 update 動作的物件。而間隔的時間是不固定的。」阿？這什麼鬼？還是用程式碼來說明好了...

import com.google.gwt.animation.client.Animation;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Label;

public class HelloAnimation extends AbsolutePanel{
 private Label hello = new Label("Hello Animation");
 private final int WIDTH = 800;
 private final int HEIGHT = 200;
 
 public HelloAnimation(){
  this.setPixelSize(WIDTH, HEIGHT);
  this.add(hello); //要先加上去，才有辦法移動
  Player player = new Player(this);
  player.run(5*1000); //point-A
 }
 
 public void playOneFrame(double progress){
  this.setWidgetPosition(hello, (int)(WIDTH*progress), HEIGHT/2);
 }
}

class Player extends Animation{
 HelloAnimation target;
 
 public Player(HelloAnimation t){
  target = t;
 }
 
 @Override
 protected void onUpdate(double progress) {
  target.playOneFrame(progress);
 }
}

只要 new 一個 HelloAnimation，然後加到 RootPanel 上頭去，就會看「Hello Animation」從畫面左邊跑到右邊。（至於最後「Hello Animation」突然換行的狀況，先跳過... XD）

裡頭兩個 class 分別負責兩件事情。HelloAnimation 負責畫面顯示的部份，直接 extends AbsolutePanel，搭配 AbsolutePanel.setWidgetPosition() 就可以很快速地設定 widget 的位置，這樣在上頭的東西「動」起來就相對方便。playOneFrame() 這個 method 就是在處理這件事情，至於 progress 這個參數的作用，就必須回到 Animation（也就是範例程式裡頭的 Player）才能說明。

Player 這個 class 其實很簡單，extends Animation 之後，只有一個 method 必須實作，就是 onUpdate()。這個 method 就是 API 提到的效果，當 Player 起作用的時候，onUpdate() 就會持續地被呼叫、並且給予不同的參數 progress 值，值域介於 0～1 之間，會隨著時間會越來越大，乘上 100 就是完成度啦，因為實際負責「動」的物件是 HelloAnimation，所以在呼叫 HelloAnimation.playOneFrame() 時候就原封不動地傳進去。這個參數在製作像動畫這種東西時，就很方便，因為 Animation 幫你算好 progress，不用自己動手。像這個例子當中，「Hello Animation」要在指定的時間內橫越指定的寬度，但是在撰寫 playOneFrame() 時完全不用理會「指定的時間」有多長，只要把寬度乘上 progress 就解決了。現在動畫的長度是五秒鐘（程式碼 point-A），要改成兩倍慢 or 兩倍快，就只要在 player.run() 時給 10 秒 or 2.5 秒就可以了。

看到這裡，是不是覺得 GWT 設計的很好、使用起來很簡單呢？ [奸笑]

至於 Animation 的細節，我們下次再談（初探嘛...）