淺析 - Android三種動畫

尊重每個人的付出，轉載請點這裏：http://blog.csdn.net/hanj456/article/details/52625351

Android中動畫基本分爲三種形式：

幀動畫（Frame Animation）
補間動畫（Tween Animation）
屬性動畫（Property Animation）

下面進入“三問三答”環節：

問：幀動畫，補間動畫和屬性動畫怎麼理解？
答：最簡單的方式是從字面上去理解：我們知道動畫剪輯是根據“幀”來算的，每一幀就是一張圖片，老式的膠片電影就是“幀動畫”，通過連續的滾動膠片使人產生錯覺，以爲是動畫，其實就是很多圖片連續運動達到的這種效果，Android中的幀動畫也是這個原理，要想使用幀動畫得準備好相應的圖片資源；再來看補間動畫，字面上的意思就是填補空缺的動畫，其實它就是這麼做的，指定一張圖片起始狀態和最後狀態的樣子，計算並顯示中間需要的樣子，這就是補間動畫，但要注意的是補間動畫僅僅是視覺上的改變，並沒有實質的改變屬性，舉個栗子就是控制一個button從屏幕左邊移動到右邊，此時點擊按鈕時沒有事件反饋的，因爲它其實還在左邊，只是視覺上在右邊而已，點擊左邊按鈕原來的位置處就能接收到點擊事件，這麼講你應該就明白了吧；最後一種動畫便是Android 3.0推出的屬性動畫，字面上就知道和屬性相關，這種動畫是通過改變圖片的屬性來達到動畫的效果，也就是補間動畫的那個栗子上如果使用的是屬性動畫結果就是button移動到右邊就會獲得點擊事件；

問：幀動畫，補間動畫和屬性動畫的區別是什麼？
答：明白了這三種動畫的含義理解它們的區別就不難了：首先劃分一下，幀動畫是一類，剩下兩者是一類，爲什麼這麼劃分呢？我是根據圖片的數量來劃分的，幀動畫需要一套連續的圖片才能完成動畫效果，後兩者一張圖片足以，這裏主要討論的是後兩者之間的區別。補間動畫它只能達到四種效果或這四種效果的隨機組合，這四種效果分別是：旋轉，縮放，平移，透明度改變，超出這四種效果的動畫是無法達到的，而屬性動畫則不受此限制，什麼效果基本都可以達到，比如3D旋轉，扭曲變化等，最本質的區別還是屬性改變的這點上；

問：幀動畫，補間動畫和屬性動畫這三種動畫怎麼使用？
答：下面我用幾個Demo分別演示如何實現Android這三種動畫，先看效果圖：

幀動畫

實現步驟：

Step1

準備圖片資源

Step2

新建 animation-list xml文件,將圖片按順序排列

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/girl_1"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_2"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_3"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_4"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_5"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_6"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_7"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_8"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_9"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_10"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_11"
        android:duration="200"/>

</animation-list>

Step3

activity佈局很簡單，兩個button和一個imageview，重點是imageview設置background爲新建的animation-list文件，我就不貼出來了，在activity裏面操作也很簡單：調用AnimationDrawable的start()和stop()方法就能實現對幀動畫的開始和停止，這裏沒有暫停的情況；

public class FrameActivity extends Activity {

    private AnimationDrawable mAd;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_frame);
        ImageView iv = (ImageView) findViewById(R.id.iv);
        mAd = (AnimationDrawable) iv.getBackground();
    }

    public void start(View v){
        mAd.start();
    }

    public void stop(View v){
        mAd.stop();
    }
}

下面是補間動畫的效果圖：

平移動畫

旋轉動畫

縮放動畫

透明度改變動畫

組合動畫

補間動畫實現步驟：

Step1

在 res 文件夾下創建 anim 文件夾，新建五個動畫xml文件，將動畫定義在xml中的好處是比較直觀，還可以複用；

<?xml version="1.0" encoding="utf-8"?>
<!-- 透明度改變動畫 -->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1"
    android:toAlpha="0.2"/>
<!-- 旋轉動畫 -->
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="90"
    android:pivotX="50%"
    android:pivotY="50%"/>

<!-- 縮放動畫 -->
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:fromXScale="1"
       android:fromYScale="1"
       android:pivotX="50%"
       android:pivotY="50%"
       android:toXScale="1.5"
       android:toYScale="1.5"/>

<!-- 平移動畫 -->
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
           android:fromXDelta="0"
           android:fromYDelta="0"
           android:toXDelta="200"
           android:toYDelta="300"/>

<!-- 組合動畫 -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0.2"/>
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="180"/>
    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="2"/>
    <translate
        android:fromXDelta="0"
        android:fromYDelta="100"
        android:toXDelta="200"
        android:toYDelta="500"/>
