逐幀動畫和補間動畫的使用（一）

時間 2019-11-21

標籤動畫使用简体版

原文原文鏈接

逐幀動畫和補間動畫的使用（一）

1.什麼叫作動畫？android

動畫有三種：逐幀動畫，補間動畫，屬性動畫。至於屬性動畫咱們下節在講ide

同一個圖形經過視圖在界面上進行透明度，縮放，旋轉，平移變換（補間動畫）
在界面上同一個位置不斷的切換顯示不一樣的圖片，相似於動畫片的工做原理（逐幀動畫）

2.動畫的分類

View Animation
Drawable Animation
ValueAnimator（咱們下節重點來說）

3.Android中提供了兩種實現動畫的方式

•純編碼的方式
•Xml配置的方式

4.直接上案例：佈局

4.1補間動畫：測試

Activity的佈局文件：動畫

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

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

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeScale"
            android:text="Code Scale" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlScale"
            android:text="Xml Scale" />
    </LinearLayout>

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

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeRotate"
            android:text="Code Rotate" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlRotate"
            android:text="Xml Rotate" />
    </LinearLayout>

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

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeAlpha"
            android:text="Code Alpha" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlAlpha"
            android:text="Xml Alpha" />
    </LinearLayout>

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

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeTranslate"
            android:text="Code Translation" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlTranslate"
            android:text="Xml Translation" />
    </LinearLayout>

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

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startCodeAnimationSet"
            android:text="Code AnimationSet" 
            android:textSize="15sp"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="startXmlAnimationSet"
            android:text="Xml AnimationSet" 
            android:textSize="15sp"/>
    </LinearLayout>
    
    <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:onClick="testAnimationListener"
            android:text="Test Animation Listener"/>

    <ImageView
        android:id="@+id/iv_animation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fly"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:id="@+id/tv_animation_msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="顯示動畫描述信息" 
        android:textSize="18dp"/>
</LinearLayout>

動畫文件：this

主Activity:編碼

/**
 * Created by quguangle on 2016/12/1.
 */
/*
 * 編碼實現View Animation
 * 	1. Code方式
 *  2. Xml方式
 */
public class VAActivity extends Activity {

