Android 動畫與實戰

動畫與實戰

參考鏈接：https://www.runoob.com/w3cnote/android-tutorial-animation.html

1.幀動畫概念以及用法

幀動畫非常容易理解，其實就是簡單的由N張靜態圖片收集起來，然後我們通過控制依次顯示 這些圖片，因爲人眼"視覺殘留"的原因，會讓我們造成動畫的"錯覺"，跟放電影的原理一樣！

而Android中實現幀動畫，一般我們會用到前面講解到的一個Drawable：AnimationDrawable 先編寫好Drawable，然後代碼中調用start()以及stop()開始或停止播放動畫~

當然我們也可以在Java代碼中創建逐幀動畫，創建AnimationDrawable對象，然後調用 addFrame(Drawable frame,int duration)向動畫中添加幀，接着調用start()和stop()而已

2、補間動畫

補間動畫(Tween)，和前面學的幀動畫不同，幀動畫 是通過連續播放圖片來模擬動畫效果，而補間動畫開發者只需指定動畫開始，以及動畫結束"關鍵幀"， 而動畫變化的"中間幀"則由系統計算並補齊！

動畫	效果
AlphaAnimation：	透明度漸變效果，創建時許指定開始以及結束透明度，還有動畫的持續 時間，透明度的變化範圍(0,1)，0是完全透明，1是完全不透明；對應標籤！
ScaleAnimation：	縮放漸變效果，創建時需指定開始以及結束的縮放比，以及縮放參考點， 還有動畫的持續時間；對應標籤！
TranslateAnimation：	位移漸變效果，創建時指定起始以及結束位置，並指定動畫的持續 時間即可；對應標籤！
}RotateAnimation：	旋轉漸變效果，創建時指定動畫起始以及結束的旋轉角度，以及動畫 持續時間和旋轉的軸心；對應標籤

3、補間動畫實戰

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="5dp"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/tt"
        android:layout_centerInParent="true"
        android:id="@+id/iv_bean"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        >
        <Button
            android:id="@+id/btn_one"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="漸變"
            />
        <Button
            android:id="@+id/btn_two"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="旋轉"
            />
        <Button
            android:id="@+id/btn_three"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="縮放"
            />
        <Button
            android:id="@+id/btn_four"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="移動"
            />
    </LinearLayout>


</RelativeLayout>

MainActivity.java

package com.example.tween;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
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 Button btnOne;
    private Button btnTwo;
    private Button btnThree;
    private Button btnFour;
    private ImageView ivBean;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化組件並添加點擊事件
        btnOne = (Button)findViewById(R.id.btn_one);
        btnTwo = (Button)findViewById(R.id.btn_two);
        btnThree = (Button)findViewById(R.id.btn_three);
        btnFour = (Button)findViewById(R.id.btn_four);


        ivBean = (ImageView)findViewById(R.id.iv_bean);
        btnOne.setOnClickListener(this);
        btnTwo.setOnClickListener(this);
        btnThree.setOnClickListener(this);
        btnFour.setOnClickListener(this);
    }

    public void onClick(View view){
        switch (view.getId()){
            case R.id.btn_one:
                //調用AnimationUnits的loadAnimation()方法加載動畫
                //單擊按鈕使圖片漸變
                Animation alpha = AnimationUtils.loadAnimation(this,R.anim.alpha_animation);
                ivBean.startAnimation(alpha);
                break;
            case R.id.btn_two:
                //單擊按鈕使圖片旋轉
                Animation rotate = AnimationUtils.loadAnimation(this,R.anim.rotate_animation);
                ivBean.startAnimation(rotate);
                break;
            case R.id.btn_three:
                //單擊按鈕使圖片縮放
                Animation scale = AnimationUtils.loadAnimation(this,R.anim.scale_animation);
                ivBean.startAnimation(scale);
                break;
            case R.id.btn_four:

                //單擊按鈕使圖片移動
                Animation translate = AnimationUtils.loadAnimation(this,R.anim.translate_animation);
                ivBean.startAnimation(translate);
                break;
        }
    }
}

運行截圖：

漸變

旋轉

縮放

移動