動畫

第十六天·動畫

幀動畫

通俗的講幀動畫就是把每個圖片連載一起播放，播放出來的效果就好比GIF的圖片一樣。

靜態方式的幀動畫，
1、在xml佈局文件中把動畫列出來，把所有的照片放到drawable的frame的文件中
2、< animation-list >根節點 < item>每一幀的節點item節點中的兩個屬性
duration：設置一次的播放時間
drawable：設置每一幀的圖片資源

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/a2" android:duration="100"/>
    <item android:drawable="@mipmap/a3" android:duration="100"/>
</animation-list>

3、把這個資源文件設置成控件背景

<ImageView
        android:id="@+id/frame_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/frame"
        />

4、通過控件的getBackground（）方法得到AnimationDrawable的對象
5、通過AnimationDrawable對象調用start（），停止動畫stop（）
6、通過AnimationDrawable的對象可以設置動畫的播放屬性，例如：循環播放；

 private void startFrameAnim(){
        //把imageview控件的背景資源獲取出來，轉換成animationDrawable類型
        AnimationDrawable drawable= (AnimationDrawable) frameIv.getBackground();
        //讓動畫資源開始的方法
        drawable.start();
    }

動態方式的幀動畫，佈局裏寫一個控件，然後就是用代碼寫出其樣式效果。

1、創建一個AnimationDrawable的對象，使用new的方式
2、使用循環的方式把每一幀的圖片資源添加到AnimationDrawable對象中
3、通過AnimationDrawable的對象調用start（），停止動畫stop（）；
4、通過AnimationDrawable的對象可以設置動畫的播放屬性，例如：循環播放

注意：先給控件設置動畫資源，然後再調用start（）的方法

//動態方式的幀動畫
    private void startFrameAnim1(){
        AnimationDrawable drawable=new AnimationDrawable();
        //通過getResources（）方法把a2--a20的18張圖片加載到動畫裏去
        for (int i=2;i<20;i++){
            //getIdentifier（圖片名，圖片所在的文件夾，當前的包名
            int id=getResources().getIdentifier("a"+i,"mipmap",getPackageName());
            //根據圖片id把圖片轉換成Drawable的對象
            Drawable frame=getResources().getDrawable(id);
            //把當前圖片添加到AnimationDrawable的對象中，並設置時間
            drawable.addFrame(frame,500);
        }
        //設置播放模式是否循環播放，false是循環，true是不循環
        drawable.setOneShot(false);
        //設置本類將要顯示的這個動畫
        frameIv.setBackgroundDrawable(drawable);
        //開始動畫
        drawable.start();

    }

補間動畫

具有平移、透明、旋轉、縮放的動畫效果就叫補間動畫。
它的實現：
確定初始和終止位置，然後中間的過程爲補間動畫的動畫效果
補間動畫有四種：
1、TranslateAnimation（平移動畫）
2、ScaleAnimation（縮放動畫）
3、RotateAnimation（旋轉動畫）
4、AlphaAnimation（透明動畫）

靜態方式實現：

        1、res/anim在該文件夾中創建xml資源文件
        2、創建對應動畫效果的節點。例如：< rotate/>旋轉動畫節點，同時設置該動畫的屬性：開始的位置、結束的位置、播放次數、播放模式
        3、使用對應的動畫類，通過AnimationUtils.loadAnimation（context，資源文件）
        4、通過動畫類的對象調用start（）播放動畫
        5、把該動畫類綁定到控件上

動態方式實現：

        1、創建對應的動畫類，使用new的方式。通過構造方法，把該動畫的初始位置和終止位置確定出來
        2、通過動畫類的對象，設置該動畫的屬性：一次的播放時間、播放次數、播放模式
        3、調用start（）啓動動畫
        4、把該動畫類的對象綁定在控件上

注意：補間動畫要先啓動動畫，再進行綁定

組合補間動畫：

        1、通過xml資源文件吧多個動畫節點放在< set >節點中
        2、在動畫的節點中，只設置動畫的開始終止位置和重複字數，重複模式和播放時間等屬性在set節點中設置
        3、使用Animation類的對象來加載組合補間動畫
        4、之後操作同靜態補間動畫一樣

補間動畫的應用：

        activity的跳轉添加動畫效果
        overridePendingTransition（進入動畫，退出動畫）；
        寫在StartActivity和finish這兩個方法的下面。
        onKeyDown（）監聽手機按鍵的方法
        KeyCode參數可以判斷當前按下的是什麼鍵

以下是用八副圖來把補間動畫的平移、透明、旋轉、縮放的靜態、動態的方式全都寫出來了。

package com.xiaogao.user.android2lesson_16_animationapp;

