Android動畫學習之Tween Animation

這篇文章裡，我們來學習一下Tween Animation(補間動畫)的使用。補間動畫雖然是Android中較古老的一種動畫系統，不過對于一般的需求已經足夠使用了，是以熟練掌握它是很有必要的。Tween Animation主要有以下四種：

Alpha:透明度漸變效果
Rotate:旋轉效果
Translate:位移效果
Scale:縮放效果

Tween Animation可以使用xml或者代碼兩種形式來實作，接下來我們就一一舉例來說明這幾種效果。

AlphaAnimation

xml

這個例子裡我們來實作使用xml動畫形式将ImageView的透明度從0變到1，而後再用java代碼的形式将其從1變到0，首先是xml的編寫，Tween動畫的位置位于res目錄下的anim中，建立anim_alpha：

<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:duration="1000"
    android:repeatCount="0"
    android:repeatMode="reverse"
    android:fillAfter="true"/>

先解釋下出現的幾個屬性：

interpolator:插值器，修飾動畫變化速度，有accelerated(加速)、decelerated(減速)、repeated(重複)、bounced(彈跳)等。

duration:動畫持續時間

repeatCount:動畫執行一次後重複執行的次數，0為不重複執行

repeatMode:兩種，reverse執行模式為from -> to -> from 重複執行，restart為from -> to 重新變為from -> 重複此過程

fillAfter:動畫執行結束後是否停留在目前狀态，true為結束後停留在目前狀态

fromAlpha:alpha動畫的特有屬性，表示動畫起始透明度，接受float類型

toAlpha:alpha動畫的特有屬性，表示動畫結束透明度，接受float類型

使用編寫好的xml也很簡單，代碼中調用：

animation = AnimationUtils.loadAnimation(this,R.anim.anim_alpha);
ivTest.startAnimation(animation);

這樣，我們就使用xml完成了一個透明度動畫，該動畫不重複執行，會使控件在1S内透明度從1變到0也就是消失，并在動畫結束後保持這個狀态。

Java

接下來我們使用Java代碼來完成透明度動畫，使剛剛消失的View重新顯示出來，代碼很簡單：

animation = new AlphaAnimation(f,f);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration();
animation.setRepeatCount();
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

可以看到我們在xml中配置的屬性都可以在代碼中進行設定，這裡就不多做贅述

下面是動畫效果：

Android動畫學習之Tween Animation

RotateAnimation

xml

廢話不多說，直接上代碼:

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="3000"
    android:fillAfter="true"
    android:repeatCount="2"
    android:repeatMode="restart"
    />

通用屬性上面已經有講過了，沒什麼好說的，這裡需要注意：

fromDegress:旋轉起始角度

toDegress:旋轉結束角度

pivotX:旋轉中心點X軸坐标，如果加了%号代表相對于自身寬度的位置，比如50%就是指自身X軸的中心點

pivotY:旋轉中心點Y軸坐标，如果加了%号代表相對于自身寬度的位置，比如50%就是指自身Y軸的中心點

這四個屬性是RotateAnimation的獨有屬性，xml寫好之後一樣代碼中調用：

animation = AnimationUtils.loadAnimation(this,R.anim.anim_rotate);
ivTest.startAnimation(animation);

此動畫的效果是以view中心為圓點3S内逆時針旋轉360度，重複3次

Java

RotateAnimation的構造方法會有些多，寫法是這樣的：

animation = new RotateAnimation(,,
    Animation.RELATIVE_TO_SELF,f,Animation.RELATIVE_TO_SELF,f);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration();
animation.setRepeatCount();
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

需要注意的是這個構造方法，我們檢視源碼可以看到

public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
            int pivotYType, float pivotYValue){}

其中fromProgress與toProgress分别是起始角度和結束角度，pivotXType是X軸位置參照物，分别是：

RELATIVE_TO_SELF：相對于控件自身；
RELATIVE_TO_PARENT：相對于父控件；
ABSOLUTE：絕對坐标；

pivotXValue和pivotYValue分别是x、y軸坐标，當type是RELATIVE_TO_SELF時，取值為0~1f，當type為RELATIVE_TO_PARENT和ABSOLUTE時，value使用像素值px

這個動畫的效果是逆時針旋轉一圈再順時針旋轉一圈再逆時針旋轉一圈(注意repeatMode為REVERSE)

下面是動畫效果：

Android動畫學習之Tween Animation

TranslateAnimation

xml

