這篇要來聊一下View Animation ,在Android中寫動畫的基礎用法

 

聊天一下...老實講我覺得用程式寫動畫簡直超麻煩!ORZ

雖然這篇只會寫到最簡單的做法

不過日後動畫系列大概還會繼續往下寫...

所以Emmm..加油(;´д`)ゞ

 

Android 的動畫其實有非常多種,有機會的話我再來一篇一篇發(´∀`)

今天的文章會先來寫最簡單的做法,View Animation

View Andimation是一個總稱,實際上Google在這方面已經提供了套件給你了

你只要串些套件的方法,再加入設定;基本上就可以寫出一些不錯的動畫

以動畫來說,最基本就是控制透明度縮放移動旋轉等四種

也因此今天的文章也就是用這四種下去講(・ω・)b

 

Okay,那上功能

 

 

然後沒有Github,因為這篇內容較簡單

需要源碼的話下面留言留信箱我再寄給你

開始吧

 


 

1. 建立動畫資源&寫介面

 

1.1 寫介面

首先是介面的樣子

 

Screenshot_1605932261

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button_XML_Alpha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="透明度"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button_XML_Scale" />

    <Button
        android:id="@+id/button_XML_Scale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="縮放"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.352"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button_XML_Translate" />

    <Button
        android:id="@+id/button_XML_Translate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="移動"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toStartOf="@+id/button_Java_Rotate"
        app:layout_constraintStart_toEndOf="@+id/button_Java_Scale"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <Button
        android:id="@+id/button_XML_Rotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:text="旋轉"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button_XML_Translate" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="用程式寫動畫腳本"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <TextView
        android:id="@+id/textView_Object"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="少在那邊旋轉我"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.75" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="用XML寫動畫腳本"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Button
        android:id="@+id/button_Java_Alpha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="透明度"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button_Java_Scale" />

    <Button
        android:id="@+id/button_Java_Scale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="縮放"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.352"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button_Java_Translate" />

    <Button
        android:id="@+id/button_Java_Translate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="移動"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button_Java_Rotate"
        app:layout_constraintStart_toEndOf="@+id/button_Java_Scale"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <Button
        android:id="@+id/button_Java_Rotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:text="旋轉"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button_Java_Translate" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

整個介面也沒有在幹嘛,就是東西拉一拉而已,請複製貼上吧(-‿◦)

 

1.2 寫動畫資源檔

 

首先看一看專案結構

截圖 2020-11-21 下午12.20.23

 

基本上沒什麼特別要注意的,接下來要做的事就是要新增紅色方框的內容

資料夾的部分請向下圖一樣建立即可

res右鍵->New->Directory

截圖 2020-11-21 上午9.23.49

 

然後命名不能自定義,請一定要命名anim哦(應該吧...)

 

截圖 2020-11-21 上午9.24.05

 

 

再來是建立動畫檔案,會的人可以跳過圖片

anim右鍵->New->Animation Resource File

 

截圖 2020-11-21 上午9.41.22

 

然後命名,及完成囉!

 

截圖 2020-11-21 上午9.41.48

 

再來是分別四個動畫資源檔案內容

 

alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:toAlpha="0"
        />
    <!--
        duration 動畫執行時間
        fromAlpha 起始時物件的透明度(Alpha)
        toAlpha 結束時物件的透明度
        -->
</set>

 

rotate.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="3600"
        android:pivotX="50%"
        android:pivotY="50%"
        />

    <!--
        duration 動畫執行時間
        fromDegrees 動畫開始時物件的角度
        toDegrees 動畫結束時物件的角度
        pivotX、pivotY 代表旋轉的中心點
        50%、50%表示中心旋轉
    -->
</set>

 

scale.xml

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

<!--
    duration 動畫執行時間
    fromXScale 動畫開始時X的大小
    fromYScale 動畫開始時Y的大小
    toXScale 動畫結束時X的大小
    toYScale 動畫結束時Y的大小
    1.0跟0.5分別代表物件的倍率
    pivotX、pivotY 代表縮小的中心點
    50%、50%表示中心縮小
-->
</set>

 

treanslate.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="25%p"
        android:toYDelta="25%p"
        />
    <!--
        duration 動畫執行時間
        fromXScale 動畫開始時X的大小
        fromYScale 動畫開始時Y的大小
        toXScale 動畫結束時X的大小
        toYScale 動畫結束時Y的大小
        1.0跟0.5分別代表物件的倍率
        pivotX、pivotY 代表縮小的中心點
        50%、50%表示中心縮小
    -->
