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

ลองใช้วิธีแบบ Compose
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 ได้ที่สร้างภาพเคลื่อนไหวโดยใช้ ObjectAnimator

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

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

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

คลาส ObjectAnimator มีตัวสร้างที่ช่วยให้คุณเคลื่อนไหวพิกัด โดยใช้พร็อพเพอร์ตี้ 2 รายการขึ้นไปพร้อมกันตามเส้นทาง ตัวอย่างเช่น Animator ต่อไปนี้ใช้ออบเจ็กต์ 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) โดยอิงตามเส้นโค้งเบซิเยร์หรือออบเจ็กต์Path ตัวอย่าง Android ในเอกสารประกอบเกี่ยวกับ Material Design สำหรับ การค่อยๆ เปลี่ยน ใช้ PathInterpolator

PathInterpolator มีตัวสร้างที่อิงตามเส้นโค้งเบซิเยร์ประเภทต่างๆ เส้นโค้งเบซิเยร์ทั้งหมดมีจุดเริ่มต้นและจุดสิ้นสุดที่กำหนดไว้ที่ (0,0) และ (1,1) ตามลำดับ อาร์กิวเมนต์เครื่องมือสร้างอื่นๆ จะขึ้นอยู่กับประเภทของเส้นโค้งเบซิเยร์ ที่สร้างขึ้น

ตัวอย่างเช่น สำหรับเส้นโค้ง Bézier กำลังสอง คุณจะต้องระบุเฉพาะพิกัด X และ Y ของจุดควบคุม 1 จุด

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

ซึ่งจะสร้างเส้นโค้งการค่อยๆ เปลี่ยนที่เริ่มอย่างรวดเร็วและชะลอตัวลงเมื่อใกล้ถึงจุดสิ้นสุด

ในทำนองเดียวกัน ตัวสร้างฟังก์ชัน Cubic 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();
}

ซึ่งจะสร้างเส้นโค้งการค่อยๆ เปลี่ยนแบบเดียวกันกับตัวอย่าง Cubic Bézier แต่จะใช้ 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();