Interpolator — คืออะไร, เส้นโค้งการแก้แอนิเมชันใน Android

Interpolator คืออะไร?

Interpolator — อินเทอร์เฟซใน Android ที่แมปค่าเศษส่วนของความคืบหน้าแอนิเมชัน (จาก 0.0 ถึง 1.0) ไปยังค่าจริงด้วยความเร็วที่ปรับเปลี่ยน หากแอนิเมชันใช้เวลา 300 มิลลิวินาที ระบบจะเรียก Interpolator สำหรับแต่ละเฟรม โดยส่งความคืบหน้าปัจจุบัน Interpolator ส่งค่าที่ปรับเปลี่ยนกลับมา — ตัวอย่างเช่น ด้วย AccelerateInterpolator ที่ 50% ของเวลา แอนิเมชันเดินทางไปเพียง ~25% ของเส้นทาง จำลองการเร่งความเร็ว

ในทางคณิตศาสตร์ Interpolator สามารถแสดงเป็นฟังก์ชัน f(t) โดยที่ t คือเวลาที่ทำให้เป็นมาตรฐาน [0, 1] และ f(t) คือค่าที่ทำให้เป็นมาตรฐาน [0, 1] (หรือกว้างกว่าสำหรับ Overshoot/Bounce) LinearInterpolator ส่งคืน f(t) = t — วัตถุเคลื่อนที่ด้วยความเร็วคงที่ AccelerateInterpolator ประมาณ f(t) = t², DecelerateInterpolator ประมาณ f(t) = 1 − (1 − t)² ทำให้เริ่มต้นหรือสิ้นสุดอย่างนุ่มนวล ใน Android Animation Framework Interpolator ถูกนำไปใช้ทั้ง ValueAnimator, ObjectAnimator และ ViewPropertyAnimator โดยให้แนวทางแบบรวมสำหรับการควบคุมความเร็วในทุกระดับ

อินเทอร์โพเลเตอร์ในตัวของ Android

Android มีอินเทอร์โพเลเตอร์ในตัว 9 ตัว แต่ละตัวมีแบบจำลองทางคณิตศาสตร์ของตัวเอง การเลือกอินเทอร์โพเลเตอร์กำหนดลักษณะของแอนิเมชัน: ความเป็นกายภาพ (Bounce), ความยืดหยุ่น (Overshoot) หรือความนุ่มนวล (AccelerateDecelerate)

อินเทอร์โพเลเตอร์แต่ละตัวมีการประกาศ XML ใน res/interpolator/ และคลาส Kotlin ในแพ็คเกจ android.view.animation AccelerateDecelerateInterpolator ถูกใช้บ่อยที่สุด: เส้นโค้งของมันคล้ายกับฟังก์ชัน easing ease-in-out ใน CSS สำหรับแอป Android ที่ใช้ Material Design แนะนำให้ใช้ OvershootInterpolator สำหรับปุ่มดำเนินการลอย (FAB) — มันสร้างเอฟเฟกต์กระเด้งเมื่อปรากฏ

PathInterpolator: เส้นโค้งแบบกำหนดเอง

PathInterpolator — อินเทอร์โพเลเตอร์ที่ใช้เส้นโค้ง Bezier ซึ่งกำหนดผ่านออบเจ็กต์ Path ใช้งานได้ตั้งแต่ API 21 (Android 5.0) ช่วยให้ออกแบบเส้นโค้งความเร็วได้ด้วยภาพ — นักออกแบบวาดเส้นโค้ง นักพัฒนาถ่ายโอนไปยังโค้ดผ่านพิกัดจุดควบคุม รองรับเฉพาะ Bezier กำลังสามเท่านั้น (สองจุดควบคุม C1, C2)

เส้นโค้ง PathInterpolator เริ่มต้นที่จุด (0,0) เสมอและสิ้นสุดที่ (1,1) จุดควบคุมกำหนดรูปร่าง: (x1, y1) — จุดเริ่มต้น, (x2, y2) — จุดสิ้นสุด ค่า x ต้องอยู่ในช่วง [0,1] — รับประกันความเป็นเอกภาพตามเวลา ค่า y สามารถออกนอก [0,1] — สร้างเอฟเฟกต์เกินหรือคาดการณ์ ตัวอย่างเช่น Material Design มาตรฐานใช้เส้นโค้ง fast-out-slow-in กับจุดควบคุม (0.4, 0.0, 0.2, 1.0) ที่ IT Sectr เราสร้าง PathInterpolator แบบกำหนดเองสำหรับแต่ละระบบออกแบบ — รับประกันแอนิเมชันที่สอดคล้องกันทุกหน้าจอ

การสร้าง Interpolator ของคุณเอง

หากอินเทอร์โพเลเตอร์ในตัวไม่ครอบคลุมสถานการณ์ของคุณ Android อนุญาตให้สร้างแบบกำหนดเองโดยใช้อินเทอร์เฟซ TimeInterpolator เมธอดเดียวคือ getInterpolation(input: Float): Float Input คือความคืบหน้าแอนิเมชันปัจจุบันจาก 0 ถึง 1; output คือค่าที่ปรับเปลี่ยน Output สามารถออกนอก [0,1] สำหรับเอฟเฟกต์เกินหรือกระเด้ง

