1. 程式人生 > >Android 動畫(一)幀動畫、補間動畫

Android 動畫(一)幀動畫、補間動畫

1.Frame Animation(幀動畫)

幀動畫就是把多張圖片在定義的短時間內完成順序播放,最終呈現在視覺上的動態效果;幀動畫首先得具有圖片資源。

下面是幀動畫在Android開發中的具體實現:

(1)activity_main.xml檔案:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:id
="@+id/rl" //把顯示在介面的圖片作為父控制元件的背景來顯示 android:background="@drawable/resource" tools:context="com.day01_530.myapplication.MainActivity">
</RelativeLayout>

(2)drawable目錄下的resource.xml檔案(集中了動畫播放的所有圖片):

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
>
<--drawable設定圖片,duration設定圖片的顯示持續時間--> <item android:drawable="@drawable/girl_1" android:duration="100"></item> <item android:drawable="@drawable/girl_2" android:duration="100"></item> <item android:drawable="@drawable/girl_3" android:duration="100"></item> <item android:drawable="@drawable/girl_4" android:duration="100"></item> <item android:drawable="@drawable/girl_5" android:duration="100"></item> <item android:drawable="@drawable/girl_6" android:duration="100"></item> <item android:drawable="@drawable/girl_7" android:duration="100"></item> <item android:drawable="@drawable/girl_8" android:duration="100"></item> <item android:drawable="@drawable/girl_9" android:duration="100"></item> <item android:drawable="@drawable/girl_10" android:duration="100"></item> <item android:drawable="@drawable/girl_11" android:duration="100"></item> </animation-list>

(3)MainActivity.java

package com.day01_530.myapplication;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.RelativeLayout;
public class MainActivity extends AppCompatActivity {
    private RelativeLayout rl;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rl= (RelativeLayout) findViewById(R.id.rl);
        //animation:動畫
        AnimationDrawable ani= (AnimationDrawable) rl.getBackground();
        ani.start();
    }
}

2.Tween Animation(補間動畫)

補間動畫具有4種樣式,分別是:alpha(透明度動畫)、rotate(旋轉動畫)、scale(縮放動畫)和translate(平移動畫)。除此之外,四鍾動畫還可以組合來使用。補間動畫的設定需要指定初始狀態和最終狀態。

下面分別用xml檔案和程式碼的方式來實現這4種樣式的動畫;

2.1 alpha(透明度動畫)

(1)xml方法實現
xml檔案:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="359"/>
</set>

java 程式碼:

 public void rotate_xml(View view) {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
        imageView.startAnimation(animation);
    }

(2)java 程式碼實現方式:

    public void rotate(View view) {
//        RotateAnimation rotateAnimation=new RotateAnimation(0,359); 順時針
         //引數3:旋轉中心點的X軸座標  4:旋轉中心點的Y軸座標
//        RotateAnimation rotateAnimation=new RotateAnimation(0,359,imageView.getWidth()/2,imageView.getHeight()/2);

        RotateAnimation rotateAnimation = new RotateAnimation(0, 359, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(2 * 1000);
        rotateAnimation.setRepeatCount(3); // 動畫完成後再重複3次 一共4次
//        rotateAnimation.setRepeatMode(Animation.REVERSE); //設定動畫模式:反轉
        rotateAnimation.setRepeatMode(Animation.INFINITE);  //設定動畫無限迴圈模式
        //設定動畫的插值器,預設情況下動畫都是先加速再減速
        //new LinearInterpolator() 是一個線性插值器,使用後動畫勻速旋轉
        rotateAnimation.setInterpolator(new LinearInterpolator());
        imageView.startAnimation(rotateAnimation);
    }

2.2 rotate (旋轉)

(1)xml方法實現
xml檔案:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="359"/>
</set>

java 程式碼:

 public void rotate_xml(View view) {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
        imageView.startAnimation(animation);
    }

(2)java 程式碼實現方式:

   public void rotate(View view) {
//        RotateAnimation rotateAnimation=new RotateAnimation(0,359); 順時針
         //引數3:旋轉中心點的X軸座標  4:旋轉中心點的Y軸座標
//        RotateAnimation rotateAnimation=new RotateAnimation(0,359,imageView.getWidth()/2,imageView.getHeight()/2);

        RotateAnimation rotateAnimation = new RotateAnimation(0, 359, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(2 * 1000);
        rotateAnimation.setRepeatCount(3); // 動畫完成後再重複3次 一共4次
//        rotateAnimation.setRepeatMode(Animation.REVERSE); //設定動畫模式:反轉
        rotateAnimation.setRepeatMode(Animation.INFINITE);  //設定動畫無限迴圈模式
        //設定動畫的插值器,預設情況下動畫都是先加速再減速
        //new LinearInterpolator() 是一個線性插值器,使用後動畫勻速旋轉
        rotateAnimation.setInterpolator(new LinearInterpolator());
        imageView.startAnimation(rotateAnimation);
    }

2.3 scale(縮放)

(1)xml方法實現
xml檔案:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:duration="2000" android:fromXScale="0" android:fromYScale="0"
        android:toXScale="1" android:toYScale="1"/>
</set>

java 程式碼:

   public void scale_xml(View view) {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
        imageView.startAnimation(animation);
    }

(2)java 程式碼實現方式:

   public void scale(View view) {
           //引數1、2、3、4:相對與控制元件寬高的縮放倍數  5、6:縮放中心的X和Y軸座標
//        ScaleAnimation scaleAnimation=new ScaleAnimation(0,1,0,1,imageView.getWidth()/2,imageView.getHeight()/2);
//        ScaleAnimation scaleAnimation=new ScaleAnimation(0,1,0,1);
        ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1,
                Animation.RELATIVE_TO_SELF, 0.5F, Animation.RELATIVE_TO_SELF, 0.5F);
        scaleAnimation.setDuration(2 * 1000);
        imageView.startAnimation(scaleAnimation);
    }

2.4 translate(平移)

(1)xml方法實現
xml檔案:

<?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="100" android:toYDelta="100"/>
</set>

java 程式碼:

public void translate_xml(View view) {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
        imageView.startAnimation(animation);
    }

(2)java 程式碼實現方式:

 public void translate(View view) {
        /**
         * 第1、3個引數表示控制元件平移的起始座標(控制元件左上角)
         * 第2、4個引數表示控制元件平移後的終點座標(控制元件左上角)
         */
//        TranslateAnimation translateAnimation = new TranslateAnimation(0, imageView.getWidth(),
//                0, imageView.getHeight());
        /**
         *
         */
        TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0,
                Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1);
        translateAnimation.setDuration(2 * 1000);
        imageView.startAnimation(translateAnimation);
    }