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

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

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

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

ใช้ AnimationDrawable

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

คุณกำหนดเฟรมของภาพเคลื่อนไหวในโค้ดได้โดยใช้ AnimationDrawable 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 จะวนเป็นวงกลมครั้งเดียว จากนั้นหยุดค้างไว้ ในเฟรมสุดท้าย หากคุณตั้งค่า 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 รวมถึงแท็กและแอตทริบิวต์ที่ใช้ได้ได้ที่ทรัพยากรภาพเคลื่อนไหว

ใช้ Animated VectorDrawable

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

ปกติแล้วคุณจะกำหนดเวกเตอร์ที่เคลื่อนไหวได้ในไฟล์ XML 3 ไฟล์ดังนี้

  • เวกเตอร์ที่วาดได้โดยมีองค์ประกอบ <vector> ใน res/drawable/
  • เวกเตอร์แบบเคลื่อนไหวที่วาดได้ด้วยองค์ประกอบ <animated-vector> ใน res/drawable/
  • ผู้สร้างภาพเคลื่อนไหวออบเจ็กต์อย่างน้อย 1 รายการที่มีองค์ประกอบ <objectAnimator> ใน res/animator/

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

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

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>

คำจำกัดความของเวกเตอร์ที่เคลื่อนไหวได้แบบวาดได้หมายถึงกลุ่มและเส้นทางในเวกเตอร์ที่ถอนออกได้ ตามชื่อ:

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

<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

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

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

แสดงตัวอย่าง Vector Drawable (AVD) แบบภาพเคลื่อนไหว

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

ผู้ใช้ดูตัวอย่างและเล่นภาพเคลื่อนไหวใน Android Studio
รูปที่ 3 เครื่องมือ Animated Vector Drawable ใน Android Studio

สำหรับข้อมูลเพิ่มเติม โปรดดูข้อมูลอ้างอิง API สำหรับ AnimatedVectorDrawable