Android動畫進階—使用開源動畫庫nineoldandroids

 

前言

Android系統支持原生動畫，這為應用開發者開發絢麗的界面提供瞭極大的方便，有時候動畫是很必要的，當你想做一個滑動的特效的時候，如果苦思冥想都搞不定，那麼你可以考慮下動畫，說不定動畫輕易就搞定瞭。下面再簡單回顧下Android中的動畫，本文後面會介紹一個稍微復雜點的動畫，先上效果圖

data-cke-saved-src=https://www.aiwalls.com/uploadfile/Collfiles/20131230/2013123009202384.gif

動畫分類

View動畫：也叫漸變動畫，針對View的動畫，主要支持平移、旋轉、縮放、透明度

Drawable動畫：也叫幀動畫，主要是設置View的背景，可以以動畫的形式為View設置多張背景

對象屬性動畫（Android3.0新加入）：可以對對象的屬性進行動畫而不僅僅是View，動畫默認時間間隔300ms，默認幀率10ms/幀。其可以達到的效果是：在一個時間間隔內完成對象從一個屬性值到另一個屬性值的改變，因此，屬性動畫幾乎是無所不能的，隻要對象有這個屬性，它都能實現動畫效果，但是屬性動畫從Android3.0才有，這就嚴重制約瞭屬性動畫的使用，這就是開源動畫庫nineoldandroids的作用，采用nineoldandroids，可以在3.0以前的系統上使用屬性動畫，nineoldandroids的網址是：https://nineoldandroids.com。說到屬性動畫，就不得不提到插值器（TimeInterpolator）和估值算法（TypeEvaluator），下面介紹。

TimeInterpolator和TypeEvaluator

TimeInterpolator中文翻譯為時間插值器，它的作用是根據時間流逝的百分比來計算出當前屬性值改變的百分比，系統預置的有LinearInterpolator（線性插值器：勻速動畫）、AccelerateDecelerateInterpolator（加速減速插值器：動畫兩頭慢中間快）和DecelerateInterpolator（減速插值器：動畫越來越慢）等；TypeEvaluator的中文翻譯為類型估值算法，它的作用是根據當前屬性改變的百分比來計算改變後的屬性值，系統預置的有IntEvaluator（針對整型屬性）、FloatEvaluator（針對浮點型屬性）和ArgbEvaluator（針對Color屬性）。可能這麼說還有點晦澀，沒關系，下面給出一個實例就很好理解瞭。

 

data-cke-saved-src=https://www.aiwalls.com/uploadfile/Collfiles/20131230/2013123009202485.png

看上述動畫，很顯然上述動畫是一個勻速動畫，其采用瞭線性插值器和整型估值算法，在40ms內，View的x屬性實現從0到40的變換，由於動畫的默認刷新率為10ms/幀，所以該動畫將分5幀進行，我們來考慮第三幀（x=20 t=20ms），當時間t=20ms的時候，時間流逝的百分比是0.5 (20/40=0.5)，意味這現在時間過瞭一半，那x應該改變多少呢，這個就由插值器和估值算法來確定。拿線性插值器來說，當時間流逝一半的時候，x的變換也應該是一半，即x的改變是0.5，為什麼呢？因為它是線性插值器，是實現勻速動畫的，下面看它的源碼：

public class LinearInterpolator implements Interpolator {

    public LinearInterpolator() {
    }
    
    public LinearInterpolator(Context context, AttributeSet attrs) {
    }
    
    public float getInterpolation(float input) {
        return input;
    }
}

很顯然，線性插值器的返回值和輸入值一樣，因此插值器返回的值是0.5，這意味著x的改變是0.5，這個時候插值器的工作就完成瞭。

具體x變成瞭什麼值，這個需要估值算法來確定，我們來看看整型估值算法的源碼：

public class IntEvaluator implements TypeEvaluator {

    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
        int startInt = startValue;
        return (int)(startInt + fraction * (endValue - startInt));
    }
}

上述算法很簡單，evaluate的三個參數分別表示：估值小數、開始值和結束值，對應於我們的例子就分別是：0.5，0，40。根據上述算法，整型估值返回給我們的結果是20，這就是（x=20 t=20ms）的由來。

