วัตถุบนหน้าจอมักจะต้องเปลี่ยนตำแหน่งอันเนื่องมาจากการโต้ตอบของผู้ใช้ หรือ การประมวลผลเบื้องหลัง แทนที่จะอัปเดตออบเจ็กต์ ซึ่งทำให้กะพริบจากบริเวณหนึ่งไปยังอีกบริเวณหนึ่ง ใช้ภาพเคลื่อนไหวเพื่อ ให้ย้ายโฆษณาจากตำแหน่งเริ่มต้นไปยังตำแหน่งสิ้นสุด
วิธีหนึ่งที่ Android จะช่วยให้คุณสามารถเปลี่ยนตำแหน่งวัตถุบนหน้าจอของคุณคือการ
ด้วย ObjectAnimator
โปรดระบุตำแหน่งสิ้นสุดที่คุณ
ต้องการให้วัตถุอยู่กับที่
และระยะเวลาของภาพเคลื่อนไหว คุณสามารถ
ยังใช้ตัวการประมาณค่าเวลาเพื่อควบคุมการเร่งหรือการลดความเร็ว
ภาพเคลื่อนไหว
เปลี่ยนตำแหน่งมุมมองด้วย ObjectAnimator
ObjectAnimator
API ให้วิธีเปลี่ยนคุณสมบัติของข้อมูลพร็อพเพอร์ตี้ที่มีระยะเวลาตามที่ระบุ
เมธอดนี้มีเมธอดแบบคงที่ในการสร้างอินสแตนซ์ของ ObjectAnimator
ซึ่งขึ้นอยู่กับ
ประเภทของแอตทริบิวต์ที่คุณกำลังทำให้เคลื่อนไหว เมื่อปรับตำแหน่งมุมมองใหม่ใน
ให้ใช้แอตทริบิวต์ translationX
และ translationY
ต่อไปนี้คือตัวอย่างของ ObjectAnimator
ที่ย้ายมุมมองไปยังตำแหน่ง 100
พิกเซลจากด้านซ้ายของหน้าจอใน 2 วินาที:
Kotlin
ObjectAnimator.ofFloat(view, "translationX", 100f).apply { duration = 2000 start() }
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f); animation.setDuration(2000); animation.start();
ตัวอย่างนี้ใช้
ObjectAnimator.ofFloat()
เนื่องจากค่าการแปลต้องเป็นจำนวนลอยตัว พารามิเตอร์แรกคือ
มุมมองที่ต้องการให้เคลื่อนไหว พารามิเตอร์ที่ 2 คือพร็อพเพอร์ตี้ที่คุณ
เป็นภาพเคลื่อนไหว เนื่องจากมุมมองต้องเคลื่อนในแนวนอน translationX
พารามิเตอร์สุดท้ายคือค่าสิ้นสุดของภาพเคลื่อนไหว ด้วยวิธีนี้
เช่น ค่า 100 แสดงตำแหน่งที่มีจำนวนพิกเซลจากด้านซ้ายของ
หน้าจอ
วิธีการถัดไปจะระบุระยะเวลาที่ใช้ในการเล่นภาพเคลื่อนไหวเป็นมิลลิวินาที ด้วยวิธีนี้ เช่น ภาพเคลื่อนไหวจะทำงานเป็นเวลา 2 วินาที (2, 000 มิลลิวินาที)
วิธีสุดท้ายทำให้ภาพเคลื่อนไหวทำงาน ซึ่งจะอัปเดตตำแหน่งของมุมมอง บนหน้าจอ
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ ObjectAnimator
โปรดดูที่ภาพเคลื่อนไหวโดยใช้
ObjectAnimator
เพิ่มการเคลื่อนไหวแบบโค้ง
แม้ว่าการใช้ ObjectAnimator
จะสะดวก แต่ระบบจะเปลี่ยนตำแหน่งของ
มุมมองในแนวเส้นตรงระหว่างจุดเริ่มต้นและจุดสิ้นสุด สื่อการเรียนการสอนของชั้นเรียน
การออกแบบต้องใช้เส้นโค้งในการเคลื่อนไหวตามพื้นที่ของวัตถุบนหน้าจอและ
ระยะเวลาของภาพเคลื่อนไหว การใช้การเคลื่อนไหวแบบโค้งทำให้แอปดูเป็นวัสดุมากขึ้น
ขณะที่ทำให้ภาพเคลื่อนไหวน่าสนใจยิ่งขึ้น
กำหนดเส้นทางของคุณเอง
คลาส ObjectAnimator
มีตัวสร้างที่ช่วยให้คุณทำให้พิกัดเคลื่อนไหวได้
โดยใช้พร็อพเพอร์ตี้ 2 รายการขึ้นไปพร้อมเส้นทางพร้อมกัน สำหรับ
ตัวอย่างเช่น ผู้สร้างภาพเคลื่อนไหวต่อไปนี้ใช้
ออบเจ็กต์ Path
เพื่อทำให้เครื่องหมาย X และ Y เคลื่อนไหว
พร็อพเพอร์ตี้ของข้อมูลพร็อพเพอร์ตี้ ได้แก่
Kotlin
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { val path = Path().apply { arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true) } val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply { duration = 2000 start() } } else { // Create animator without using curved path }
Java
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Path path = new Path(); path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true); ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path); animator.setDuration(2000); animator.start(); } else { // Create animator without using curved path }
ภาพเคลื่อนไหวของเส้นโค้งมีลักษณะดังนี้
รูปที่ 1 ภาพเคลื่อนไหวของเส้นทางโค้ง
Interpolator
คือการใช้กราฟการค่อยๆ เปลี่ยน โปรดดู
เอกสารประกอบเกี่ยวกับ Material Design
เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับแนวคิดของเส้นโค้งในการค่อยๆ เปลี่ยน Interpolator
กำหนดวิธีการคำนวณค่าที่เจาะจงในภาพเคลื่อนไหวโดยเป็นฟังก์ชันของ
ระบบจะให้ทรัพยากร XML สำหรับเส้นโค้งพื้นฐาน 3 กราฟในส่วน
ข้อมูลจำเพาะของดีไซน์ Material
@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml
ใช้ PathInterpolator
PathInterpolator
คือเครื่องมืออินเตอร์โพลที่เปิดตัวใน Android 5.0 (API 21) โดยอิงตาม
เส้นโค้งเบซิเยร์ หรือ
ออบเจ็กต์ Path
รายการ ตัวอย่าง Android ในเอกสารประกอบดีไซน์ Material สำหรับ
การค่อยๆ เปลี่ยน
ใช้ PathInterpolator
PathInterpolator
มีตัวสร้างที่ใช้เส้นโค้งเบซิเยร์ประเภทต่างๆ
เส้นโค้งเบซิเยร์ทั้งหมดมีจุดเริ่มต้นและจุดสิ้นสุดคงที่ที่ (0,0)
และ (1,1)
ตามลำดับ อาร์กิวเมนต์ตัวสร้างอื่นๆ จะขึ้นอยู่กับประเภทของ Bézier
กำลังสร้างเส้นโค้ง
เช่น สำหรับเส้นโค้งเบซิเยร์รูปกำลังสอง จะมีเพียงพิกัด X และ Y เท่านั้น ต้องการจุดควบคุมหนึ่งจุด:
Kotlin
val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { PathInterpolator(0.67f, 0.33f) } else { LinearInterpolator() }
Java
Interpolator myInterpolator = null; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { myInterpolator = new PathInterpolator(0.67f, 0.33f); } else { myInterpolator = new LinearInterpolator(); }
ซึ่งจะสร้างเส้นโค้งในการค่อยๆ เปลี่ยนที่เริ่มต้นอย่างรวดเร็วและลดลง ใกล้ถึงช่วงสุดท้าย
เครื่องมือสร้าง Bézier ทรงลูกบาศก์มีจุดเริ่มต้นและจุดสิ้นสุดที่แน่นอนเหมือนกัน แต่ ต้องใช้จุดควบคุม 2 จุด ได้แก่
Kotlin
val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f) } else { LinearInterpolator() }
Java
Interpolator myInterpolator = null; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f); } else { myInterpolator = new LinearInterpolator(); }
นี่คือการใช้งานดีไซน์ Material ที่เน้น ชะลอตัว เส้นโค้งการค่อยๆ เปลี่ยน
คุณสามารถใช้ Path
ที่กําหนดเองเพื่อกำหนดเส้นโค้งเพื่อการควบคุมที่มากขึ้นได้
Kotlin
val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { val path = Path().apply { moveTo(0.0f, 0.0f) cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f) } PathInterpolator(path) } else { LinearInterpolator() }
Java
Interpolator myInterpolator = null; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Path path = new Path(); path.moveTo(0.0f, 0.0f); path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f); myInterpolator = new PathInterpolator(path); } else { myInterpolator = new LinearInterpolator(); }
ซึ่งจะสร้างกราฟการค่อยๆ เปลี่ยนแบบเดียวกันกับตัวอย่างเบซิเยร์รูปลูกบาศก์ แต่จะใช้
Path
แทน
นอกจากนี้คุณยังกำหนดตัวกำหนดช่วงเส้นทางเป็นทรัพยากร XML ได้ด้วย โดยทำดังนี้
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.5"
android:controlY1="0.7"
android:controlX2="0.1f"
android:controlY2="1.0f"/>
เมื่อสร้างออบเจ็กต์ PathInterpolator
แล้ว คุณสามารถส่งรายการดังกล่าวไปยัง
Animator.setInterpolator()
Animator
ใช้เครื่องมือประมาณเพื่อกำหนดเวลาหรือเส้นทาง
เส้นโค้งเมื่อเริ่มต้น
Kotlin
val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply { interpolator = myInterpolator start() }
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f); animation.setInterpolator(myInterpolator); animation.start();