Android - Tweener Parallel Timeline

2015-05-29 3:10 PM

在打造使用者互動特效時

並不會一次只動作一個物件

例如點擊後可能有按鈕特效加上我們自訂的光影特效

或是點擊後出現的物件特效等等

若是想同時啟動這些特效則可使用本單元介紹的 Parallel Timeline

與多個 Tweener 不同的是 Timeline 可以將一系列特效儲存起來

之後使用 start 方法即可直接啟動特效

算是製作大型互動特效的一大利器

程式碼範例

    Timeline.createSequence()
    // 首先設定所有物件的初始狀態(座標, 透明度等等)
    .push(Tween.set(...))
    .push(Tween.set(...))
    .push(Tween.set(...))

    // delay 1秒鐘
    .pushPause(1.0f)

    // 加入不同的 Tweener, 此處會依照加入的順序, 在上一個特效結束時動作
    .push(Tween.to(...))
    .push(Tween.to(...))
    .push(Tween.to(...))

    // 此處即為加入同時動作的 Tweener
    .beginParallel()
        .push(Tween.to(...))
        .push(Tween.to(...))
        .push(Tween.to(...))
    .end()

    // Yo yo 效果, 將會重複播放此 Timeline 內的特效 2 次, 並在重複開始前 delay 0.5 秒
    .repeatYoyo(2, 0.5f)

    // 啟動 Timeline
    .start(myManager);

各項資料連結

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

Android - Tweener 的 Accessor

2015-05-23 9:17 PM

Accessor 是針對 Java 特性加入的一個 Interface

Tweener 需要依靠實作此 Interface 的 Class 來渲染動畫效果

程式碼範例

 public class ButtonAccessor implements TweenAccessor<Button> {

    // 自訂義 Tween 類型, 用以判別在實作的 Method 內需處理的對象
    public static final int POSITION = 1;
    public static final int ALPHA = 2;

    @Override
    public int getValues(Button target, int tweenType, float[] returnValues) {
        switch (tweenType) {
            case POSITION:
  // 由物件內取回實際值
                returnValues[0] = target.getX();
                returnValues[1] = target.getY();
  // 修改 2 個屬性, 因此回傳 2
                return 2;
            case ALPHA:
                returnValues[0] = target.getAlpha();
  // 修改 1 個屬性, 回傳 1
                return 1;
            default:
                return -1;
        }
    }

    @Override
    public void setValues(Button target, int tweenType, float[] newValues) {
        switch (tweenType) {
            case POSITION:
  // 設定新屬性
                target.setX(newValues[0]);
                target.setY(newValues[1]);
                break;
            case ALPHA:
  // 設定新屬性(需對應 getValues 的設定)
                target.setAlpha(newValues[0]);
                break;
            default:
                break;
        }
    }

各項資料連結

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

Android - 使用 Tweener 加入互動特效

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)