    private ImageView iv_animation;
    private TextView tv_animation_msg;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation_va);

        iv_animation = (ImageView) findViewById(R.id.iv_animation);
        tv_animation_msg = (TextView) findViewById(R.id.tv_animation_msg);
    }

    /*
     * 1.1  編碼實現: 縮放動畫
     * ScaleAnimation
     */
	/*
	 	//1. 建立動畫對象
		//2. 設置
		//3. 啓動動畫
	 */
    public void startCodeScale(View v) {
        tv_animation_msg.setText("Code縮放動畫: 寬度從0.5到1.5, 高度從0.0到1.0, 縮放的圓心爲頂部中心點,延遲1s開始,持續2s,最終還原");
        //1. 建立動畫對象
        ScaleAnimation animation = new ScaleAnimation(0.5f, 1.5f, 0, 1,
                Animation.ABSOLUTE, iv_animation.getWidth()/2, Animation.ABSOLUTE, 0);
        animation = new ScaleAnimation(0.5f, 1.5f, 0, 1,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0);
        //2. 設置
        //延遲1s開始
        animation.setStartOffset(1000);
        //持續2s
        animation.setDuration(2000);
        //最終還原
        animation.setFillBefore(true);
        //3. 啓動動畫
        iv_animation.startAnimation(animation);
    }

    /*
     * 1.2 xml實現: 縮放動畫
     * <scale>
     */
	/*
	 1. 定義動畫文件
	 2. 加載動畫文件獲得動畫對象
	 3. 啓動動畫
	 */
    public void startXmlScale(View v) {
        tv_animation_msg.setText("Xml縮放動畫: Xml縮放動畫: 寬度從0.0到1.5, 高度從0.0到1.0, 延遲1s開始,持續3s,圓心爲右下角, 最終固定");

        //1. 定義動畫文件
        //2. 加載動畫文件獲得動畫對象
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_test);
        //3. 啓動動畫
        iv_animation.startAnimation(animation);
    }

    /*
     * 2.1 編碼實現: 旋轉動畫
     * RotateAnimation
     */
    public void startCodeRotate(View v) {
        tv_animation_msg.setText("Code旋轉動畫: 以圖片中心點爲中心, 從負90度到正90度, 持續5s");
        //1. 建立動畫對象
        RotateAnimation animation = new RotateAnimation(-90, 90, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        //2. 設置
        animation.setDuration(5000);
        //3. 啓動動畫
        iv_animation.startAnimation(animation);
    }

    /*
     * 2.2 xml實現: 旋轉動畫
     * <rotate>
     */
    public void startXmlRotate(View v) {
        tv_animation_msg.setText("Xml旋轉動畫: 以左頂點爲座標, 從正90度到負90度, 持續5s");
        //1. 定義動畫文件
        //2. 加載動畫文件獲得動畫對象
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_test);
        //3. 啓動動畫
        iv_animation.startAnimation(animation);
    }

    /*
     * 3.1 編碼實現: 透明度動畫
     * 徹底透明 : 0
     * 徹底不透明 : 1
     * AlphaAnimation
     */
    public void startCodeAlpha(View v) {
        tv_animation_msg.setText("Code透明度動畫: 從徹底透明到徹底不透明, 持續2s");
        //1. 建立動畫對象
        AlphaAnimation animation = new AlphaAnimation(0, 1);
        // 2. 設置
        animation.setDuration(4000);
        // 3. 啓動動畫
        iv_animation.startAnimation(animation);
    }

    /*
     * 3.2 xml實現: 透明度動畫
     * <alpha>
     */
    public void startXmlAlpha(View v) {
        tv_animation_msg.setText("Xml透明度動畫: 從徹底不透明到徹底透明, 持續4s");
        //1. 定義動畫文件
        //2. 加載動畫文件獲得動畫對象
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_test);
        animation.setFillAfter(true);
        //3. 啓動動畫
        iv_animation.startAnimation(animation);
    }


    /*
     * 4.1 編碼實現: 平移動畫
     * TranslateAnimation
     */
    public void startCodeTranslate(View v) {
        tv_animation_msg.setText("Code移動動畫: 向右移動一個本身的寬度, 向下移動一個本身的高度, 持續2s");
        //1. 建立動畫對象
        TranslateAnimation animation = new TranslateAnimation(Animation.ABSOLUTE, 0, Animation.RELATIVE_TO_SELF, 1, Animation.ABSOLUTE, 0, Animation.RELATIVE_TO_SELF, 1);
        //2. 設置
        animation.setDuration(2000);
        //3. 啓動動畫
        iv_animation.startAnimation(animation);
    }

    /*
     * 4.2 xml實現: 平移動畫
     * <translate>
     */
    public void startXmlTranslate(View v) {
        tv_animation_msg.setText("xml移動動畫: 從屏幕的右邊逐漸回到原來的位置, 持續2s"); //***此效果用於界面切換的動畫效果
        //1. 定義動畫文件
        //2. 加載動畫文件獲得動畫對象
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_test);
        //3. 啓動動畫
        iv_animation.startAnimation(animation);
    }

    /*
     * 5.1 編碼實現: 複合動畫
     * AnimationSet
     */
    public void startCodeAnimationSet(View v) {
        tv_animation_msg.setText("Code複合動畫: 透明度從透明到不透明, 持續2s, 接着進行旋轉360度的動畫, 持續1s");
        //1. 建立透明動畫並設置
        AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
        alphaAnimation.setDuration(2000);
        //2. 建立旋轉動畫並設置
        RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(1000);
        rotateAnimation.setStartOffset(2000);//延遲
        //3. 建立複合動畫對象
        AnimationSet animationSet = new AnimationSet(true);
        //4. 添加兩個動畫
        animationSet.addAnimation(alphaAnimation);
        animationSet.addAnimation(rotateAnimation);
        //5. 啓動複合動畫對象
        iv_animation.startAnimation(animationSet);
    }

    /*
     * 5.2  xml實現: 複合動畫
     * <set>
     */
    public void startXmlAnimationSet(View v) {
        tv_animation_msg.setText("Xml複合動畫: 透明度從透明到不透明, 持續2s, 接着進行旋轉360度的動畫, 持續2s");
        //1. 定義動畫文件
        //2. 加載動畫文件獲得動畫對象
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.set_test);
        //3. 啓動動畫
        iv_animation.startAnimation(animation);
    }

    /*
     * 6. 測試動畫監聽
     */
    public void testAnimationListener(View v) {
        tv_animation_msg.setText("測試動畫監聽");
        //tv_animation_msg.setText("Xml旋轉動畫: 以左頂點爲座標, 從正90度到負90度, 持續5s");
        //1. 定義動畫文件
        //2. 加載動畫文件獲得動畫對象
        Animation animation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        animation.setDuration(1000);
        //設置線性變化
        animation.setInterpolator(new LinearInterpolator());
        //設置動畫重複次數
        animation.setRepeatCount(Animation.INFINITE);//重複3次
        //設置動畫監聽
        animation.setAnimationListener(new Animation.AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {
                Log.e("TAG", "動畫開始");
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                Log.e("TAG", "動畫重複");

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Log.e("TAG", "動畫結束");
            }
        });

        //3. 啓動動畫
        iv_animation.startAnimation(animation);

    }
}

