Android - ObjectAnimator 的 Easing 進階動畫效果

2015-11-17 3:37 PM

在 使用 ObjectAnimator 實現動畫效果 這篇文章裡

我們學會了如何使用 Android 原生的 ObjectAnimator 實現動畫效果

在這裡我們要用第三方的 Framework 實現一些較進階的動畫效果

若有做過介面相關特效的人員應該很熟悉一個叫做 Easing 的函數

但預設的 ObjectAnimator 能用的函數很少 而且名稱也不同

於是我們就須使用以下兩個開源的 Libraries

JakeWharton/NineOldAndroids 及 daimajia/AnimationEasingFunctions

達成可指定 Easing 函數 以及同時運行多個動畫參數的效果

以下將以原本隱藏在畫面右方的選單元件往左滑動顯示的特效作為範例

程式碼範例

// 首先請先在專案加入這兩個 dependency
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.easing:library:1.0.1@aar'

// 在這裡使用的都是第三方的類別 名稱都跟原生 API 長得一模一樣 千萬不要搞錯
import com.daimajia.easing.Glider;
import com.daimajia.easing.Skill;
import com.nineoldandroids.animation.Animator;
import com.nineoldandroids.animation.AnimatorSet;
import com.nineoldandroids.animation.ObjectAnimator;

// 若之前狀態為 Gone 將無法取得寬度 因此在設為 Visible 後再以 AsyncTask 取得寬度設定動畫
mainMenuHolder.setVisibility(View.VISIBLE);

mainMenuHolder.post(new Runnable() {
    @Override
    public void run() {
     // 由於此範例是在 Fragment 內執行 因此需呼叫 getActivity 才能取得畫面尺寸
        Display display = getActivity().getWindowManager().getDefaultDisplay();
        Point size = new Point();
        display.getSize(size);
        int width = size.x;

        // 建立動畫物件 將選單由最右方向左滑出 直至顯示完整元件
        ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(mainMenu, "x", width - mainMenu.getWidth());
        // 建立動畫物件 將選單外的畫面變暗的效果
        ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(mainMenuMask, "alpha", 1f);

        // 建立動畫監聽事件 在動畫開始時設定為 VISIBLE
        // 這是由於在隱藏選單時同樣會加入此監聽事件 並在動畫結束時隱藏的關係
        objectAnimator1.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart (Animator animation){
                mainMenu.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd (Animator animation){
            }

            @Override
            public void onAnimationCancel (Animator animation){
            }

            @Override
            public void onAnimationRepeat (Animator animation){
            }
        });

        // 將剛剛建立的動畫加入動畫陣列
        AnimatorSet set = new AnimatorSet();
        set.playTogether(
                // 在此可設定 Easing 的函數 有開發過互動式介面的應該很熟悉
                // 若不清楚有那些可以設定 差別又在哪裡 可以看下方的 Easing Functions 參考連結
                Glider.glide( Skill.QuadEaseOut, 300, objectAnimator1 ),
                Glider.glide( Skill.QuadEaseOut, 300, objectAnimator2 )
        );

        // 設定動畫時間間隔 請以動畫陣列內執行時間最長的為主
        set.setDuration(300);
        // 開始執行動畫
        set.start();
    }
});

各項資料連結

Android - 使用 ObjectAnimator 實現動畫效果
Easing Functions
GitHub - JakeWharton/NineOldAndroids
GitHub - daimajia/AnimationEasingFunctions
Android - ObjectAnimator