อินเทอร์โพเลเตอร์แบบกำหนดเองทั่วไป: เอฟเฟกต์กระเด้งแบบหน่วง (เกิน 1.0 และกลับมา), เอฟเฟกต์ยืดหยุ่น (การหน่วงแบบไซน์), อินเทอร์โพเลเตอร์แบบขั้น (การกระโดดแบบไม่ต่อเนื่อง) อินเทอร์โพเลเตอร์แบบกำหนดเองยังสามารถกำหนดผ่าน XML โดยใช้แท็ก <interpolator> และระบุคลาส Android Studio มีการแสดงตัวอย่าง Interpolator ในตัวใน Layout Inspector — มันแสดงเส้นโค้งจริงสำหรับอินเทอร์โพเลเตอร์ที่เลือก ทำให้การดีบักง่ายขึ้น

ตัวอย่างโค้ดใน Kotlin

ตัวอย่าง 1: AccelerateDecelerateInterpolator กับ ValueAnimator

แอนิเมชันสเกลปุ่มพื้นฐานโดยใช้อินเทอร์โพเลเตอร์แบบสมมาตร ValueAnimator เปลี่ยนค่าจาก 1.0 เป็น 1.2 และกลับ และ AccelerateDecelerateInterpolator ทำให้การเคลื่อนที่นุ่มนวล

import android.animation.ValueAnimator
import android.view.animation.AccelerateDecelerateInterpolator
import android.view.View

fun View.pulseAnimation() {
    ValueAnimator.ofFloat(1.0f, 1.2f).apply {
        duration = 300
        interpolator = AccelerateDecelerateInterpolator()
        repeatCount = 1
        repeatMode = ValueAnimator.REVERSE

        addUpdateListener { animator ->
            val scale = animator.animatedValue as Float
            this@pulseAnimation.scaleX = scale
            this@pulseAnimation.scaleY = scale
        }

        start()
    }
}

AccelerateDecelerateInterpolator สร้างการเร่งความเร็วที่นุ่มนวลในตอนเริ่มต้นและการชะลอที่นุ่มนวลในตอนจบ โหมด REVERSE ทำซ้ำแอนิเมชันในทิศทางตรงกันข้าม สร้างเอฟเฟกต์การเต้นเป็นจังหวะ รูปแบบนี้ใช้สำหรับปุ่มดำเนินการ ดึงดูดความสนใจของผู้ใช้ไปยังองค์ประกอบอินเทอร์เฟซที่สำคัญ

ตัวอย่าง 2: PathInterpolator กับเส้นโค้งแบบกำหนดเอง

เส้นโค้งแบบกำหนดเองพร้อมเอฟเฟกต์เกิน — วัตถุเกินตำแหน่งเป้าหมาย 10% และกลับมา จุดควบคุม (0.4, 0.0, 0.6, 1.3) กำหนดการเข้าแบบเร่งด้วยการเกิน

import android.animation.ObjectAnimator
import android.graphics.Path
import android.view.animation.PathInterpolator
import android.view.View

fun View.slideWithOvershoot() {
    val path = Path().apply {
        cubicTo(0.4f, 0.0f, 0.6f, 1.3f, 1.0f, 1.0f)
    }
    val interpolator = PathInterpolator(path)

    ObjectAnimator.ofFloat(this, "translationY", 200f, 0f).apply {
        duration = 400
        interpolator = interpolator
        start()
    }
}

PathInterpolator รับ Path ที่มีเส้นโค้ง Bezier กำลังสาม ในตัวอย่าง องค์ประกอบเกินตำแหน่งเป้าหมาย (y=1.3 ที่ 60% ของเวลา) และกลับไปยังตำแหน่งสุดท้าย Path ต้องเป็นเอกภาพอย่างเคร่งครัดตามแกน x มิฉะนั้นแอนิเมชันจะย้อนกลับ สำหรับการตรวจสอบ ให้ใช้ Layout Inspector ใน Android Studio

ตัวอย่าง 3: BounceInterpolator แบบกำหนดเอง

อินเทอร์โพเลเตอร์แบบกำหนดเองพร้อมเอฟเฟกต์กระเด้งแบบหน่วง การใช้งานผ่าน TimeInterpolator กับสี่รอบการหน่วง

import android.animation.TimeInterpolator

class DampedBounceInterpolator : TimeInterpolator {

    private val cycles = 4
    private val damping = 0.85f

    override fun getInterpolation(input: Float): Float {
        val t = input * cycles
        val decay = Math.pow(damping.toDouble(), cycles.toDouble()).toFloat()
        val peak = t - (Math.floor(t.toDouble())).toFloat()
        val bounce = Math.sin(peak * Math.PI).toFloat()
        return 1f - bounce * decay * (1f - input)
    }
}

DampedBounceInterpolator แบบกำหนดเองสร้างการกระเด้งแบบหน่วง 4 ครั้งด้วยค่าสัมประสิทธิ์การหน่วง 0.85 เมธอด getInterpolation รับอินพุตเชิงเส้นและส่งค่ากลับพร้อมเอฟเฟกต์สปริง ที่ IT Sectr เราใช้อินเทอร์โพเลเตอร์นี้สำหรับแอนิเมชันการปรากฏของการแจ้งเตือน — การกระเด้งสร้างความรู้สึกทางกายภาพและดึงดูดความสนใจ