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

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

วิธีหนึ่งที่ 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();