1. 程式人生 > >Android 動畫之補間動畫(View Animation)

Android 動畫之補間動畫(View Animation)

Android 中補間動畫包括下面四種:

1.透明度動畫 (AlphaAnimation)

2.縮放動畫 (ScaleAnimation)

3.平移動畫 (TranslateAnimation)

4.旋轉動畫 (RotateAnimation)

補間動畫是專門針對View 的。只能應用於View。

具體使用 

AlphaAnimation

補間動畫可以使用Java程式碼建立也可以使用xml檔案建立。在Java程式碼中建立透明度動畫:

        AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0f);
        alphaAnimation.setDuration(1000);
        imageView.startAnimation(alphaAnimation);

使用xml檔案建立,需要在res資料夾下新建一個anim資料夾,所有的補間動畫全部放在此資料夾下。

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1"
    android:toAlpha="0"
    android:duration="1000">

</alpha>

屬性含義:  fromAlpha    動畫開始時View的透明度    1為完全不透明  0為完全透明  取值為0~1                                                                           toAlpha        動畫結束時View的透明度                                                                                                                                               duration       動畫持續時間 單位為毫秒                                                                                                                         

在Java程式碼中使用AnimationUtils來載入動畫並開始該動畫:

        Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
        imageView.startAnimation(alphaAnimation);

ScaleAnimation

在Java程式碼中建立縮放動畫

        ScaleAnimation scaleAnimation = new ScaleAnimation(1f, 2f, 1f, 2f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setDuration(1000);
        imageView.startAnimation(scaleAnimation);

使用xml檔案建立,

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1"
    android:toXScale="2"
    android:fromYScale="1"
    android:toYScale="2"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1000">

</scale>

屬性含義:  fromXScale    動畫開始時X軸方向上的縮放係數                                                                                                                                toXScale         動畫結束時X軸方向上的縮放係數                                                                                                                              fromYScale    動畫開始時Y軸方向上的縮放係數                                                                                                                                toYScale        動畫結束時Y軸方向上的縮放係數                                                                                                                                pivotX            X軸方向上的縮放的軸點   值可以是具體值  百分比  百分比p(如50%p)  例如50 代表pivotX 為當前執行動畫的View的左上角加上50px為軸點。 50%代表當前執行動畫的View的左上角加上View寬的50%為軸點。50%p代表當前執行動畫的View的左上角加上該View的父View寬的50%為軸點。                                                                                                                                pivotY           Y軸方向上的縮放的軸點。取值同pivotX。

在Java程式碼中載入並開始該動畫                             

        Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);
        imageView.startAnimation(scaleAnimation);

TranslateAnimation

在Java程式碼中建立平移動畫

        TranslateAnimation translateAnimation = new         
                TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        translateAnimation.setDuration(1000);
        imageView.startAnimation(translateAnimation);

 使用xml檔案建立,

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="50%"
    android:fromYDelta="0"
    android:toYDelta="50%"
    android:duration="1000" >

</translate>

屬性含義:  fromXDelta   動畫開始時X軸方向上的移動距離。值可以是具體值  百分比  百分比p(如50%p)                                                         toXDelta       動畫結束時X軸方向上的移動距離。值可以是具體值  百分比  百分比p(如50%p)                                                          fromYDelta   動畫結束時Y軸方向上的移動距離。值可以是具體值  百分比  百分比p(如50%p)                                                          toYDelta       動畫結束時Y軸方向上的移動距離。值可以是具體值  百分比  百分比p(如50%p)

在Java程式碼中載入並開始該動畫

        Animation translateAnimation = AnimationUtils.loadAnimation(this,             
              R.anim.translate_anim);
        imageView.startAnimation(translateAnimation);

RotateAnimation

在Java程式碼中建立旋轉動畫

        RotateAnimation rotateAnimation = new RotateAnimation(0f, 180f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(1000);
        imageView.startAnimation(rotateAnimation);

使用xml檔案建立,

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="180"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1000">

</rotate>

屬性含義:  fromDegrees    動畫開始時的角度                                                                                                                                                      toDegrees        動畫結束時的角度      正直表示順時針旋轉    負值表示逆時針旋轉                                                                          pivotX               旋轉的中心點X軸座標    取值和ScaleAnimation 的pivotX一樣                                                                                  pivotY               旋轉的中心點Y軸座標                                                  

在Java程式碼中載入並開始該動畫

        Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
        imageView.startAnimation(rotateAnimation);

注意:scaleAnimation 和 rotateAnimation 中的pivotX 和 pivotY可以看成是一個釘子釘在該座標點上在進行縮放或旋轉。在計算pivotX和pivotY的值的時候要注意。不管是具體指,還是百分比 或 百分比p。都是以進行動畫的View的左上角為原點來計算。即50%是以該View的中間位置作為軸點。但是50%p就不是以該View的父View的中心位置作為軸點。而是以該View的左上角加上該View的父View的寬高的一半作為軸點。這一點需要注意。

 AnimationSet 

Android 還提供了一個AnimationSet類來組合使用補間動畫。 

在Java程式碼中使用AnimationSet

        AnimationSet set1 = new AnimationSet(true);
        
        AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
        alphaAnimation.setDuration(1000);

        ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setDuration(1000);

        AnimationSet set2 = new AnimationSet(true);
        set2.addAnimation(new RotateAnimation(0, 360,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f));
        set2.addAnimation(new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0,
                Animation.RELATIVE_TO_SELF, 0.5f));
        set2.setDuration(2000);
        set2.setStartOffset(1000);

        set1.addAnimation(alphaAnimation);
        set1.addAnimation(scaleAnimation);
        set1.addAnimation(set2);
        //開始動畫
        imageView.startAnimation(set1);

同樣我們可以在xml檔案中建立AnimationSet

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

    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="1000"/>

    <scale
        android:fromXScale="1.0"
        android:toXScale="0.5"
        android:fromYScale="1.0"
        android:toYScale="0.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"/>

    <set android:shareInterpolator="true"
        android:startOffset="1000"
        android:duration="2000">

        <rotate
            android:fromDegrees="0"
            android:toDegrees="360"
            android:pivotX="50%"
            android:pivotY="50%" />

        <translate
            android:fromXDelta="0"
            android:toXDelta="50%"
            android:fromYDelta="0"
            android:toYDelta="50%" />

    </set>

</set>

 上面的屬性一看就懂。不做過多解釋。

補間動畫還提供了一些控制動畫的方法。                                                                                                                               setRepeatCount(int repeatCount);        設定動畫的播放次數. 不包括第一次執行的次數. 比如設定為1.表示動畫執行2次.如果要讓動畫一直重複,可以傳入一個小於0的數.如 -1。                                                                                                                             setRepeatMode(int repeatMode);          設定動畫的重複播放的模式,包括Animation.RESTART(重複播放) Animation.REVERSE(倒序播放)                                                                                                                                                         setFillAfter(boolean fillAfter)                   設定動畫在執行完畢後是否停留在最後一幀,預設為false。                                                 setStartOffset(long startOffset)               設定動畫延時。

監聽動畫的執行    我們有時候需要在動畫執行開始前  執行結束後執行一些操作可以監聽檢視動畫的執行。呼叫Animation.setAnimationListener(); 比如我們要監聽TranslateAnimation動畫

TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        translateAnimation.setDuration(1000);
        translateAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        imageView.startAnimation(translateAnimation);