Android - 使用 Tweener 加入互動特效

2015-05-23 9:11 PM

以往在撰寫 Flash 及網頁時

若要加入互動效果，我們常常會使用一個叫做 Tweener 的引擎

使用 Tweener 後可以很容易地達成物件的移動與淡出淡入等特效

如此一來就可以增加介面的互動效果達到更好的使用者體驗

以下就來介紹如何在 Android 內使用 Tweener

首先須下載 Universal Tween Engine

程式碼範例

首先須宣告 TweenManager 以及控制 Renderer 的 boolean 值

 // 所有 Tweener 皆須傳入此 Manager
 private final TweenManager tweenManager = new TweenManager();

 // 設為 false 則停止 renderer
 private boolean isAnimationRunning = true;

新增一個多執行緒的 renderer (可在 onCreate 或 onResume 內新增) 並註冊 Accessor

 // 註冊各類別處理器
 Tween.registerAccessor(Button.class, new ButtonAccessor());

 // Renderer
 new Thread(new Runnable() {
            private long lastMillis = -1;

            @Override
            public void run() {
                while (isAnimationRunning) {
                    if (lastMillis > 0) {
                        long currentMillis = System.currentTimeMillis();
                        final float delta = (currentMillis - lastMillis) / 1000f;

                        runOnUiThread(new Runnable() {
                            @Override public void run() {
                                tweenManager.update(delta);
                            }
                        });

                        lastMillis = currentMillis;
                    } else {
                        lastMillis = System.currentTimeMillis();
                    }

                    try {
   // 60 FPS
                        Thread.sleep(1000/60);
                    } catch(InterruptedException ex) {
                    }
                }
            }
        }).start();

之後便可任意呼叫 Tweener 以及 Timeline

 Tween.to(loginBtn, ButtonAccessor.ALPHA, 0.1f).target(0.5f).ease(Quad.OUT).start(tweenManager);

 Timeline.createSequence()
             .push( Tween.to(loginBtn, ButtonAccessor.ALPHA, 0.1f).target(0.1f).ease(Quad.OUT) )
             .push( Tween.to(loginBtn, ButtonAccessor.ALPHA, 0.3f).target(1).ease(Quad.OUT) )
             .start(tweenManager);

各項資料連結

Universal Tween Engine(Google Code)
Universal Tween Engine(GitHub)