Android--Animation動畫的基本使用與介紹

阿新 • • 發佈：2019-02-10

一、Animation動畫的基本介紹

Animation，是一個可以實現Android UI介面動畫的效果，同時，Animation也提供了一系列的動畫效果，其中分別有：透明度動畫、收縮動畫、位移動畫、旋轉動畫。這些動畫效果絕大多數可以運用在控制元件中。

二、Animation動畫的型別

Android中Animation動畫的型別分為四部份型別組成：

1、Alpha——漸變透明度動畫效果

2、Scale——漸變收縮動畫效果

3、Translate——畫面位移動畫效果

4、Rotate——畫面旋轉動畫效果

三、Animation動畫的模式

Android中Animation動畫的模式分為兩種：

1、tweened animation(漸變動畫),其中分別是Alpha和Scale

2、frame by frame(畫面轉換動畫)，其中分別是Translate和Rotate

四、Animation動畫的兩種格式

1、xml檔案中定義動畫

2、JavaCode中定義動畫

說到Animition動畫的兩種格式，無非就是寫法了，在日常開發中，一般寫法有xml定義動畫和Javacode定義動畫，但是大多數人可能比較喜歡xml定義，因為xml定義動畫整理起來比較方便和規範，而用Javacode編寫雖然也能實現和xml定義動畫一模一樣的效果，但是用JavaCode去定義動畫只能增加程式碼的複雜性。在本文中，我們暫時先介紹xml定義動畫的基本使用，有關javacode定義動畫的使用，下次有時間再給大家講解一下。

五、如何在xml檔案中定義動畫

步驟如下

1、新建Android專案

2、在res目錄中新建anim資料夾

3、在anim資料夾中新建一個my_animation.xml檔案

4、在my_animation.xml檔案中編寫動畫程式碼

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

六、Aimation動畫的解析--XML

1、alpha--漸變透明度動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="2000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"></alpha>
    <!--
        alpha透明度漸變動畫效果

        浮點數值:
        fromAlpha:屬性為動畫開始時的透明度
        toAlpha:屬性為動畫結束時的透明度
        說明：
        0.0表示完全透明
        1.0表示完全不透明
        以上可以取值為0.0-1.0之間float型別的數字

        長整數值：
        duration:屬性為動畫的持續時間
    -->
</set>

在這裡，我設定的是fromAlpha0.0到toAlpha1.0，由此可見透明動畫從開始的完全透明轉為結束時的完全不透明。

2、scale--漸變收縮動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2000"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
    <!--
       scale尺寸收縮動畫效果
       
       浮點數值:
       fromXScale:屬性為動畫起始時 X座標上的伸縮尺寸
       toXScale:屬性為動畫結束時 X座標上的伸縮尺寸
       fromYScale:屬性為動畫起始時 Y座標上的伸縮尺寸
       toXScale:屬性為動畫結束時 Y座標上的伸縮尺寸

       說明：
       0.0表示收縮到沒有
       1.0表示正常無伸縮
       值小於1.0表示收縮
       值大於1.0表示放大

        pivotX     屬性為動畫相對於物件的X座標的開始位置
        pivotY     屬性為動畫相對於物件的Y座標的開始位置

       長整數值：
       duration:屬性為動畫的持續時間,時間是以毫秒為單位，即1000毫秒等於1秒
   -->

</set>

我這裡設定了fromXScale起點座標x為0.0和fromYScale起點座標y為0.0，也就是說首先動畫是從收縮到沒有的，看不見的一個狀態。然後我再通過設定了toXScale1.0結束時x座標和toYScale1.0結束時y座標，也就是說最終結束時候x座標和y座標分別放大了從原來的沒有到有而已。那如果我想方法到原來圖片的2倍怎麼辦呢？其實很容易，只要修改toXScale和toYScale各自為2.0就可以了。

3、translate--畫面位移動畫

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

    <!--
      translate畫面位移動畫效果

       浮點數值:
       fromXDelta:屬性為動畫開始時，x座標上的位置
       toXDelta:屬性為動畫結束時，x座標上的位置
       fromYDelta:屬性為動畫開始時，y座標上的位置
       toYDelta:屬性為動畫結束時，y座標上的位置

       長整數值：
       duration:屬性為動畫的持續時間,時間是以毫秒為單位，即1000毫秒等於1秒
   -->
</set>

由此可見，toXDelta等於500表示向右平移500px，而toYDelta等於-350，表示向上平移350px。整體平移動畫效果看起來就是從原始位置慢慢平移到右上角位置。

