---

發信人: carlcarl.bbs@ptt.cc (carlcarl.bbs@ptt.cc) 看板: P_CARLCARL
標  題: [GWT] Animation 再探
發信站: Mon Feb  8 17:02:20 2010

---

在〈GWT Animation 初探〉當中，程式已經能讓畫面看起來有動畫的效果，
「表面上」要怎麼使用 Animation 是沒有問題了；
不過這樣子有些無趣，還是要殺進去 Animation 來瞭解這一切背後的內幕（？）。

起點當然是 Animation.run()，沒有呼叫這個 method，是不會有什麼反應的。
run() 有兩個，run(int duration, double startTime) 的
duration 是 Animation 預計持續作用的時間；
startTime 是預計執行的時間。
為甚麼用 startTime 的 data type 是 double 呢？
這點在 Animation 不算是有用到的 Duration.elapsedMillis() 可以找到答案：

        Returns the same result as System#currentTimeMillis(),
        but as a double. Because emulated long math is significantly
        slower than doubles in web mode, this method is to be preferred.

因為在瀏覽器上頭，使用 double 處理起來比模擬 long 還要快得多
（btw... 為甚麼 Animation 只用了 Duration.currentTimeMillis() 取得時間，
而沒有用 Duration.elapsedMillis() 去計算時間差，這我一直想不透 XD）。
另一個 run(int duration) 其實還是呼叫 run(int, double)，
只是自動以當下時間傳給 startTime。

回到 run(int, double) 的內容，關鍵點在於下面這段

    if (animations == null) {
        animations = new ArrayList();  //point-A
        animationTimer = new Timer() {
            @Override
            public void run() {
                updateAnimations();
            }
        };
    }
    animations.add(this);

這邊要回頭看一下 Animation 的資料結構。
講起來有點饒舌。大致上來說，Animation 有一些 static 的 field 跟 method，
目的是統一處理系統當中所有的 Animation object（程式碼 point-A）。
這裡也可以看到，其實 Animation 裡頭是用 Timer 來實做的。
Timer 的細節得先跳過，這裡只要知道看到
animationTime.schedule(int delayMillis) 就表示隔了 delayMillis 個 ms
就會執行 updateAnimations() 的內容，
而 updateAnimations() 會呼叫 update()。
那麼，勢必有需要好好看一下 update() 的內容：

    private boolean update(double curTime) {
        boolean finished = curTime >= startTime + duration;
        if (started && !finished) {
            // Animation is in progress.
            double progress = (curTime - startTime) / duration;
            onUpdate(interpolate(progress));
            return false;
        }

        if (!started && curTime >= startTime) {
            // Start the animation.
            started = true;
            onStart();
            // Intentional fall through to possibly end the animation.
        }

        if (finished) {
            // Animation is complete.
            onComplete();
            started = false;
            running = false;
            return true;
        }

        return false;
    }

裡頭依照不同的狀況，呼叫了 onUpdate(), onStart() 跟 onComplete()。
嗯？為甚麼只有 onUpdate() 是 abstract 的呢？
因為另外兩個到最後還是去呼叫 onUpdate()，
progress 的值給 0 表示剛開始、給 1 表示結束。
接下來就是最詭異的部份啦，傳給 onUpdate() 的數值，
居然還要經過 interpolate() 的計算，這又是為甚麼呢？
根據 javadoc 的說法：

        Interpolate the linear progress into a more natural easing function.

看個對照圖可能比較好懂：
        http://rubyurl.com/iVP9

在開始跟結束的部份比較緩和，或許這樣比較符合人類視覺觀點？
總之，這是為甚麼 Animation 的 javadoc 會說「at a non-fixed frame rate」了。
（順帶提一點，相同的 duration，呼叫 onUpdate() 的次數應該會一樣，
  但是 progress 值會有差異。這應該是 Timer 先天上無法很精準的缺陷？）

看到這邊，Animation 應該可以說沒有秘密了。
剩下來就是如何運用的問題了...... [遠目]


====
資料來源：http://pt2club.blogspot.com/2009/10/gwt-animation_07.html


--

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.231.90.248