說明：屬性動畫要求該屬性有set方法和get方法（可選）；插值器和估值算法除瞭系統提供的外，我們還可以自定義，實現方式也很簡單，因為插值器和估值算法都是一個接口，且內部都隻有一個方法，我們隻要派生一個類實現接口就可以瞭，然後你就可以做出千奇百怪的動畫效果。具體一點就是：自定義插值器需要實現Interpolator或者TimeInterpolator，自定義估值算法需要實現TypeEvaluator。還有就是如果你對其他類型（非int、float、color）做動畫，你必須要自定義類型估值算法。

nineoldandroids介紹

其功能和android.animation.*中的類的功能完全一致，使用方法完全一樣，隻要我們用nineoldandroids來編寫動畫，就可以在所有的Android系統上運行。比較常用的幾個動畫類是：ValueAnimator、ObjectAnimator和AnimatorSet，其中ObjectAnimator繼承自ValueAnimator，AnimatorSet是動畫集，可以定義一組動畫。使用起來也是及其簡單的，下面舉幾個小栗子。

栗子1：改變一個對象（myObject）的 translationY屬性，讓其沿著Y軸向上平移一段距離：它的高度，該動畫在默認時間內完成，動畫的完成時間是可以定義的，想要更靈活的效果我們還可以定義插值器和估值算法，但是一般來說我們不需要自定義，系統已經預置瞭一些，能夠滿足常用的動畫。

ObjectAnimator.ofFloat(myObject, translationY, -myObject.getHeight()).start();

栗子2：改變一個對象的背景色屬性，典型的情形是改變View的背景色，下面的動畫可以讓背景色在3秒內實現從0xFFFF8080到0xFF8080FF的漸變，並且動畫會無限循環而且會有反轉的效果

ValueAnimator colorAnim = ObjectAnimator.ofInt(this, backgroundColor, /*Red*/0xFFFF8080, /*Blue*/0xFF8080FF);
colorAnim.setDuration(3000);
colorAnim.setEvaluator(new ArgbEvaluator());
colorAnim.setRepeatCount(ValueAnimator.INFINITE);
colorAnim.setRepeatMode(ValueAnimator.REVERSE);
colorAnim.start();

栗子3：動畫集合，5秒內對View的旋轉、平移、縮放和透明度都進行瞭改變

AnimatorSet set = new AnimatorSet();
set.playTogether(
    ObjectAnimator.ofFloat(myView, rotationX, 0, 360),
    ObjectAnimator.ofFloat(myView, rotationY, 0, 180),
    ObjectAnimator.ofFloat(myView, rotation, 0, -90),
    ObjectAnimator.ofFloat(myView, translationX, 0, 90),
    ObjectAnimator.ofFloat(myView, translationY, 0, 90),
    ObjectAnimator.ofFloat(myView, scaleX, 1, 1.5f),
    ObjectAnimator.ofFloat(myView, scaleY, 1, 0.5f),
    ObjectAnimator.ofFloat(myView, alpha, 1, 0.25f, 1)
);
set.setDuration(5 * 1000).start();

栗子4：下面是個簡單的調用方式，其animate方法是nineoldandroids特有的

Button myButton = (Button)findViewById(R.id.myButton);

//Note: in order to use the ViewPropertyAnimator like this add the following import:
//  import static com.nineoldandroids.view.ViewPropertyAnimator.animate;
animate(myButton).setDuration(2000).rotationYBy(720).x(100).y(100);

栗子5：一個采用nineoldandroids實現的稍微復雜點的動畫

佈局xml如下：


<framelayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="https://schemas.android.com/apk/res/android"></framelayout>

代碼如下：

public class MainActivity extends Activity implements OnClickListener {

    private static final String TAG = MainActivity;

    private Button mMenuButton;
    private Button mItemButton1;
    private Button mItemButton2;
    private Button mItemButton3;
    private Button mItemButton4;
    private Button mItemButton5;