4、rotate--畫面旋轉動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+360">
    </rotate>
    <!--
     rotate畫面旋轉動畫效果

     浮點數值:
     fromDegrees:屬性為動畫起始時物件的角度
     toDegrees:屬性為動畫結束時物件的角度，在這裡我設定了+360，表示根據物件旋轉了一圈
    
     說明：
     當角度為正數表示順時針旋轉
     當角度為負數表示逆時針旋轉

      pivotX     屬性為動畫相對於物件的X座標的開始位置
      pivotY     屬性為動畫相對於物件的Y座標的開始位置
        
     長整數值：
     duration:屬性為動畫的持續時間,時間是以毫秒為單位，即1000毫秒等於1秒
 -->

</set>

由於我這裡設定了formDegress為0表示物件開始旋轉角度為0，toDegress為+360表示物件結束時旋轉角度為360度，結合起來也就是說從一個0角度的物件旋轉到360一圈後的物件。

七、如何在Java程式碼中載入我們解析好的xml動畫檔案

1、建立動畫載入構造器

//第一個引數Context為程式的上下文    
//第二個引數id為動畫XML檔案的引用
//例子：
myAnimation= AnimationUtils.loadAnimation(this,R.anim.my_anim);
//使用AnimationUtils類的靜態方法loadAnimation()來載入XML中的動畫XML檔案

具體程式碼如下：

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private Animation myAnimation;
    private Button bt_alpha;
    private Button bt_scale;
    private Button bt_translate;
    private Button bt_rotate;
    private ImageView animation_iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        bt_alpha= (Button) this.findViewById(R.id.bt_alpha);
        bt_scale= (Button) this.findViewById(R.id.bt_scale);
        bt_translate= (Button) this.findViewById(R.id.bt_translate);
        bt_rotate= (Button) this.findViewById(R.id.bt_rotate);
        animation_iv= (ImageView) this.findViewById(R.id.animation_iv);
        bt_alpha.setOnClickListener(this);
        bt_scale.setOnClickListener(this);
        bt_translate.setOnClickListener(this);
        bt_rotate.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.bt_alpha:
                //載入透明度動畫並且通過圖片控制元件去啟動動畫
                myAnimation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.alpha_animation);
                animation_iv.startAnimation(myAnimation);
                break;
            case R.id.bt_scale:
                //載入收縮動畫並且通過圖片控制元件去啟動動畫
                myAnimation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.scale);
                animation_iv.startAnimation(myAnimation);
                break;
            case R.id.bt_translate:
                //載入位移動畫並且通過圖片控制元件去啟動動畫
                myAnimation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.translate);
                //setFillAfter(true)表示執行位移動畫結束後，控制元件將停留在執行結束的狀態
                myAnimation.setFillAfter(true);
                animation_iv.startAnimation(myAnimation);
                break;
            case R.id.bt_rotate:
                //載入旋轉動畫並且通過圖片控制元件去啟動動畫
                myAnimation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.rotate);
                animation_iv.startAnimation(myAnimation);
                break;
        }
    }
}

在這裡我分別建立了四個按鈕點選事件去載入4個不同的動畫效果。

activity_main佈局檔案如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF"
    tools:context="com.soft0754.animation.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/bt_alpha"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="透明動畫" />

        <Button
            android:id="@+id/bt_scale"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="收縮動畫" />

        <Button
            android:id="@+id/bt_translate"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="位移動畫" />

        <Button
            android:id="@+id/bt_rotate"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="旋轉動畫" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <ImageView
            android:id="@+id/animation_iv"
            android:src="@drawable/pc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

佈局檔案中沒什麼的就是隻有4個按鈕和我們一張要展示的動畫圖片物件，好了下面我們一起看看執行後的效果圖。

八、Animation其他常用的方法

1、setFillAfter(boolean fillAfter)

如果fillAfter的值為true，則表示動畫執行後，控制元件停留在執行結束時候的狀態。

2、setFillBefore(boolean fillBefore)

如果fillAfter的值為true，則表示動畫執行後，控制元件將回到動畫執行之前的狀態。

3、 setStartOffset(long startOffset)

設定動畫執行之前的等待時間。

4、setRepeatCount(int repeatCount)

設定動畫的重複播放次數。

5、setRepeatMode(int repeatMode)

設定動畫的重複播放的模式,在這裡分別有兩種模式，一種是RESTART表示重新開始重複執行,另一種是REVERSE表示反向執行。

不過這裡需要注意的是：重複播放次數必須和重複播放模式加在一起才能起到作用。

當然了，這些常用方法你也可以定義在xml檔案中，例如我在xml定義一個旋轉動畫為360度，重複2次並且播放模式為重新開始的物件：

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

效果如下：

