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

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

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

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);

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

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

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