Search

Android - 使用 Tweener 加入互動特效

2015-05-23 9:11 PM

以往在撰寫 Flash 及網頁時

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

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

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

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

首先須下載 Universal Tween Engine

程式碼範例

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

  1. // 所有 Tweener 皆須傳入此 Manager
  2. private final TweenManager tweenManager = new TweenManager();
  3.  
  4. // 設為 false 則停止 renderer
  5. private boolean isAnimationRunning = true;

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

  1. // 註冊各類別處理器
  2. Tween.registerAccessor(Button.class, new ButtonAccessor());
  3.  
  4. // Renderer
  5. new Thread(new Runnable() {
  6. private long lastMillis = -1;
  7.  
  8. @Override
  9. public void run() {
  10. while (isAnimationRunning) {
  11. if (lastMillis > 0) {
  12. long currentMillis = System.currentTimeMillis();
  13. final float delta = (currentMillis - lastMillis) / 1000f;
  14.  
  15. runOnUiThread(new Runnable() {
  16. @Override public void run() {
  17. tweenManager.update(delta);
  18. }
  19. });
  20.  
  21. lastMillis = currentMillis;
  22. } else {
  23. lastMillis = System.currentTimeMillis();
  24. }
  25.  
  26. try {
  27. // 60 FPS
  28. Thread.sleep(1000/60);
  29. } catch(InterruptedException ex) {
  30. }
  31. }
  32. }
  33. }).start();

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

  1. Tween.to(loginBtn, ButtonAccessor.ALPHA, 0.1f).target(0.5f).ease(Quad.OUT).start(tweenManager);
  2.  
  3. Timeline.createSequence()
  4. .push( Tween.to(loginBtn, ButtonAccessor.ALPHA, 0.1f).target(0.1f).ease(Quad.OUT) )
  5. .push( Tween.to(loginBtn, ButtonAccessor.ALPHA, 0.3f).target(1).ease(Quad.OUT) )
  6. .start(tweenManager);
各項資料連結
Universal Tween Engine(Google Code)
Universal Tween Engine(GitHub)

No comments:

Post a Comment