還是直接上代碼：

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:fromYDelta="0%"
    android:toYDelta="50%"
    android:duration="3000"
    android:fillAfter="true"
    android:repeatCount="1"
    android:repeatMode="reverse"
    />

這裡的特有屬性是:

fromXDelta:動畫開始時X軸位置，帶%号則是相對本身，不帶%号則為像素值

toXDelta:動畫結束時X軸位置，帶%号則是相對本身，不帶%号則為像素值

fromYDelta:動畫開始時Y軸位置，帶%号則是相對本身，不帶%号則為像素值

toYDelta:動畫結束時Y軸位置，帶%号則是相對本身，不帶%号則為像素值

代碼調用動畫：

animation = AnimationUtils.loadAnimation(this,R.anim.anim_translate);
ivTest.startAnimation(animation);

此動畫效果是橫向向右平移一個View的寬度，同時向下平移0.5View的高度

Java

TranslateAnimation在代碼中的使用方法是：

animation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,,
Animation.RELATIVE_TO_SELF,-f,Animation.RELATIVE_TO_SELF,,Animation.RELATIVE_TO_SELF,-f);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration();
animation.setRepeatCount();
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

這裡用到的構造方法是

public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue) {}

4個int類型的分别是參照物，同上RotateAnimation，另外四個就是xml中使用的四個屬性。

這個動畫效果和上面xml的剛好相反

慣例，動畫效果如下：

Android動畫學習之Tween Animation

ScaleAnimation

xml

xml的寫法：

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXScale="100%"
    android:toXScale="20%"
    android:fromYScale="100%"
    android:toYScale="20%"
    android:pivotX="100%"
    android:pivotY="100%"
    android:duration="500"
    android:fillAfter="true"
    android:repeatCount="1"
    android:repeatMode="reverse"
    />

ScaleAnimation的特有屬性是:

fromXScale:X軸起始縮放比例，0~1

toXScale:X軸結束縮放比例，0~1

fromYScale:Y軸起始縮放比例，0~1

toYScale:Y軸結束縮放比例，0~1

pivotX:動畫X軸起始位置，帶%号相對于自身，其餘為像素值

pivotY:動畫Y軸起始位置，帶%号相對于自身，其餘為像素值

代碼調用：

animation = AnimationUtils.loadAnimation(this,R.anim.anim_scale);
ivTest.startAnimation(animation);

此動畫效果是橫向向右下縮放至原View的20%

Java

代碼中使用ScaleAnimation的方式是：

animation = new ScaleAnimation(f,f,f,f,
Animation.RELATIVE_TO_SELF,,Animation.RELATIVE_TO_SELF,);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration();
animation.setRepeatCount();
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

這次的構造方法就不用細說了，跟上面兩個類似

動畫效果是這樣的：

Android動畫學習之Tween Animation

AnimationSet

這裡再講一個動畫集合的使用

xml

AnimationSet的xml檔案同樣存放在res/anim下，它可以允許放置多個動畫效果，按順序執行，xml代碼如下：

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

使用xml依然是

animation = AnimationUtils.loadAnimation(this,R.anim.anim_set);
ivTest2.startAnimation(animation);

需要注意的是xml中\可以嵌套\

Java

代碼：

//顯示動畫
AlphaAnimation alphaAnimation = new AlphaAnimation(f,f);
...

//旋轉動畫
RotateAnimation rotateAnimation = new RotateAnimation(,,Animation.RELATIVE_TO_SELF,f,Animation.RELATIVE_TO_SELF,f);
...

//平移動畫
TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,,Animation.RELATIVE_TO_SELF,-f,
                                                               Animation.RELATIVE_TO_SELF,,Animation.RELATIVE_TO_SELF,-f);
...

//拉伸動畫
ScaleAnimation scaleAnimation = new ScaleAnimation(f,f,f,f,
Animation.RELATIVE_TO_SELF,,Animation.RELATIVE_TO_SELF,);
...

//AnimationSet
AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(alphaAnimation);
ivTest2.startAnimation(animationSet);

效果如下

Android動畫學習之Tween Animation

結語

到這裡我們就算是吧Tween動畫的四種動畫效果寫完了，還熟悉了AnimationSet的使用，demo已經上傳至github，位址在：github，歡迎指教~

ps:打個廣告，我的個人部落格，目前還處于陸續施工狀态，歡迎通路~

Android動畫學習之Tween Animation

AlphaAnimation

xml

Java

RotateAnimation

xml

Java

TranslateAnimation

xml

Java

ScaleAnimation

xml

Java

AnimationSet

xml

Java

結語

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