</set>

 

到這邊為止,就完成了基本設置囉

下一段就是寫程式的部分(・ωー)~☆

 


 

2. 撰寫相關程式

 

接下來就是用程式把物件套用到資源檔了

在大部分的UI中幾乎都有繼承到一個叫做startAnimation的一個方法

運用這個方法,我們就可以很輕鬆地使UI套用動畫資源

公式是這樣:

物件.startAnimation(AnimationUtils.loadAnimation(this,R.anim.xxxx));

 

所以我們的程式就這樣寫

 

public class MainActivity extends AppCompatActivity {

    Button btXmlAlpha,btXmlScale,btXmlTrans,btXmlRotate,btJavaAlpha,btJavaScale,btJavaTrans,btJavaRotate;
    TextView tvObject;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btXmlAlpha = findViewById(R.id.button_XML_Alpha);
        btXmlScale = findViewById(R.id.button_XML_Scale);
        btXmlTrans = findViewById(R.id.button_XML_Translate);
        btXmlRotate = findViewById(R.id.button_XML_Rotate);
        btJavaAlpha = findViewById(R.id.button_Java_Alpha);
        btJavaScale = findViewById(R.id.button_Java_Scale);
        btJavaTrans = findViewById(R.id.button_Java_Translate);
        btJavaRotate = findViewById(R.id.button_Java_Rotate);
        tvObject = findViewById(R.id.textView_Object);
        byXml();
    }

    private void byXml(){
        btXmlAlpha.setOnClickListener(v->{
            tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.alpha));
        });
        btXmlScale.setOnClickListener(v->{
            tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.scale));
        });
        btXmlTrans.setOnClickListener(v->{
            tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.translate));
        });
        btXmlRotate.setOnClickListener(v->{
            tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.rotate));
        });
    }  
}

 

到這邊就完成用動畫資源檔設置囉

 


 

3. 用程式寫動畫

 

剛剛上述段落我們使用動畫資源檔案來控制動畫

那麼能不能直接寫程式控制動畫?

當然可以啊~

 

剛才在上面有說道,其實google都已經把方法寫好給你了

所以我們只要呼叫他的方法就行囉:D

 

來看一下幾個方法吧

 

透明度

AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f);
alphaAnimation.setDuration(2000);

 

縮放

ScaleAnimation scaleAnimation = new ScaleAnimation(
        1.0f,2.0f,1.0f,2.0f,
        Animation.RELATIVE_TO_SELF,0.5f,
        Animation.RELATIVE_TO_SELF,0.5f);
scaleAnimation.setDuration(2000);

 

移動

TranslateAnimation translateAnimation = new TranslateAnimation(
        0f,
        100f,
        0f,
        -100f
);

 

旋轉

RotateAnimation rotateAnimation = new RotateAnimation(
        0f,
        3600,
        RotateAnimation.RELATIVE_TO_SELF,
        0.5f,
        RotateAnimation.RELATIVE_TO_SELF,
        0.5f
);
rotateAnimation.setDuration(2000);

 

雖然你們看起來只是數字

不過實際上在編輯器看起來是這樣的

截圖 2020-11-21 上午11.33.02

 

編輯器很貼心,會自動幫你把參數名稱寫進去~哈哈

 

最後,這部分的程式如下

 

public class MainActivity extends AppCompatActivity {

