ดูภาพเคลื่อนไหว

ลองใช้วิธีเขียน

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

เคลื่อนไหวพร็อพเพอร์ตี้ →

คุณสามารถใช้ระบบมุมมองภาพเคลื่อนไหวเพื่อสร้างภาพเคลื่อนไหว 2 ภาพใน "มุมมอง" ได้ ภาพเคลื่อนไหวทวีน (Tween) จะคำนวณภาพเคลื่อนไหวด้วยข้อมูล เช่น จุดเริ่มต้น จุดสิ้นสุด ขนาด การหมุน และลักษณะทั่วไปอื่นๆ ของภาพเคลื่อนไหว

ภาพเคลื่อนไหว 2 ภาพสามารถทำการแปลงรูปแบบง่ายๆ (ตำแหน่ง ขนาด การหมุน และความโปร่งใส) กับเนื้อหาของออบเจ็กต์ View ได้ ดังนั้น หากมีออบเจ็กต์ TextView คุณจะย้าย หมุน ขยาย หรือย่อข้อความได้ หากรูปภาพมีภาพพื้นหลัง ภาพพื้นหลังจะเปลี่ยนไปพร้อมข้อความ animation package จะระบุชั้นเรียนทั้งหมดที่ใช้ในภาพเคลื่อนไหวสำหรับเด็กตอนต้น

ลำดับวิธีการเกี่ยวกับภาพเคลื่อนไหวจะกำหนดภาพเคลื่อนไหว Tween ที่กำหนดโดยโค้ด XML หรือ Android เช่นเดียวกับการกำหนดเลย์เอาต์ เราขอแนะนำให้ใช้ไฟล์ XML เนื่องจากสามารถอ่านได้ นำกลับมาใช้ซ้ำ และสลับได้ง่ายกว่าการฮาร์ดโค้ดภาพเคลื่อนไหว ในตัวอย่างด้านล่าง เราใช้ XML (หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดภาพเคลื่อนไหวในโค้ดแอปพลิเคชันแทน XML โปรดดูคลาส AnimationSet และคลาสย่อย Animation อื่นๆ)

คำสั่งภาพเคลื่อนไหวจะกำหนดการเปลี่ยนรูปแบบที่คุณต้องการให้เกิดขึ้น เวลาที่จะเกิด และระยะเวลาที่ควรใช้ การเปลี่ยนรูปแบบอาจเป็นแบบเรียงตามลำดับหรือพร้อมกัน ตัวอย่างเช่น คุณสามารถให้เนื้อหาของ TextView ย้ายจากซ้ายไปขวา แล้วหมุน 180 องศา หรือให้ข้อความย้ายและหมุนพร้อมกันก็ได้ การเปลี่ยนรูปแบบแต่ละรายการจะใช้ชุดพารามิเตอร์ที่เฉพาะเจาะจงสําหรับการเปลี่ยนรูปแบบดังกล่าว (ขนาดเริ่มต้นและขนาดสุดท้ายสําหรับการเปลี่ยนขนาด มุมเริ่มต้นและมุมสิ้นสุดสําหรับการหมุน และอื่นๆ) รวมถึงชุดพารามิเตอร์ทั่วไป (เช่น เวลาเริ่มต้นและระยะเวลา) หากต้องการให้การเปลี่ยนรูปแบบหลายรายการเกิดขึ้นพร้อมกัน ให้กำหนดเวลาเริ่มต้นเดียวกัน หากต้องการให้เปลี่ยนรูปแบบตามลำดับ ให้คำนวณเวลาเริ่มต้นบวกระยะเวลาของการเปลี่ยนรูปแบบก่อนหน้า

ไฟล์ XML ภาพเคลื่อนไหวอยู่ในไดเรกทอรี res/anim/ ของโปรเจ็กต์ Android ไฟล์ต้องมีองค์ประกอบรูทรายการเดียว ซึ่งอาจเป็น <alpha>, <scale>, <translate>, <rotate>, องค์ประกอบอินเทอร์โพเลเตอร์ หรือองค์ประกอบ <set> รายการเดียวที่เก็บกลุ่มองค์ประกอบเหล่านี้ (ซึ่งอาจรวมถึง <set> รายการอื่น) โดยค่าเริ่มต้น ระบบจะใช้คำสั่งภาพเคลื่อนไหวทั้งหมดพร้อมกัน หากต้องการให้แสดงตามลำดับ คุณต้องระบุแอตทริบิวต์ startOffset ดังที่แสดงในตัวอย่างด้านล่าง

XML ต่อไปนี้จาก ApiDemos รายการใดรายการหนึ่งใช้เพื่อยืด จากนั้นหมุนและบิดออบเจ็กต์ View พร้อมกัน

<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

พิกัดหน้าจอ (ในตัวอย่างนี้ไม่ได้ใช้) คือ (0,0) ที่มุมซ้ายบน และจะเพิ่มขึ้นเมื่อคุณเลื่อนลงไปด้านล่างและไปทางขวา

ค่าบางอย่าง เช่น pivotX สามารถระบุโดยสัมพันธ์กับออบเจ็กต์เองหรือสัมพันธ์กับออบเจ็กต์หลัก ตรวจสอบว่าใช้รูปแบบที่ถูกต้องตามที่ต้องการ ("50" สำหรับ 50% เมื่อเทียบกับเทมเพลตหลัก หรือ "50%" สำหรับ 50% เมื่อเทียบกับรายการหลัก)

คุณกําหนดวิธีการนําการเปลี่ยนรูปแบบไปใช้ในช่วงเวลาหนึ่งๆ ได้โดยกําหนด Interpolator Android มีคลาสย่อย Interpolator หลายคลาสที่ระบุเส้นโค้งความเร็วต่างๆ เช่น AccelerateInterpolator ที่บอกให้การเปลี่ยนรูปแบบเริ่มต้นช้าๆ แล้วค่อยๆ เร็วขึ้น โดยแต่ละแอตทริบิวต์มีค่าแอตทริบิวต์ที่ใช้ใน XML ได้

เมื่อบันทึก XML นี้เป็น hyperspace_jump.xml ในไดเรกทอรี res/anim/ ของโปรเจ็กต์ โค้ดต่อไปนี้จะอ้างอิงและนำไปใช้กับออบเจ็กต์ ImageView จากเลย์เอาต์

Kotlin

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
    findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}

Java

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

นอกเหนือจาก startAnimation() แล้ว คุณยังกำหนดเวลาเริ่มต้นของภาพเคลื่อนไหวด้วย Animation.setStartTime() แล้วกำหนดภาพเคลื่อนไหวให้กับมุมมองด้วย View.setAnimation() ได้ด้วย

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

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