</set>

Step2

activity佈局文件中由5個button和一個imageview，比較簡單這裏就不寫了，直接上activity中的代碼

public class TweenActivity extends Activity {

    private ImageView mIv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tween);
        mIv = (ImageView) findViewById(R.id.iv_tween);
    }

    public void translate(View v){
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
        animation.setDuration(2000);//設置動畫時長
        animation.setFillAfter(true);//保存動畫後的效果
        mIv.startAnimation(animation);//開始動畫
    }

    public void scale(View v){
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
        animation.setDuration(2000);
        animation.setFillAfter(true);//保存動畫後的效果
        mIv.startAnimation(animation);
    }

    public void rotate(View v){
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
        animation.setDuration(2000);
        animation.setFillAfter(true);//保存動畫後的效果
        mIv.startAnimation(animation);
    }

    public void alpha(View v){
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
        animation.setDuration(2000);
        animation.setFillAfter(true);//保存動畫後的效果
        mIv.startAnimation(animation);
    }

    public void group(View v){
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.set);
        animation.setDuration(2000);
        animation.setFillAfter(true);//保存動畫後的效果
        mIv.startAnimation(animation);
    }
}

最後來講講屬性動畫，首先了解幾個常用的參數：

valueFrom：設置狀態或位置的起始值；

valueTo：設置狀態或位置的最終值；

ordering
1. sequentially ：設置動畫集合中的動畫按順序執行；
2. together ：設置動畫集合中的動畫同時執行；

propertyName
1. translationX和translationY: 設置View的相對位置移動；
2. rotation、rotationX和rotationY：設置View的旋轉；
3. scaleX和scaleY：設置View在X,Y軸上的縮放；
4. pivotX和pivotY：設置View的中心點位置；
5. x和y：設置View的絕對位置；
6. alpha：設置View的透明度；

valueType
1. intType：設置value值爲int類型；
2. floatType：設置value值爲float類型；
3. pathType：設置value值爲String類型，用於製作矢量圖的path；

關於幾個系統提供的插值器的動畫效果：

好了，先上一張利用屬性動畫實現的組合動畫效果圖，然後再進行步驟分解一一介紹：

實現步驟：

Step1

和部件動畫一樣，準備動畫xml，在res文件夾下創建animator文件夾，新建動畫集合文件group.xml;

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:ordering="together">
<!-- 旋轉動畫，Y軸爲軸心翻轉180度，重複次數50次，重複模式爲反向，這裏value樣式要設置爲float類型 -->
    <set>
        <objectAnimator
            android:propertyName="rotationX"
            android:repeatCount="50"
            android:repeatMode="reverse"/>
        <objectAnimator
            android:propertyName="rotationY"
            android:repeatCount="50"
            android:repeatMode="reverse"
            android:valueFrom="0"
            android:valueTo="180"
            android:valueType="floatType"/>
    </set>

    <!-- 縮放動畫 2倍-->
    <set>
        <objectAnimator
            android:propertyName="scaleX"
            android:valueFrom="1.0"
            android:valueTo="2.0">
        </objectAnimator>
        <objectAnimator
            android:propertyName="scaleY"
            android:valueFrom="1.0"
            android:valueTo="2.0">
        </objectAnimator>
    </set>

     <!-- 平移動畫 -->
    <set>
        <objectAnimator
            android:propertyName="translationX"
            android:valueFrom="0"
            android:valueTo="300"
            android:valueType="floatType"/>
        <objectAnimator
            android:propertyName="translationY"
            android:valueFrom="0"
            android:valueTo="500"
            android:valueType="floatType"/>
    </set>

 <!-- 透明度改變動畫 -->
    <set>
        <objectAnimator
            android:propertyName="alpha"
            android:valueFrom="0.3"
            android:valueTo="1.0"
            android:valueType="floatType"/>
    </set>
</set>

Step2

在activity中開啓動畫

public class PropertyActivity extends Activity {

    private ImageView mIv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_property);
        mIv = (ImageView) findViewById(R.id.iv_property);
    }

    public void propertyGroup(View v){
        AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.group);
        set.setTarget(mIv);//設置動畫對象
        set.setDuration(2000);//設置持續時間
        set.setInterpolator(new OvershootInterpolator());//設置插值器
        set.start();//開始動畫
    }
}

_walle

發佈了19 篇原創文章 · 獲贊 18 · 訪問量 5萬+

私信關注

淺析 - Android三種動畫

AI 畫圖真刺激，手把手教你如何用 ComfyUI 來畫出刺激的圖

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

數據展示動態（跑分）顯示

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

Android RxJava 詳解

淺析 - Activity啓動模式

淺析 - Android異步操作

淺析 - Android http GET/POST 請求

淺析 - Android ContentProvider用法示例

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結