運行效果如圖以下：spa

4.2逐幀動畫.net

Activity的佈局文件：code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/iv_da_mm"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="160dp"
        android:background="@drawable/drawable_animation_test"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true" >

        <Button
            android:id="@+id/btn_da_start"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="啓動動畫" />
        
        <Button
            android:id="@+id/btn_da_stop"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="結束動畫" />
    </LinearLayout>

</RelativeLayout>

動畫文件：

drawable_animation_test.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
    android:oneshot="false">

    <item
        android:drawable="@drawable/nv1"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv2"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv3"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv4"
        android:duration="500">
    </item>

</animation-list>

主Activity:

/**
 * 測試: Drawable Animation
 * Created by quguangle on 2016/12/1.
 */

public class DAActivity extends Activity implements View.OnClickListener {

    private ImageView iv_da_mm;
    private Button btn_da_start;
    private Button btn_da_stop;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation_da);
        iv_da_mm = (ImageView) findViewById(R.id.iv_da_mm);
        btn_da_start = (Button) findViewById(R.id.btn_da_start);
        btn_da_stop = (Button) findViewById(R.id.btn_da_stop);

        btn_da_start.setOnClickListener(this);
        btn_da_stop.setOnClickListener(this);
    }

    private AnimationDrawable animationDrawable;
    @Override
    public void onClick(View v) {
        if (v == btn_da_start) {
            if(animationDrawable==null) {
                //獲得背景動畫圖片對象
                animationDrawable = (AnimationDrawable) iv_da_mm.getBackground();
                //啓動
                animationDrawable.start();
            }

        } else if (v == btn_da_stop) {
            if(animationDrawable!=null) {
                animationDrawable.stop();
                animationDrawable = null;
            }
        }
    }
}

運行效果以下：

5.View Animation

單一動畫(Animation)

縮放動畫(ScaleAnimation)
透明度動畫(AlphaAnimation)
旋轉動畫(RotateAnimation)
平移動畫(TranslateAnimation)

複合動畫(AnimationSet)

由多個單一動畫組合在一塊兒的動畫

補間動畫的視圖結構：

5.1如何使用View Animation

Animation的公用功能：

•setDuration(long durationMillis) : 設置持續時間(單位ms)

•setStartOffset(long startOffset) : 設置開始的延遲的時間(單位ms)

•setFillBefore(boolean fillBefore) : 設置最終是否固定在起始狀態

•setFillAfter(boolean fillAfter) : 設置最終是否固定在最後的狀態

•setAnimationListener(AnimationListener listener) : 設置動畫監聽

•座標類型:

•Animation.ABSOLUTE

•Animation.RELATIVE_TO_SELF

•Animation.RELATIVE_TO_PARENT

•啓動動畫 : view.startAnimation(animation);

•結束動畫: view.clearAnimation()

•動畫監聽器 : AnimationListener

