Android Animation 之 View Animation（補間動畫）

一、簡介

       補間動畫通過在兩個關鍵幀之間補充漸變的動畫效果來實現一系列簡單的轉換(位置、大小、旋轉和透明度)。如果你有一個TextView對象，你可以移動，旋轉，增大，或者縮小文本。如果它有一個背景圖像，背景圖像將隨着文本的改變而改變。
       在android中補間動畫可以分爲四類：AlphaAnimation(透明度)、ScaleAnimation(縮放)、TranslateAnimation(位移)、RotateAnimation(旋轉)。另外AnimationSet爲動畫的組合。

二、詳解

1.常用屬性介紹

        這裏以一個Animation爲例介紹，其他動畫完全一樣。以下屬性都繼承至Animation類。

        rotateAnimation.setDuration(500); // 動畫持續時間
        rotateAnimation.setStartOffset(2000); // 延時開始

        rotateAnimation.setFillAfter(true); // 動畫結束後是否保持動畫最後的狀態
        rotateAnimation.setFillBefore(true);// 動畫結束後是否還原到開始動畫前的狀態
        rotateAnimation.setFillEnabled(true);// 與setFillBefore效果相同

        rotateAnimation.setRepeatCount(-1);// 重複次數（“- 1”爲無限重複。“1”爲動畫在動畫初始運行後重復一次，因此動畫總共播放兩次。默認值爲“0”，爲沒有重複。）
        rotateAnimation.setRepeatMode(Animation.REVERSE);//重複方式（reverse|restart）

        rotateAnimation.setInterpolator(new LinearInterpolator());//設置插值器

        imageView1.startAnimation(rotateAnimation);//開始動畫

2.插值器

             下圖爲官網截圖，詳細介紹有單獨文字介紹

            

三、示例

1.Java代碼實現

  /**
     * 旋轉動畫
     */
    private void createRotateAnimation() {
        rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(500); // 動畫持續時間
        rotateAnimation.setStartOffset(2000); // 延時開始

        rotateAnimation.setFillAfter(true); // 動畫結束後是否保持動畫最後的狀態
        rotateAnimation.setFillBefore(true);// 動畫結束後是否還原到開始動畫前的狀態
        rotateAnimation.setFillEnabled(true);// 與setFillBefore效果相同

        rotateAnimation.setRepeatCount(-1);// 重複次數（“- 1”爲無限重複。“1”爲動畫在動畫初始運行後重復一次，因此動畫總共播放兩次。默認值爲“0”，爲沒有重複。）
        rotateAnimation.setRepeatMode(Animation.REVERSE);//重複方式（reverse|restart）

        rotateAnimation.setInterpolator(new LinearInterpolator());//設置插值器

//        // XML實現
//        rotateAnimation = (RotateAnimation) AnimationUtils.loadAnimation(ViewAnimation.this, R.anim.view_anim_rotate);

        imageView1.startAnimation(rotateAnimation);
    }

    /**
     * 縮放動畫
     */
    private void createScaleAnimation() {
        scaleAnimation = new ScaleAnimation(1f, 0f, 1f, 0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setDuration(2000);
        scaleAnimation.setRepeatCount(-1);
        scaleAnimation.setRepeatMode(Animation.REVERSE);

//        // XML實現
//        scaleAnimation = (ScaleAnimation) AnimationUtils.loadAnimation(ViewAnimation.this, R.anim.view_anim_scale);

        imageView2.startAnimation(scaleAnimation);
    }

    /**
     * 透明度動畫
     */
    private void createAlphaAnimation() {
        alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
        alphaAnimation.setDuration(2000);
        alphaAnimation.setRepeatCount(-1);
        alphaAnimation.setRepeatMode(Animation.REVERSE);

//        // XML實現
//        alphaAnimation = (AlphaAnimation) AnimationUtils.loadAnimation(ViewAnimation.this, R.anim.view_anim_alpha);

        imageView3.startAnimation(alphaAnimation);
    }


    /**
     * 位移動畫
     */
    private void createTranslateAnimation() {
        translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, -2f,
                Animation.RELATIVE_TO_SELF, 2f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0);
        translateAnimation.setDuration(2000);
        translateAnimation.setRepeatCount(-1);
        translateAnimation.setRepeatMode(Animation.REVERSE);

//        // XML實現
//        translateAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(ViewAnimation.this, R.anim.view_anim_translate);

        imageView4.startAnimation(translateAnimation);
    }

    /**
     * 組合動畫
     */
    private void createAnimationSet() {
        AnimationSet animationSet = new AnimationSet(true);
        animationSet.addAnimation(alphaAnimation);
        animationSet.addAnimation(scaleAnimation);
        animationSet.addAnimation(rotateAnimation);
        animationSet.addAnimation(translateAnimation);
        animationSet.setDuration(2000);
        animationSet.setRepeatCount(-1);
        animationSet.setRepeatMode(Animation.REVERSE);

//        // XML實現
//        AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(ViewAnimation.this, R.anim.view_anim_set);

        imageView5.startAnimation(animationSet);
    }

2.XML實現

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000">

    <!-- pivotX fromXDelta 的值可以是數值、百分數、百分數p 三種格式，比如50、50%、50%p，
         數值，表示在當前View的左上角，即原點處加上50px，做爲X座標；
         50% ，表示在當前控件的左上角加上自己寬度的50%,做爲X座標；
         50%p，表示在當前的左上角加上父控件寬度的50%,做爲X座標。 -->

    <!-- 注意：android:repeatCount="-1" android:repeatMode="reverse"  在set標籤設置無效，需要在各個動畫節點放-->

    <alpha
        android:fromAlpha="1.0"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toAlpha="0.0" />

    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toDegrees="360" />

    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toXScale="0"
        android:toYScale="0" />

    <translate
        android:fromXDelta="-200%"
        android:fromYDelta="0"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toXDelta="200%"
        android:toYDelta="0" />

</set>

3.示例效果

            

4.示例代碼下載地址

       github地址 https://github.com/Ya-Jun/SmallSampleCollection

四、文檔

       文檔本地查看路徑

       file:///D:/Android/android-sdk-windows/docs/guide/topics/graphics/view-animation.html

       file:///D:/Android/android-sdk-windows/docs/guide/topics/resources/animation-resource.html