import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class TweenAnimActivity extends AppCompatActivity {

    private ImageView iv1, iv2, iv3, iv4,iv5,iv6,iv7,iv8;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tween_anim);

        iv1 = (ImageView) findViewById(R.id.tween_iv1);
        iv2 = (ImageView) findViewById(R.id.tween_iv2);
        iv3 = (ImageView) findViewById(R.id.tween_iv3);
        iv4 = (ImageView) findViewById(R.id.tween_iv4);
        iv5 = (ImageView) findViewById(R.id.tween_iv5);
        iv6 = (ImageView) findViewById(R.id.tween_iv6);
        iv7 = (ImageView) findViewById(R.id.tween_iv7);
        iv8 = (ImageView) findViewById(R.id.tween_iv8);

        startTweenTran(iv1);
        startTweenTran1(iv2);
        startRotateAnim(iv3);
        startAnim(iv4);
        startAlphaAnim(iv5);
        startAlph(iv6);
        startScaleAnim(iv7);
        startScale(iv8);
    }

    /**
     * 開始一個平移動畫,靜態方式
     * 和幀動畫的區別：幀動畫要先綁定控件再start（），補間動畫要先啓動，再綁定
     */
    private void startTweenTran(ImageView iv) {
        //通過引入xml文件的方式加載一個動畫
        TranslateAnimation animation = (TranslateAnimation) AnimationUtils.loadAnimation(this, R.anim.translate);
        //讓動畫動起來
        animation.start();
        //把平移動畫和控件進行綁定
        iv.setAnimation(animation);


    }

    /**
     * 動態實現平移
     * TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)
     * fromXType:x座標起始位置的類型（1、相對自己(Animation.RELATIVE_TO_SELF)，2、相對父佈局，3、局對位置）
     * fromXValue：x座標起始位置的值
     * toXType
     *
     * @param iv
     */
    private void startTweenTran1(ImageView iv) {
        TranslateAnimation animation = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF,
                0f,
                Animation.RELATIVE_TO_SELF,
                -3f,
                Animation.RELATIVE_TO_SELF,
                0f,
                Animation.RELATIVE_TO_SELF,
                3f);

        //重複次數(Animation.INFINITE無限次數）
        animation.setRepeatCount(Animation.INFINITE);
        //動畫時間
        animation.setDuration(2000);
        //設置動畫 執行動畫的模式（Animation.REVERSE往返；Animation.RESTART重複
        animation.setRepeatMode(Animation.REVERSE);

        //開始動畫
        animation.start();
        //綁定，讓iv控件實現動畫效果
        iv.setAnimation(animation);

    }

    /**
     * 旋轉動畫的靜態方式，使用資源文件的方式，並啓動
     * @param iv
     */
    private void startRotateAnim(ImageView iv){
        //把旋轉動畫的資源文件，轉換成旋轉動畫對象
        RotateAnimation animation= (RotateAnimation) AnimationUtils.loadAnimation(this,R.anim.rotate);
        animation.start();
        iv.setAnimation(animation);
    }
    /**
     * 旋轉動畫+平移動畫
     * 使用資源文件實現
     */
    private void startAnim(ImageView iv){
        Animation animation=AnimationUtils.loadAnimation(this,R.anim.rotate_tanslate);
        animation.start();
        iv.startAnimation(animation);
    }

    /**
     * 靜態方式的透明度
     */
    private void startAlphaAnim(ImageView iv){
        AlphaAnimation drawable= (AlphaAnimation) AnimationUtils.loadAnimation(this,R.anim.alpha);
        drawable.start();
        iv.setAnimation(drawable);

    }
    /**
     * 動態方式的透明度
     */
    private void startAlph(ImageView iv){
        AlphaAnimation animation=new AlphaAnimation(2,0);
        animation.setDuration(2000);
        animation.start();
        iv.setAnimation(animation);
    }

    /**
     * 靜態方式的縮放
     */
    private void startScaleAnim(ImageView iv){
        ScaleAnimation animation= (ScaleAnimation) AnimationUtils.loadAnimation(this,R.anim.scale);
        animation.start();
        iv.setAnimation(animation);
    }
    /**
     * 動態方式的縮放
     */
    private void startScale(ImageView iv){
        ScaleAnimation animation=new ScaleAnimation(0f,3f,0f,3f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        animation.setDuration(2000);
        animation.setRepeatCount(Animation.INFINITE);
        animation.start();
        iv.setAnimation(animation);

    }
   }

這是用手機上的返回按鈕來佈置動畫效果：

    /**
     * 響應獲取手機按鍵的方法
     * KEYCODE_BACK：手機的返回鍵
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //1、判斷到當前點擊的按鍵爲返回鍵
        //2、既然自己判斷了返回鍵的監聽事件，就要自己來實現返回的功能
        if (keyCode==KeyEvent.KEYCODE_BACK){
            finish();
            overridePendingTransition(R.anim.tran_back_in,R.anim.tran_back_out);
        }

        return super.onKeyDown(keyCode, event);
    }