•onAnimationStart(Animation animation) : 動畫開始的回調

•onAnimationEnd(Animation animation) : 動畫結束的回調

•onAnimationRepeat(Animation animation) : 動畫重複執行

1.》縮放動畫(Code ScaleAnimation)

•fromX : 開始時X軸上的縮放比例

•toX : 結束時X軸上的縮放比例

•fromY :開始時Y軸上的縮放比例

•toY :結束時Y軸上的縮放比例

•pivotXType : X軸座標的類型(計算x軸上的偏移量的方式)

•pivotXVlaue : 中心點在X軸相對視圖左頂點在x軸上的偏移量

•pivotYType : Y軸座標的類型(計算x軸上的偏移量的方式)

•pivotYValue : 中心點相對視圖左頂點在y軸上的偏移量

2.》縮放動畫(Xml ScaleAnimation)

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX=「1"
    android:pivotY=「0.5「           
    android:toXScale="1.0"
    android:toYScale="1.0"
    android:fillAfter="true"/>

•Animation.ABSOLUTE :

數值(默認以px爲單位) 100

•Animation.RELATIVE_TO_SELF :

百分數,如:50% (以當前視圖的寬度或高度其爲基數來計算)

•Animation.RELATIVE_TO_PARENT :

百分數+p,如:50%p (以父視圖的寬度或高度其爲基數來計算)

3》旋轉動畫(RotateAnimation)

•fromDegrees : 開始時的角度

•toDegrees : 結束時的角度

•pivotXType : X軸座標的類型

•pivotXVlaue : X軸座標的值

•pivotYType : Y軸座標的類型

•pivotYValue : Y軸座標的值

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:fromDegrees="+90「
    android:toDegrees="-90"
    android:pivotX="0%"
    android:pivotY="0%"/>

4.》透明度動畫(AlphaAnimation)

•fromAlpha :　開始時的縮放比例

•toAlpha : 結束時的縮放比例

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="500"
android:duration="1000" />

5.》平移動畫(TranslateAnimation)

•fromXType : 座標類型

•fromXValue : 開始時X軸的座標

•toXType :座標類型

•toXValue : 結束時X軸的座標

•fromYType :座標類型

•fromYValue : 開始時Y軸的座標

•toYType :座標類型

•toYValue : 結束時Y軸的座標

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

6.複合動畫(Code AnimationSet)

// 複合動畫對象

AnimationSet animationSet = new AnimationSet(false);

// 添加一個單一動畫

animationSet.addAnimation(alpha);

animationSet.addAnimation(rotate);

//開啓動畫

iv_animation.startAnimation(animationSet);

6.1複合動畫(Xml AnimationSet)

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="2000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%「
        android:toDegrees="360" />
</set>

7.Interpolator屬性的使用（這裏咱們稍微提一下，後面我還要詳細的講解）

Interpolator 被用來修飾動畫效果，定義動畫的變化率，能夠使存在的動畫效果accelerated(加速)，decelerated(減速),repeated(重複)等。

•@android:anim/linear_interpolator : 線性變化

•@android:anim/accelerate_interpolator : 加速變化

•@android:anim/decelerate_interpolator : 減速變化

•@android:anim/cycle_interpolator : 週期循環變化

8.如何使用Drawable Animation

8.1動畫配置

<animation-list 
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/nv1" android:duration="500" />
<item android:drawable="@drawable/nv2" android:duration="500" />
<item android:drawable="@drawable/nv3" android:duration="500" />
<item android:drawable="@drawable/nv4" android:duration="500" />
</animation-list>

<ImageView
    android:id="@+id/iv_dv"
    android:layout_width=「80dp"
    android:layout_height=「80dp"
    android:layout_marginTop="160dp"
    android:background="@drawable/anim_da" />

8.2啓動Drawable動畫

//獲得背景動畫圖上

AnimationDrawable ad = null;

ad = (AnimationDrawable) imageView.getBackground();

//啓動動畫

ad.start();

//中止動畫

ad.stop();

到此所用的逐幀動畫和補間動畫的基本使用咱們都講完了，下面咱們將給出具體的應用例子