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

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

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

แอนิเมชันพร็อพเพอร์ตี้ →

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

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

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

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

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

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

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