![](https://developer.android.com/static/training/animation/videos/drawable-animation.gif?authuser=9&hl=th)
ในบางสถานการณ์ รูปภาพต้องเป็นภาพเคลื่อนไหว ซึ่งจะเป็นประโยชน์หากคุณต้องการแสดง ภาพเคลื่อนไหวการโหลดแบบกำหนดเอง ซึ่งประกอบด้วยรูปภาพหลายรูป หรือหากคุณต้องการให้ไอคอนเปลี่ยนตาม การดำเนินการ 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
:
AnimatedVectorDrawable
แสดงตัวอย่าง Vector Drawable (AVD) แบบภาพเคลื่อนไหว
เครื่องมือ Animated Vector Drawable ใน Android Studio ช่วยให้คุณดูตัวอย่างภาพเคลื่อนไหวได้
ทรัพยากรที่ถอนออกได้ เครื่องมือนี้ช่วยให้คุณดูตัวอย่าง <animation-list>
<animated-vector>
และ <animated-selector>
ทรัพยากรใน
Android Studio และช่วยให้คุณปรับแต่งภาพเคลื่อนไหวที่กำหนดเองได้ง่ายขึ้น
![ผู้ใช้ดูตัวอย่างและเล่นภาพเคลื่อนไหวใน Android Studio](https://developer.android.com/static/studio/images/releases/avd-preview.gif?authuser=9&hl=th)
สำหรับข้อมูลเพิ่มเติม โปรดดูข้อมูลอ้างอิง API สำหรับ
AnimatedVectorDrawable