    Button btXmlAlpha,btXmlScale,btXmlTrans,btXmlRotate,btJavaAlpha,btJavaScale,btJavaTrans,btJavaRotate;
    TextView tvObject;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btXmlAlpha = findViewById(R.id.button_XML_Alpha);
        btXmlScale = findViewById(R.id.button_XML_Scale);
        btXmlTrans = findViewById(R.id.button_XML_Translate);
        btXmlRotate = findViewById(R.id.button_XML_Rotate);
        btJavaAlpha = findViewById(R.id.button_Java_Alpha);
        btJavaScale = findViewById(R.id.button_Java_Scale);
        btJavaTrans = findViewById(R.id.button_Java_Translate);
        btJavaRotate = findViewById(R.id.button_Java_Rotate);
        tvObject = findViewById(R.id.textView_Object);
        byJava();
    }

    private void byJava(){

        btJavaAlpha.setOnClickListener(v -> {
            AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f);
            alphaAnimation.setDuration(2000);
            tvObject.startAnimation(alphaAnimation);
        });

        btJavaScale.setOnClickListener(v -> {
            ScaleAnimation scaleAnimation = new ScaleAnimation(
                    1.0f,2.0f,1.0f,2.0f,
                    Animation.RELATIVE_TO_SELF,0.5f,
                    Animation.RELATIVE_TO_SELF,0.5f);
            scaleAnimation.setDuration(2000);
            tvObject.startAnimation(scaleAnimation);

        });
        btJavaTrans.setOnClickListener(v -> {
            TranslateAnimation translateAnimation = new TranslateAnimation(
                    0f,
                    100f,
                    0f,
                    -100f
            );
            translateAnimation.setDuration(2000);
            tvObject.startAnimation(translateAnimation);

        });
        btJavaRotate.setOnClickListener(v -> {
            RotateAnimation rotateAnimation = new RotateAnimation(
                    0f,
                    3600,
                    RotateAnimation.RELATIVE_TO_SELF,
                    0.5f,
                    RotateAnimation.RELATIVE_TO_SELF,
                    0.5f
            );
            rotateAnimation.setDuration(2000);
            rotateAnimation.setFillAfter(true);

            tvObject.startAnimation(rotateAnimation);
        });
    }

}

 

 

 


 

最後,是全部的程式碼

public class MainActivity extends AppCompatActivity {

    Button btXmlAlpha,btXmlScale,btXmlTrans,btXmlRotate,btJavaAlpha,btJavaScale,btJavaTrans,btJavaRotate;
    TextView tvObject;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btXmlAlpha = findViewById(R.id.button_XML_Alpha);
        btXmlScale = findViewById(R.id.button_XML_Scale);
        btXmlTrans = findViewById(R.id.button_XML_Translate);
        btXmlRotate = findViewById(R.id.button_XML_Rotate);
        btJavaAlpha = findViewById(R.id.button_Java_Alpha);
        btJavaScale = findViewById(R.id.button_Java_Scale);
        btJavaTrans = findViewById(R.id.button_Java_Translate);
        btJavaRotate = findViewById(R.id.button_Java_Rotate);
        tvObject = findViewById(R.id.textView_Object);
        byXml();
        byJava();


    }

    private void byXml(){
        btXmlAlpha.setOnClickListener(v->{
            tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.alpha));
        });
        btXmlScale.setOnClickListener(v->{
            tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.scale));
        });
        btXmlTrans.setOnClickListener(v->{
            tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.translate));
        });
        btXmlRotate.setOnClickListener(v->{
            tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.rotate));
        });


    }
    private void byJava(){

        btJavaAlpha.setOnClickListener(v -> {
            AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f);
            alphaAnimation.setDuration(2000);
            tvObject.startAnimation(alphaAnimation);
        });

        btJavaScale.setOnClickListener(v -> {
            ScaleAnimation scaleAnimation = new ScaleAnimation(
                    1.0f,2.0f,1.0f,2.0f,
                    Animation.RELATIVE_TO_SELF,0.5f,
                    Animation.RELATIVE_TO_SELF,0.5f);
            scaleAnimation.setDuration(2000);
            tvObject.startAnimation(scaleAnimation);

        });
        btJavaTrans.setOnClickListener(v -> {
            TranslateAnimation translateAnimation = new TranslateAnimation(
                    0f,
                    100f,
                    0f,
                    -100f
            );
            translateAnimation.setDuration(2000);
            tvObject.startAnimation(translateAnimation);

        });
        btJavaRotate.setOnClickListener(v -> {
            RotateAnimation rotateAnimation = new RotateAnimation(
                    0f,
                    3600,
                    RotateAnimation.RELATIVE_TO_SELF,
                    0.5f,
                    RotateAnimation.RELATIVE_TO_SELF,
                    0.5f
            );
            rotateAnimation.setDuration(2000);
            rotateAnimation.setFillAfter(true);

            tvObject.startAnimation(rotateAnimation);
        });
    }

}

 


 

那麼今天的文章就寫到這邊

希望這篇文章能幫助到你(・ω・)b

TK

arrow
arrow
    創作者介紹
    創作者 碼農日常 的頭像
    碼農日常

    碼農日常大小事

    碼農日常 發表在 痞客邦 留言(17) 人氣()