九、Animation--list逐幀動畫的基本介紹
一說起Animationlist增動畫的實現，現在越來越多手機App在啟動頁面中都有一個載入動畫效果，類似於美團，餓了麼等等，動畫效果非常好看，而這個載入動畫效果可以採用Animation-list逐幀動畫去實現，那麼如何實現呢，現在讓我們來一起學習吧！

首先我們先看看效果圖：

大家有沒有發現，所謂逐幀動畫就是一張張圖片合併在一起，讓他實現動態旋轉的這樣一個過程，我這裡分別準備了12張圖片資源，如下圖：

其實這12張我是從網上下載1張過來的而已，也就是上圖中的第一張是原圖的，然後我通過ps去旋轉它，由於旋轉了1圈，我這裡12張圖片資源，所以每張圖片我通過ps轉換的角度就是30度。當然了，以後如果需要逐幀動畫最好的讓公司美工妹子給你準備吧，細心的你其實應該發現了圖片旋轉的時候看起來不是效果很好，哈哈，其實是的，那可能是因為圖片在ps處理旋轉後儲存的中心點定位不準的原因。所以我們看起來效果並不是很好。下面讓我們一起來看看逐幀動畫是如何實現的。

十、Animation--list逐幀動畫的基本實現

1、準備好圖片資源，這裡我採用的是12張圖片

2、在res-drawable目錄下新建my_list.xml檔案,

這裡需要注意的是Animation--list逐幀動畫資源是放在drawable目錄下的，而不是anim目錄下的。

3、在my_list.xml檔案裡面編寫逐幀動畫程式碼,程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <!--其中oneshot代表著是否只展示一遍，設定為false會不停的迴圈播放動畫
        drawable表示每一個逐幀動畫的圖片資源，我這裡採用一共有12幀
        duration表示每一幀執行的時間
    -->
    <item
        android:drawable="@drawable/list_1"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_2"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_3"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_4"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_5"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_6"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_7"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_8"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_9"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_10"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_11"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_12"
        android:duration="50">
    </item>
</animation-list>

這裡逐幀動畫xml程式碼已經定義好了，下面讓我們一起來看看怎麼去啟動或者停止我們這個定義好的my_list.xml逐幀動畫。

4、啟動或停止逐幀動畫

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private Button bt_list;
    private AnimationDrawable animationDrawable;
    private ImageView animation_iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }


    private void initView() {
        bt_list= (Button) this.findViewById(R.id.bt_list);
        animation_iv= (ImageView) this.findViewById(R.id.animation_iv);
        bt_list.setOnClickListener(this);

        //設定圖片控制元件一開始應用的是我們的逐幀動畫資源
        animation_iv.setImageResource(R.drawable.my_list);
        //給逐幀動畫資源賦值
        animationDrawable = (AnimationDrawable) animation_iv.getDrawable();
        //先設定動畫一開始進來是停止的，這裡預設是啟動的
        animationDrawable.stop();
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){           
            case R.id.bt_list:
                //判斷是否逐幀動畫是否正在執行，如果正在執行的話我們點選按鈕時候讓它停止，否則啟動逐幀動畫
                if (animationDrawable.isRunning()) {
                    animationDrawable.stop();
                }else {
                    animationDrawable.start(); //啟動逐幀動畫
                }
                break;
        }
    }
}

有關於Android中的動畫其實還有很多，由於時間關係未能給大家一一講解，其他動畫當中例如還有集合動畫，拋物線動畫等等，以後有機會的話再給大家講解，此致！此文章到此結束！希望對大家在日常開發當中有所幫助！

Android--Animation動畫的基本使用與介紹

Android--Animation動畫的基本使用與介紹

android animation——動畫的基本屬性

Android Animation、ObjectAnimator與ValueAnimator實現檢視動畫和屬性動畫

android.animation(5) - PropertyValuesHolder與Keyframe(轉)

Android Animation動畫控制動畫的執行效果，速度等

android Animation動畫平移之後不響應點選事件

Android Animation動畫原理原始碼分析

Android Animation動畫詳解（二）：組合動畫特效

[Android]Android四大基本元件介紹與生命週期

Android四大基本元件介紹與生命週期

android中Animation動畫的連續播放與播放完畢後停留在最後的狀態

Android進階——屬性動畫Property Animation詳解與應用(二)

Android屬性動畫完全解析(上)，初識屬性動畫的基本用法

Android 屬性動畫（Property Animation）全然解析（上）

Core Animation 動畫效果介紹

Android動畫框架之檢視動畫基本使用

Animation動畫——ObjectAnimator基本使用

Animation 動畫介紹和實現

android基礎--API動畫學習與擴充套件

Lottie Android 動畫製作與使用

Android--Animation動畫的基本使用與介紹

相關推薦