    private boolean mIsMenuOpen = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    private void initView() {
        mMenuButton = (Button) findViewById(R.id.menu);
        mMenuButton.setOnClickListener(this);

        mItemButton1 = (Button) findViewById(R.id.item1);
        mItemButton1.setOnClickListener(this);

        mItemButton2 = (Button) findViewById(R.id.item2);
        mItemButton2.setOnClickListener(this);

        mItemButton3 = (Button) findViewById(R.id.item3);
        mItemButton3.setOnClickListener(this);

        mItemButton4 = (Button) findViewById(R.id.item4);
        mItemButton4.setOnClickListener(this);

        mItemButton5 = (Button) findViewById(R.id.item5);
        mItemButton5.setOnClickListener(this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        mMenuButton.performClick();
        getMenuInflater().inflate(R.menu.main, menu);
        return false;
    }

    @Override
    public void onClick(View v) {
        if (v == mMenuButton) {
            if (!mIsMenuOpen) {
                mIsMenuOpen = true;
                doAnimateOpen(mItemButton1, 0, 5, 300);
                doAnimateOpen(mItemButton2, 1, 5, 300);
                doAnimateOpen(mItemButton3, 2, 5, 300);
                doAnimateOpen(mItemButton4, 3, 5, 300);
                doAnimateOpen(mItemButton5, 4, 5, 300);
            } else {
                mIsMenuOpen = false;
                doAnimateClose(mItemButton1, 0, 5, 300);
                doAnimateClose(mItemButton2, 1, 5, 300);
                doAnimateClose(mItemButton3, 2, 5, 300);
                doAnimateClose(mItemButton4, 3, 5, 300);
                doAnimateClose(mItemButton5, 4, 5, 300);
            }
        } else {
            Toast.makeText(this, 你點擊瞭 + v, Toast.LENGTH_SHORT).show();
        }

    }

    /**
     * 打開菜單的動畫
     * @param view 執行動畫的view
     * @param index view在動畫序列中的順序
     * @param total 動畫序列的個數
     * @param radius 動畫半徑
     */
    private void doAnimateOpen(View view, int index, int total, int radius) {
        if (view.getVisibility() != View.VISIBLE) {
            view.setVisibility(View.VISIBLE);
        }
        double degree = Math.PI * index / ((total - 1) * 2);
        int translationX = (int) (radius * Math.cos(degree));
        int translationY = (int) (radius * Math.sin(degree));
        Log.d(TAG, String.format(degree=%f, translationX=%d, translationY=%d,
                degree, translationX, translationY));
        AnimatorSet set = new AnimatorSet();
        //包含平移、縮放和透明度動畫
        set.playTogether(
                ObjectAnimator.ofFloat(view, translationX, 0, translationX),
                ObjectAnimator.ofFloat(view, translationY, 0, translationY),
                ObjectAnimator.ofFloat(view, scaleX, 0f, 1f),
                ObjectAnimator.ofFloat(view, scaleY, 0f, 1f),
                ObjectAnimator.ofFloat(view, alpha, 0f, 1));
        //動畫周期為500ms
        set.setDuration(1 * 500).start();
    }

    /**
     * 關閉菜單的動畫
     * @param view 執行動畫的view
     * @param index view在動畫序列中的順序
     * @param total 動畫序列的個數
     * @param radius 動畫半徑
     */
    private void doAnimateClose(final View view, int index, int total,
            int radius) {
        if (view.getVisibility() != View.VISIBLE) {
            view.setVisibility(View.VISIBLE);
        }
        double degree = Math.PI * index / ((total - 1) * 2);
        int translationX = (int) (radius * Math.cos(degree));
        int translationY = (int) (radius * Math.sin(degree));
        Log.d(TAG, String.format(degree=%f, translationX=%d, translationY=%d,
                degree, translationX, translationY));
        AnimatorSet set = new AnimatorSet();
      //包含平移、縮放和透明度動畫
        set.playTogether(
                ObjectAnimator.ofFloat(view, translationX, translationX, 0),
                ObjectAnimator.ofFloat(view, translationY, translationY, 0),
                ObjectAnimator.ofFloat(view, scaleX, 1f, 0f),
                ObjectAnimator.ofFloat(view, scaleY, 1f, 0f),
                ObjectAnimator.ofFloat(view, alpha, 1f, 0f));
        //為動畫加上事件監聽，當動畫結束的時候，我們把當前view隱藏
        set.addListener(new AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
            }

            @Override
            public void onAnimationRepeat(Animator animator) {
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                view.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationCancel(Animator animator) {
            }
        });

        set.setDuration(1 * 500).start();
    }
}

 

Related posts:

  1. Android屬性動畫–補充說明&amp;進階
  2. Android-25種開源炫酷動畫框架
  3. Android框架進階–ThinkAndroid註解機制
  4. Android Voip開源客戶端比較
  5. android高分段進階攻略（1）傳感器
  6. [Android進階]Android程序與JavaScript之間的簡單調用
  7. Android 開發中使用開源框架 DataDroid
  8. Android開源框架Universal-Image-Loader學習四——LimitedMemoryCache的一些子集

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *