สร้างภาพเคลื่อนไหวของกราฟิกที่ถอนออกได้

ลองใช้วิธีแบบ Compose

Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีใช้ภาพเคลื่อนไหวใน Compose

สร้างภาพเวกเตอร์ที่วาดได้เคลื่อนไหว →

รูปที่ 1 Drawable ที่เคลื่อนไหวได้

ในบางกรณี คุณอาจต้องสร้างภาพเคลื่อนไหว ซึ่งจะมีประโยชน์ในกรณีที่คุณต้องการแสดงภาพเคลื่อนไหวการโหลดที่กำหนดเองซึ่งประกอบด้วยรูปภาพหลายรูป หรือหากต้องการให้ไอคอนเปลี่ยนรูปร่างหลังจากที่ผู้ใช้ดำเนินการ Android มีตัวเลือก 2 แบบสำหรับการเคลื่อนไหว Drawable

ตัวเลือกแรกคือการใช้ AnimationDrawable ซึ่งจะช่วยให้คุณระบุไฟล์ Drawable แบบคงที่หลายไฟล์ที่แสดงทีละไฟล์เพื่อสร้างภาพเคลื่อนไหวได้ ตัวเลือกที่ 2 คือการใช้ AnimatedVectorDrawable ซึ่งช่วยให้คุณทำให้พร็อพเพอร์ตี้ ของ Vector Drawable เคลื่อนไหวได้

ใช้ AnimationDrawable

วิธีหนึ่งในการสร้างภาพเคลื่อนไหวคือการโหลดลำดับของทรัพยากรที่วาดได้ เช่น ม้วนฟิล์ม คลาส AnimationDrawable เป็นพื้นฐานสำหรับภาพเคลื่อนไหวที่วาดได้ประเภทนี้

คุณกำหนดเฟรมของภาพเคลื่อนไหวในโค้ดได้โดยใช้ AnimationDrawable Class API แต่การกำหนดเฟรมด้วยไฟล์ XML ไฟล์เดียวที่แสดงรายการเฟรมที่ประกอบกันเป็นภาพเคลื่อนไหวจะง่ายกว่า ไฟล์ XML สำหรับภาพเคลื่อนไหวประเภทนี้จะอยู่ในไดเรกทอรี res/drawable/ ของโปรเจ็กต์ Android ในกรณีนี้ คำสั่งจะระบุลำดับและระยะเวลาของ แต่ละเฟรมในภาพเคลื่อนไหว

ไฟล์ XML ประกอบด้วยองค์ประกอบ <animation-list> เป็นโหนดรูท และชุดโหนด <item> ย่อยที่แต่ละโหนดกำหนดเฟรม ซึ่งเป็นทรัพยากรที่วาดได้และระยะเวลาของเฟรม ต่อไปนี้คือตัวอย่างไฟล์ XML สำหรับภาพเคลื่อนไหว Drawable

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

ภาพเคลื่อนไหวนี้จะทำงานเป็นเวลา 3 เฟรม การตั้งค่าแอตทริบิวต์ android:oneshot ของรายการเป็น true จะทำให้รายการวนซ้ำ 1 ครั้งแล้วหยุดและค้างไว้ที่เฟรมสุดท้าย หากตั้งค่า android:oneshot เป็น false ภาพเคลื่อนไหวจะวนซ้ำ

หากบันทึก XML นี้เป็น rocket_thrust.xml ในไดเรกทอรี res/drawable/ ของโปรเจ็กต์ คุณจะเพิ่มเป็นภาพพื้นหลังใน View แล้วเรียก start() เพื่อให้เล่นได้ ต่อไปนี้คือตัวอย่างกิจกรรมที่เพิ่มภาพเคลื่อนไหวลงใน ImageView แล้วจึงเคลื่อนไหว เมื่อแตะหน้าจอ

Kotlin

private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

Java

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}

โปรดทราบว่าคุณไม่สามารถเรียกใช้start()เมธอดที่เรียกใช้ใน AnimationDrawable ระหว่างเมธอด onCreate() ของ Activity ได้ เนื่องจาก AnimationDrawable ยังไม่ได้เชื่อมต่อกับหน้าต่างอย่างสมบูรณ์ หากต้องการเล่นภาพเคลื่อนไหวทันทีโดยไม่ต้องมีการโต้ตอบ คุณสามารถเรียกใช้จากเมธอด onStart() ใน Activity ซึ่งจะเรียกใช้เมื่อ Android ทำให้มุมมองปรากฏบนหน้าจอ

