วิธีสร้าง Animation ด้วยไฟล์ XML ในแอป Android

การสร้าง Animation ใน Android ด้วยไฟล์ XML

ตัวอย่างนี้สาธิตการสร้าง Animation แบบต่างๆ ผ่านไฟล์ XML ในโฟลเดอร์ res/anim/ ได้แก่ Alpha (โปร่งใส), Scale (ซูม), และ Blink (กะพริบ)

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

ไปที่ File → New Project ใน Android Studio

ขั้นตอนที่ 2: Layout หลัก (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:padding="4dp"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView android:textSize="24sp" android:textStyle="bold"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="Have a Wonderful day!"
        android:layout_centerInParent="true" android:id="@+id/textView" />
    <Button android:id="@+id/button" android:layout_alignParentBottom="true"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:text="Start Animation"/>
</RelativeLayout>

ขั้นตอนที่ 3: สร้างไฟล์ Animation ใน res/anim/

myanim.xml - Fade In (Alpha)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android" android:fillAfter="true">
    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />
</set>

zoom.xml - Zoom (Scale)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android" android:fillAfter="true">
    <scale
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3"></scale>
</set>

blink.xml - Blink (Alpha + Repeat)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="600"
        android:repeatMode="reverse"
        android:repeatCount="infinite"/>
</set>

ขั้นตอนที่ 4: โค้ดหลัก (MainActivity.java)

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.TextView;

public class MainActivity extends AppCompatActivity implements Animation.AnimationListener {
    TextView textView;
    Button button;
    Animation animation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = findViewById(R.id.textView);
        button = findViewById(R.id.button);
        animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.blink);
        animation.setAnimationListener(this);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setVisibility(View.VISIBLE);
                textView.startAnimation(animation);
            }
        });
    }

    @Override
    public void onAnimationStart(Animation animation) {}
    @Override
    public void onAnimationEnd(Animation animation1) {}
    @Override
    public void onAnimationRepeat(Animation animation) {}
}

ขั้นตอนที่ 5: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

ประเภท Animation หลักใน Android

• Alpha - ความโปร่งใส (Fade in/out)
• Scale - ขยาย/ย่อขนาด (Zoom)
• Translate - เคลื่อนที่ตำแหน่ง (Move)
• Rotate - หมุน (Rotate)
• Set - รวมหลาย Animation พร้อมกัน

Interpolator ที่นิยมใช้

• accelerate_interpolator - เริ่มช้า เร็วขึ้น
• decelerate_interpolator - เริ่มเร็ว ช้าลง
• bounce_interpolator - แบบเด้ง
• linear_interpolator - คงที่

การทดสอบ

รันแอป กดปุ่ม "Start Animation" จะเห็นข้อความกะพริบ (blink) ตามที่กำหนดใน blink.xml