Android視圖動畫-View Animation

視圖動畫主要有兩種：

1、Tween Animation譯爲「補間動畫」

一、scale譯爲「規模、比例」，是對View進行特定範圍的縮放 二、alpha經過改變View的透明度實現View隱現的效果 三、translate譯爲"轉移"，是對View進行位置的移動 四、rotate譯爲「旋轉」，是讓View圍繞特定的點進行旋轉 PS：全部View的移動、隱藏、旋轉僅僅是看到的動畫效果，實際View的位置/大小/比例並無發生本質上的改變（好比說View的位置經過動畫進行移動後你註冊的點擊事件仍是須要點擊到View的原始位置才能夠被觸發）。

2、Frame Animation譯爲逐幀動畫

這個比較容易理解就是將多個具備特定連貫動做的圖片在短期內進行快速的切換達到動畫的效果，本質上全部的動畫效果都是這種思想。

如何建立視圖動畫文件目錄

動畫文件要存放在res/anim文件夾下，訪問時採用R.anim.XXX的方式。默認是沒有這個文件夾的須要手動建立（右鍵res目錄-->New-->Android Resource Directory-->肯定。）

動畫文件的建立方式爲:右鍵 anim文件夾選擇new,而後點擊Animation Resource file，選擇動畫類型便可建立。

輸入後會自動提示動畫名稱，而後輸入名稱，肯定便可。

scale(縮放) 動畫

這個動畫參數相對來講比較多， 就我我的而言在學習這個動畫的時候花費時間是最長的。這個動畫主要是實現View的縮放，首先要想，要實現一個縮放的動畫首先要肯定什麼參數/信息(比如說想切割一張特定大小的紙張要肯定寬和高同樣)，那麼第一個就是要肯定要圍繞哪一個點(pivot)進行縮放。還須要知道在動畫開始(from)時View的大小(比例)，以及動畫結束(to)時View要處於的大小(比例)。就是要肯定如下六個參數才能夠完成一次縮放動畫。

X則指定控件的寬度，Y則指定控件的高度，值越大則控件所佔位置越大。Android座標從左上角開始算起。

其中fromXScale、toXScale、fromYScale、toYScale使用浮點類型，1.0表使原始大小，0.5則是縮放一半，1.5則是擴大原大小的一半。舉例：原View寬高100、150，1.0:(100,150),0.5:(50,75),1.5:(150,225)。也可使用精確值(DP/PX)。

pivotX、pivotY有三種表使方法，第一是採用像素值，第二則是較自身的百分比，第三則是較父View的百分比。

爲了方便觀察，使用兩個同等位置和大小不一樣顏色的View來進行觀察。動畫的播放代碼在最下文已給出。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <Button android:layout_width="match_parent" android:layout_height="wrap_content"
            android:text="播放動畫"
            android:id="@+id/btnOpenAnimation"
    />
    <TextView android:layout_width="300dp" android:layout_height="300dp"
              android:layout_centerInParent="true"
              android:layout_gravity="center"
              android:background="#03A9F4"/>
    <TextView android:layout_width="300dp" android:layout_height="300dp"
              android:layout_centerInParent="true"
              android:id="@+id/txtAnimation"
              android:layout_gravity="center"
              android:background="#FF00"/>
</RelativeLayout>
複製代碼

示例1：使用像素值肯定Pivot點

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:fromXScale="0.5"
       android:toXScale="1.0"
       android:duration="3000"
       android:fromYScale="0.5"
       android:toYScale="1.0"
       android:pivotX="200"
       android:pivotY="200">
</scale>
複製代碼

這裏咱們分別設置了pivotX和pivotY爲200(px)，這個是從View自己來算起的，View的左上角爲(0,0)點，而後X軸座標向右，Y則向下分別走200像素，最終獲得了箭頭指向的點(Pivot)，那麼開始點肯定了。再看其它參數，fromXScale指定的是在動畫開始時X座標也就是寬度的大小(這裏是按照比例計算的)，0.5則表明View原始寬度的一半，fromYScale則是高度了。既然是向特定的比例進行縮放，僅僅肯定開始的大小是不夠的，還要肯定在動畫播放到最後所要達到的大小，因此就有了toXScale和toYScale，這兩個則是指定在動畫播放完成後View所處的大小。這裏咱們是從View的0.5縮放到1.0，也就是從原始View的一半通過3秒(duration用來控制動畫時長，1000爲1秒。)後變成原始View的大小也就是1.0。

示例2：百分比Pivot 使用百分比肯定Pivot也很簡單，那麼Pivot的位置就是：以View的左上角即(0,0)點爲基礎加上View特定的寬高百分比。

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:fromXScale="0.0"
       android:toXScale="1.0"
       android:duration="5000"
       android:fromYScale="0.0"
       android:toYScale="1.0"
       android:pivotX="70%"
       android:pivotY="70%">
</scale>
複製代碼

示例3：父View百分比Pivot

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:fromXScale="0.0"
       android:toXScale="1.0"
       android:duration="5000"
       android:fromYScale="0.0"
       android:toYScale="1.0"
       android:pivotX="50%p"
       android:pivotY="50%p">
</scale>
複製代碼

這個計算和上邊那個實際上是同樣的，只是基於的點不一樣而已，上邊是基於自身來算起，那麼這個則是基於View的父佈局來計算的。那麼Pivot的位置就是:以View的左上角即(0,0)點爲基礎加上父View特定的寬高百分比。

alpha動畫

這個能夠說就很是簡單了，主要是實現顏色的過分效果，fromAlpha則是動畫開始的透明度,toAlpha則是在動畫最後顯示的透明度。0.0表明徹底透明1.0則是View的原色。

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
       android:fromAlpha="0.0"
       android:duration="3000"
       android:toAlpha="1.0">