ดูข้อมูลเพิ่มเติมเกี่ยวกับไวยากรณ์ XML รวมถึงแท็กและแอตทริบิวต์ที่ใช้ได้ที่แหล่งข้อมูลภาพเคลื่อนไหว

ใช้ AnimatedVectorDrawable

Vector Drawable เป็น Drawable ประเภทหนึ่งที่ปรับขนาดได้โดยไม่เกิดภาพแตกหรือเบลอ คลาส AnimatedVectorDrawableและ AnimatedVectorDrawableCompat เพื่อความเข้ากันได้แบบย้อนหลังช่วยให้คุณเคลื่อนไหว พร็อพเพอร์ตี้ของ VectorDrawable เช่น หมุนหรือเปลี่ยนข้อมูลเส้นทางเพื่อเปลี่ยนเป็น รูปภาพอื่น

โดยปกติแล้ว คุณจะกำหนด AnimatedVectorDrawable ในไฟล์ XML 3 ไฟล์ ดังนี้

• Vector Drawable ที่มีองค์ประกอบ <vector> ใน res/drawable/
• Vector Drawable ที่เคลื่อนไหวได้ซึ่งมีองค์ประกอบ <animated-vector> ใน res/drawable/
• ObjectAnimator อย่างน้อย 1 รายการที่มีองค์ประกอบ <objectAnimator> ใน res/animator/

ภาพวาดเวกเตอร์เคลื่อนไหวสามารถทำให้แอตทริบิวต์ขององค์ประกอบ <group> และ <path> เคลื่อนไหวได้ องค์ประกอบ <group> กำหนดชุดเส้นทางหรือกลุ่มย่อย และองค์ประกอบ <path> กำหนดเส้นทางที่จะวาด

เมื่อกำหนด Vector Drawable ที่ต้องการเคลื่อนไหว ให้ใช้แอตทริบิวต์ android:name เพื่อกำหนดชื่อที่ไม่ซ้ำกันให้กับกลุ่มและเส้นทาง เพื่อให้คุณอ้างอิงกลุ่มและเส้นทางเหล่านั้นจากคำจำกัดความของ Animator ได้ เช่น

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

คำจำกัดความของ AnimatedVectorDrawable จะอ้างอิงถึงกลุ่มและเส้นทางใน Vector Drawable ตามชื่อของกลุ่มและเส้นทาง

res/drawable/animatorvectordrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

คำจำกัดความของภาพเคลื่อนไหวแสดงถึงออบเจ็กต์ ObjectAnimator หรือ AnimatorSet ออบเจ็กต์เคลื่อนไหวแรกในตัวอย่างนี้จะหมุนกลุ่มเป้าหมาย 360 องศา

res/animator/rotation.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>

Animator ตัวที่ 2 ในตัวอย่างนี้จะเปลี่ยนเส้นทางของ Vector Drawable จากรูปร่างหนึ่งไปเป็นอีกรูปร่างหนึ่ง เส้นทางต้องเข้ากันได้สำหรับการมอร์ฟ โดยต้องมีจำนวนคำสั่งเท่ากัน และมีจำนวนพารามิเตอร์เท่ากันสำหรับแต่ละคำสั่ง

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

AnimatedVectorDrawable ที่ได้มีดังนี้

รูปที่ 2 AnimatedVectorDrawable

ตัวอย่าง Animated Vector Drawable (AVD)

เครื่องมือ Animated Vector Drawable ใน Android Studio ช่วยให้คุณดูตัวอย่างทรัพยากร Drawable ที่เคลื่อนไหวได้ เครื่องมือนี้ช่วยให้คุณดูตัวอย่างทรัพยากร <animation-list>, <animated-vector> และ <animated-selector> ใน Android Studio และช่วยให้ปรับแต่งภาพเคลื่อนไหวที่กำหนดเองได้ง่ายขึ้น

รูปที่ 3 เครื่องมือ Animated Vector Drawable ใน Android Studio

ดูข้อมูลเพิ่มเติมได้ที่เอกสารอ้างอิง API สำหรับ AnimatedVectorDrawable