Android動畫-View動畫,插值器

原文地址 http://blog.csdn.net/qq_25806863/article/details/70169620

補間動畫又叫View動畫。Android中的補間動畫分四種，漸變、縮放、平移，旋轉。還有個set是他們的組合，

在XML文件中的標籤對應是 <alpha>,<scale>,<translate>,<rotate>

對應的四個類是AlphaAnimation,ScaleAnimation,TranslateAnimation,RotateAnimation四個類。

這四個類都繼承Animation類，Animation是個抽象類。

Java類	XML標籤	效果
AlphaAnimation	<alpha>	讓透明度漸變，
ScaleAnimation	<scale>	放大或縮小
TranslateAnimation	<translate>	移動位置
RotateAnimation	<rotate>	繞某一點旋轉

使用

View動畫是作用在View上的。使用有兩種方式,以一個簡單的旋轉動畫爲例：

• 1. 在res中新建anim文件夾，在這個文件夾裏寫上xml動畫文件。如res/anim/anim_test.xml.
  2. 在java文件中用這個xml文件生成Animation類。
  3. 調用View的startAnimation來啓動動畫。

xml文件：

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="180"
    android:duration="2000"
    android:pivotX="50%"
    android:pivotY="50%"
    />

java activity：

btnRun = (Button) findViewById(R.id.btn_run);
ivIc = (ImageView) findViewById(R.id.iv_ic);
final Animation animation = AnimationUtils.loadAnimation(this,R.anim.anim_test);
btnRun.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        ivIc.startAnimation(animation);
    }
});

!

• 直接在Java文件中new一個Animation的子類，然後調用View的startAnimation來啓動動畫。

final RotateAnimation animation = new RotateAnimation(0,180,50,50);
        animation.setDuration(2000);
        btnRun.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ivIc.startAnimation(animation);
            }
        });

