ย้ายมุมมองที่มีภาพเคลื่อนไหว

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

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

เคลื่อนไหวตำแหน่ง →

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

วิธีหนึ่งที่ 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 ได้ที่ Animate using ObjectAnimator

เพิ่มการเคลื่อนไหวแบบโค้ง

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

กำหนดเส้นทางของคุณเอง

คลาส 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 Design ดังนี้

• @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) โดยอิงตามเส้นโค้ง Bézier หรือออบเจ็กต์ Path ตัวอย่าง Android ในเอกสารดีไซน์ Material สำหรับการค่อยๆ เปลี่ยนใช้ PathInterpolator

PathInterpolator มีคอนสตรัคเตอร์ที่อิงตามเส้นโค้ง Bézier ประเภทต่างๆ เส้นโค้ง Bézier ทั้งหมดมีจุดเริ่มต้นและจุดสิ้นสุดที่ (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 Design

คุณสามารถใช้ 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();
}

การดำเนินการนี้จะสร้างเส้นโค้งการผ่อนปรนแบบเดียวกับตัวอย่าง Bézier แบบ 3 มิติ แต่จะใช้ 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();