</alpha>
複製代碼

rotate(旋轉) 動畫

首先要想完成旋轉要肯定那些參數？確定要肯定旋轉要圍繞的點也就是pivot，這個在scale動畫也用到了，用法都同樣，不在多說。這裏出現了名爲degrees也就是角度的概念，也就是以特定點(pivot)爲中心從多少度(fromDegrees)，旋轉到多少度(toDegrees)。如下示例是從0轉到360度，正好一圈。

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotY="50%"
        android:pivotX="50%"
        android:duration="3000"
>
</rotate>
複製代碼

translate(位移) 動畫

說白了就是移動View的位置，就是從一個點移動到另外一個點，最重要的就是肯定兩個點，那麼則須要肯定兩對X,Y座標了。如下參數的使用方式和在最上邊提到的pivot是同樣的均可以使用精確值和百分比。

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
           android:fromXDelta="10%"
           android:toXDelta="70%"
           android:fromYDelta="0%"
           android:toYDelta="70%"
           android:duration="3000">
</translate>
複製代碼

其中黑色線條框住的是View的原始位置，黃色框住的是View動畫開始時的位置，紫色線條則是整個View的70%的佔比，最後集中到的點就是View要移動到的最終的位置也就是結束點。

Set（集合動畫）

如何理解Set（集合動畫），其實很簡單，好比如今有一個需求，咱們既要旋轉又要有漸漸出現的效果，那麼就要使用set了，說白了就是將多個動畫組合起來。只要把上邊幾個都學會了，使用這個set簡直so easy。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="3000">
    <alpha
            android:fromAlpha="0.0"
            android:toAlpha="1.0"
    ></alpha>
    <rotate
            android:pivotX="50%"
            android:pivotY="50%"
            android:fromDegrees="0"
            android:toDegrees="180"
    ></rotate>
</set>
複製代碼

動態建立動畫

上邊所展現的都是經過xml文件寫的動畫，都是靜態寫好了的。那麼想要動態的建立動畫對象又該如何？其實很簡單，經過代碼的方式建立動畫它們的名稱和使用xml文件建立時名稱都是對應的，提供的構造函數也都是必備的參數值。

//建立Alpha動畫
var alpha = AlphaAnimation(0.0F, 1.0F)
alpha.duration = 3000
this.txtAnimation.startAnimation(alpha)
//建立Rotate動畫
var rotate = RotateAnimation(0F, 360F, Animation.RELATIVE_TO_SELF, 50F, Animation.RELATIVE_TO_SELF, 50F)
//建立Scale動畫
var scale = ScaleAnimation(0F, 1F, 0F, 1F, Animation.RELATIVE_TO_SELF, 50F, Animation.RELATIVE_TO_SELF, 50F)
//建立translate動畫
var translate = TranslateAnimation(
    Animation.RELATIVE_TO_SELF,
    10F,
    Animation.RELATIVE_TO_SELF,
    80F,
    Animation.RELATIVE_TO_SELF,
    0F,
    Animation.RELATIVE_TO_SELF,
    70F
)
//建立Set動畫
var set = AnimationSet(this, null)
set.duration = 3000
set.addAnimation(alpha)
set.addAnimation(rotate)
複製代碼

從Animation繼承的屬性

以上全部的動畫對象都是從Animation類繼承來的，全部有一些公共的屬性也會繼承過來。

動畫的播放

//加載動畫
this.btnOpenAnimation.setOnClickListener {
    var animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim)
    this.txtAnimation.startAnimation(animation)
}
複製代碼

Tween Animation（逐幀動畫）

這個是Drawable形式的動畫，存放在drawable文件夾中，使用animation-list節點來表示。圖片素材是提早準備好的。本身動手嘗試下立刻就會理解了。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:duration="100" android:drawable="@drawable/a001"></item>
    <item android:duration="100" android:drawable="@drawable/a002"></item>
    <item android:duration="100" android:drawable="@drawable/a003"></item>
    <item android:duration="100" android:drawable="@drawable/a004"></item>
    <item android:duration="100" android:drawable="@drawable/a005"></item>
    <item android:duration="100" android:drawable="@drawable/a006"></item>
    <item android:duration="100" android:drawable="@drawable/a007"></item>
    <item android:duration="100" android:drawable="@drawable/a008"></item>
    <item android:duration="100" android:drawable="@drawable/a009"></item>
    <item android:duration="100" android:drawable="@drawable/a010"></item>
    <item android:duration="100" android:drawable="@drawable/a011"></item>
    <item android:duration="100" android:drawable="@drawable/a012"></item>
    <item android:duration="100" android:drawable="@drawable/a013"></item>
    <item android:duration="100" android:drawable="@drawable/a014"></item>
    <item android:duration="100" android:drawable="@drawable/a015"></item>
    <item android:duration="100" android:drawable="@drawable/a016"></item>
    <item android:duration="100" android:drawable="@drawable/a017"></item>
    <item android:duration="100" android:drawable="@drawable/a018"></item>
</animation-list>
複製代碼

這裏咱們給一個TextView設置了background屬性。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <Button android:layout_width="match_parent" android:layout_height="wrap_content"
            android:text="播放動畫"
            android:id="@+id/btnOpenAnimation"
    />
    <TextView android:layout_width="300dp" android:layout_height="300dp"
              android:layout_centerInParent="true"
              android:id="@+id/txtAnimation"
              android:background="@drawable/anim_refresh"
              android:layout_gravity="center"
    />
</RelativeLayout>
複製代碼

具體調用

var animationDrawable = this.txtAnimation.background as AnimationDrawable
animationDrawable.start()
複製代碼

顯示效果