應該能發現這兩個動畫並不一樣。因爲在xml文件中`pivotX="50% pivotY="50%""指的是在要動畫的view的高寬的50%爲動畫中心，也就是View的正中心。這裏是旋轉，就是旋轉中心了。 而在Java中設置的兩個50，意思是從這個View的左上角向右偏移50像素，向下偏移50像素爲動畫中心。

一般推薦用XML來寫View動畫，有以下好處：

• xml文件以配置的形式，讓動畫看起來更直觀，可讀性強。
• 一個動畫文件可以被多個View使用，重用性強。
• 便於更換動畫。更換一個View的動畫只要更換load的xml文件就行，不需要修改其他代碼。

既然xml以配置的形式來定義動畫，那麼只要弄明白這些屬性的意義就能靈活實現自己需要的動畫了。

Animation的屬性

這四個子類獨有的屬性並不多，大部分都是繼承自父類Animation的。所以先看看Animation的屬性。

Animation的屬性	含義
android:detachWallpaper	針對Window的動畫屬性。當一個window在桌面上動畫時，是否讓桌面壁紙跟着動畫。默認是false
android:duration	動畫執行的時間
android:fillAfter	如果爲true，那麼動畫執行完就會定格在執行完的那個畫面,也就是動畫的最後一幀，不會恢復到原位。比如上面的旋轉轉完就回去了。
android:fillBefore	只有當android:fillEnabled設爲true時，這個值纔有效。否則就假定這個值爲true
android:fillEnabled	是否考慮android:fillBefore的值。只要爲true時，android:fillBefore的值纔會被考慮。 不過這個屬性跟上個屬性我咋設置都沒啥用，渣渣呀！誰能給個能出效果的例子。。。
android:interpolator	設置插值器，來控制動畫在不同時間段的速度。默認是加速減速插值器。
android:repeatCount	動畫重複的次數，所以總共會運行的動畫次數是這個重複次數+1；
android:repeatMode	動畫重複的方式，有兩個值，reverse 和 restart。reverse表示動畫會正反輪流執行；restart
android:startOffset	動畫延遲執行的時間，單位是毫秒
android:zAdjustment	可以取三個值，normal:0，top:1，bottom:-1。代表可以在動畫過程中調整z軸的順序，也就是顯示層次。0表示維持當前層次，1表示放在其他內容上面，-1表示放在其他內容下面。但是我渣還是沒實現過這個屬性，怎麼搞都沒用呀？

android:repeatMode

1. reverse

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="2"
    android:repeatMode="reverse"
    android:toDegrees="360" />

1. restart

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="2"
    android:repeatMode="restart"
    android:toDegrees="360" />

AlphaAnimation的獨有屬性

AlphaAnimation的獨有屬性	含義
android:fromAlpha	動畫開始時的透明度 從0.0-1.0 0.0表示完全透明，1.0表示完全不透明
android:toAlpha	動畫結束時的透明度

5秒從全透變成完全不透 從0-1；

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000">
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        />
</set>

ScaleAnimation獨有屬性

ScaleAnimation獨有屬性	含義
android:pivotX	float,縮放起點，或縮放原點的X軸座標。縮放圍繞這個點運行。 這個座標默認是View的左上角，（0，0）
android:pivotY	float,同上 Y軸座標. 在XML中的值有三種寫法：數值：50；百分數：50%；百分數p:50%p。如果是數值，表示以View的左上角爲(0,0)，然後加上寫的數值，以這個點作爲縮放中心。如果爲百分數，如50%，表示總左上角(0,0)加上自身高度的50%，作爲縮放點。如果是百分數p，如50%p,表示總左上角(0,0)加上父控件高度的50%，作爲縮放點。
android:fromXScale	float 動畫開始時，X軸上縮放的比例。1表示本身大小。
android:fromYScale	float 動畫開始時，Y軸上縮放的比例。1表示本身大小。
android:toXScale	float Y動畫結束時，X軸上縮放的比例。1表示本身大小。
android:toYScale	float Y動畫結束時，Y軸上縮放的比例。1表示本身大小。

從圖片的右下角開始縮放，寬高各從從原來的2倍縮放到原來的十分之一：

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <scale
        android:pivotX="100%"
        android:pivotY="100%"
        android:fromXScale="2"
        android:fromYScale="2"
        android:toXScale="0.1"
        android:toYScale="0.1"
        />
</set>

TranslateAnimation獨有屬性

TranslateAnimation獨有屬性	含義
android:fromXDelta	動畫開始時View左上角的X座標，也有三種寫法，同pivotX
android:fromYDelta	動畫開始時View左上角的Y座標，也有三種寫法，同pivotX
android:toXDelta	動畫結束時View左上角的X座標，也有三種寫法，同pivotX
android:toYDelta	動畫結束時View左上角的Y座標，也有三種寫法，同pivotXY

從自身的左上角移到自身的右下角：

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <translate
        android:fromXDelta="-100%"
        android:fromYDelta="-100%"
        android:toXDelta="100%"
        android:toYDelta="100%"
        />
</set>

RotateAnimation獨有屬性

RotateAnimation獨有屬性	含義
android:pivotX	旋轉動畫的中心的X座標，旋轉圍繞這個點進行，也有三種寫法，同pivotX
android:pivotY	旋轉動畫的中心的Y座標，旋轉圍繞這個點進行，也有三種寫法，同pivotX
android:fromDegrees	動畫開始時的旋轉角度。角度順時針轉增加，逆時針轉減少。所以根據開始角度和結束角度來判斷是順時針還是逆時針。360度爲一圈。
android:toDegrees	動畫結束時的旋轉角度。

從360度轉到-90度：

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <rotate
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromDegrees="360"
        android:toDegrees="-90"
        />
</set>

AnimationSet

AnimationSet代表動畫的集合，在XML文件中的標籤是<set>，前面已經出現過了。

影這個標籤可以把不同的動畫組合起來作用在同一個View上。

使用AndroidStudio時發現只有在<set>標籤裏面，才能自動提示出來Animation的屬性，在<alpha>等標籤裏只提示他自己獨有的那幾個屬性，不知道有沒有解決辦法。

例如要同時縮放旋轉，並改變透明度：

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <rotate
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromDegrees="360"
        android:toDegrees="-90"
        />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0.2"/>
</set>

還能用同一種動畫拼成一個連續動畫，只是這樣做好像有點low：

<set xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toYDelta="-100%"
        android:toXDelta="-100%"
        android:duration="2000" />
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="200%"
        android:duration="2000"
        android:startOffset="2000"/>
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toYDelta="200%"
        android:duration="2000"
        android:startOffset="4000"/>
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="-200%"
        android:duration="2000"
        android:startOffset="6000"/>
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100%"
        android:toYDelta="-100%"
        android:duration="2000"
        android:startOffset="8000"/>
</set>

android:shareInterpolator

AnimationSet也有個屬性android:shareInterpolator.值爲true或flase。表示集合中的動畫是佛共享同一個插值器。

插值器Interpolator

Interpolator繼承自TimeInterpolator，用來定義動畫在不同的時間有不同的速度。也叫插補器。

插值器可以通過在xml文件中用android:interpolator設置，也可以在java中通過animation.setInterpolator()來設置.

在java中設置可以傳一些參數，對插值器進行更詳細的設置，比較靈活。

插值器	XML中的值	作用
AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator	加速減速插值器 動畫先加速再減速
AccelerateInterpolator	@android:anim/accelerate_interpolator	加速插值器 動畫速度越來越快
DecelerateInterpolator	@android:anim/decelerate_interpolator	減速插值器 動畫速度越來越慢
BounceInterpolator	@android:anim/bounce_interpolator	回彈插值器 動畫結束會回彈幾下
CycleInterpolator	@android:anim/cycle_interpolator	圓插值器，動畫會重複幾次，動畫的速度沿着正弦曲線變化
LinearInterpolator	@android:anim/linear_interpolator	線性插值器 動畫速度保持勻速
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator	預期預期超調插值器。先往前甩一定的值，然後開始動畫，結束時往後甩一定的值，結束動畫。
AnticipateInterpolator	@android:anim/anticipate_interpolator	預期插值器，動畫開始時會往前甩一下
OvershootInterpolator	@android:anim/overshoot_interpolator	超調插值器 動畫結束時往後甩一下

下面以讓一個圖片順時針旋轉360度爲例，其他動畫都類似的作用：

AccelerateDecelerateInterpolator

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

AccelerateInterpolator

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/accelerate_interpolator">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

DecelerateInterpolator

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/decelerate_interpolator">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

BounceInterpolator

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/bounce_interpolator">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

CycleInterpolator

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/cycle_interpolator">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

LinearInterpolator

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/linear_interpolator">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

AnticipateOvershootInterpolator

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/anticipate_overshoot_interpolator">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

AnticipateInterpolator

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/anticipate_interpolator">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

OvershootInterpolator

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/overshoot_interpolator">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

對View動畫的監聽

Animation裏有一個AnimationListener類提供了對動畫開始，重複，和結束的監聽。

animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                Log.i(TAG, "動畫開始時做操作: ");
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Log.i(TAG, "動畫重複時做操作: ");
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                Log.i(TAG, "動畫結束時做操作: ");
            }
        });