Spring Animation — ฟิสิกส์ของสปริงในแอนิเมชัน

Spring Animation คืออะไร?

Spring Animation คือแอนิเมชันที่มีการเคลื่อนที่อธิบายโดยสมการฮาร์มอนิกออสซิลเลเตอร์แบบหน่วง แทนที่จะประมาณค่าจาก 0 ถึง 1 ในเวลาที่กำหนด Spring Animation จะคำนวณตำแหน่งของวัตถุในแต่ละช่วงเวลาตามพารามิเตอร์ทางฟิสิกส์: มวล ความแข็ง การหน่วง และความเร็วเริ่มต้น ผลลัพธ์คือการเคลื่อนไหวที่เป็นธรรมชาติและเป็นอินทรีย์ ซึ่งไม่ดู "เชิงกล"

แตกต่างจาก เส้นโค้ง Easing (easeIn, easeOut, cubic-bezier) ซึ่งมีระยะเวลาคงที่และวิถีถูกกำหนดไว้ล่วงหน้า Spring Animation ปรับตัวแบบไดนามิก: หากค่าเป้าหมายเปลี่ยนแปลงระหว่างแอนิเมชัน สปริงจะคำนวณวิถีใหม่จากตำแหน่งปัจจุบันอย่างราบรื่น สิ่งนี้สำคัญโดยเฉพาะสำหรับแอนิเมชันที่อาจถูกขัดจังหวะ — ลากเพื่อปิด ดึงเพื่อรีเฟรช การ์ดที่ปัดได้

ตามข้อมูลของ Apple WWDC 2025 การใช้แอนิเมชันสปริงแทนเส้นโค้งคงที่ช่วยลดความหน่วงที่รับรู้ได้ 30–50% เนื่องจากการเร่งความเร็วตามธรรมชาติในช่วงเริ่มต้นและการชะลอตัวราบรื่นในช่วงท้าย Spring Animation ได้รับคำแนะนำสำหรับแอนิเมชันที่เกี่ยวข้องกับการเคลื่อนไหว: การย้าย การปรับขนาด การปรากฏ/การหายไป

พารามิเตอร์ทางฟิสิกส์ของสปริง: damping และ stiffness

พฤติกรรมของสปริงถูกกำหนดโดยพารามิเตอร์สี่ตัว Stiffness (ความแข็ง) คือแรงดึงกลับสู่สมดุล: ค่า 100–300 ให้สปริงนุ่มสำหรับรายการ 500–1000 ให้สปริงแข็งสำหรับปุ่มและสวิตช์ Damping (การหน่วง) คือความต้านทานการเคลื่อนที่: 0 — การแกว่งไม่สิ้นสุด, 0.1–0.5 — การแกว่งแบบหน่วงที่สังเกตได้ (เอฟเฟกต์การเด้ง), 1 — การหน่วงวิกฤต (ไม่มีการแกว่ง, การชะลอตัวราบรื่น)

การหน่วงวิกฤต (damping = 1.0) เป็นโหมดที่เหมาะสมที่สุดสำหรับแอนิเมชัน UI ส่วนใหญ่: วัตถุกลับสู่ตำแหน่งเป้าหมายเร็วที่สุดโดยไม่เกินเลย สำหรับเอฟเฟกต์การเด้ง (เช่น ดึงเพื่อรีเฟรช) ให้ใช้ damping = 0.3–0.5 สำหรับการปรากฏของหน้าต่างโมดัล — damping = 0.6–0.8 โดยมี stiffness = 300–500 มวลไม่ค่อยถูกเปลี่ยนแปลง — ค่ามาตรฐาน 1.0 เหมาะกับเกือบทุกกรณี

Spring Animation ใน iOS (Swift)

บน iOS Spring Animation มีให้ใช้งานผ่าน UIView.animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:) ตั้งแต่ iOS 7 และ CASpringAnimation (Core Animation) ตั้งแต่ iOS 9 เวอร์ชัน UIView ใช้ง่ายกว่าและเป็นที่นิยมสำหรับการเคลื่อนไหวคุณสมบัติของ View (transform, alpha, center) CASpringAnimation แม่นยำกว่าและให้การเข้าถึง stiffness, damping และ mass เป็นคุณสมบัติแยกต่างหาก

import UIKit

// UIView.animate ด้วยพารามิเตอร์สปริง
let originalCenter = view.center

UIView.animate(
    withDuration: 0.8,
    delay: 0,
    usingSpringWithDamping: 0.5,
    initialSpringVelocity: 0.3,
    options: [.curveEaseInOut, .allowUserInteraction]
) {
    view.center = CGPoint(x: originalCenter.x + 100, y: originalCenter.y)
    view.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
} completion: { _ in
    UIView.animate(withDuration: 0.3) {
        view.transform = .identity
    }
}

// CASpringAnimation — การควบคุมพารามิเตอร์อย่างแม่นยำ
let spring = CASpringAnimation()
spring.keyPath = "transform.scale"
spring.fromValue = 1.0
spring.toValue = 1.5
spring.stiffness = 300
spring.damping = 10
spring.mass = 1.0
spring.initialVelocity = 5.0

"> CASpringAnimation.settlingDuration — ระยะเวลาที่คำนวณได้
spring.duration = spring.settlingDuration
view.layer.add(spring, forKey: "scaleSpring")

CASpringAnimation.settlingDuration เป็นคุณสมบัติพิเศษของ Core Animation ที่คำนวณระยะเวลาแอนิเมชันขั้นต่ำที่สปริงต้องใช้ในการเข้าสู่สมดุล ซึ่งหมายความว่าคุณไม่จำเป็นต้องเลือกระยะเวลาด้วยตนเอง — ระบบจะกำหนดเองว่าการหน่วงการแกว่งจะใช้เวลาเท่าใด สำหรับ UIView.animate ระยะเวลาถูกกำหนดอย่างชัดเจน และ damping 0.3–0.7 ให้เอฟเฟกต์การเด้งที่สังเกตได้ สำหรับการรวมกับ UIPanGestureRecognizer ให้ส่ง velocityRecognizer.velocity(in: view) เป็น initialSpringVelocity — เพื่อให้แอนิเมชันดำเนินต่อเนื่องตามการเคลื่อนไหวของนิ้วด้วยความเร็วเดียวกัน

Spring Animation ใน Android (Kotlin)

บน Android SpringAnimation เป็นส่วนหนึ่งของไลบรารี AndroidX Dynamic Animation (androidx.dynamicanimation) คลาสหลักคือ SpringAnimation ซึ่งเคลื่อนไหวคุณสมบัติ float ใด ๆ ของ View หรือวัตถุที่กำหนดเอง พารามิเตอร์ถูกกำหนดผ่าน SpringForce — stiffness (ค่าเริ่มต้น STIFFNESS_MEDIUM = 600) และ dampingRatio (ค่าเริ่มต้น DAMPING_RATIO_MEDIUM_BOUNCY = 0.5)

// build.gradle.kts
implementation("androidx.dynamicanimation:dynamicanimation:1.1.0")

// Kotlin: SpringAnimation พร้อม SpringForce ที่กำหนดเอง
import androidx.dynamicanimation.animation.SpringAnimation
import androidx.dynamicanimation.animation.SpringForce
import androidx.dynamicanimation.animation.FloatPropertyCompat

val springAnim = SpringAnimation(myView, SpringAnimation.TRANSLATION_X).apply {
    spring = SpringForce().apply {
        stiffness = SpringForce.STIFFNESS_LOW // 200.0f
        dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY // 0.2f
        finalPosition = 300f
    }
    start()
}

// SpringAnimation ด้วยความเร็วเริ่มต้นจากท่าทาง
myView.setOnTouchListener { _, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            springAnim.cancel()
            false
        }
        MotionEvent.ACTION_UP -> {
            val velocity = velocityTracker?.getXVelocity() ?: 0f
            SpringAnimation(myView, SpringAnimation.TRANSLATION_X).apply {
                spring = SpringForce(0f) "> กลับสู่ตำแหน่งเดิม
                setStartVelocity(velocity)
                start()
            }
            true
        }
        else -> false
    }
}

"> SpringAnimation สำหรับคุณสมบัติที่กำหนดเอง
val customAnim = SpringAnimation(
    myObject,
    object : FloatPropertyCompat<MyClass>("progress") {
        override fun getValue(obj: MyClass): Float = obj.progress
        override fun setValue(obj: MyClass, value: Float) { obj.progress = value }
    }
).apply { start() }

ค่าคงที่ SpringForce: STIFFNESS_LOW (200), STIFFNESS_MEDIUM (600), STIFFNESS_HIGH (1800); DAMPING_RATIO_HIGH_BOUNCY (0.2), DAMPING_RATIO_MEDIUM_BOUNCY (0.5), DAMPING_RATIO_LOW_BOUNCY (0.75), DAMPING_RATIO_NO_BOUNCY (1.0) สำหรับ RecyclerView ที่มีแอนิเมชันรายการ ให้ใช้ SpringAnimation กับ DynamicAnimation.OnAnimationEndListener เพื่อปล่อยทรัพยากร สำหรับการเคลื่อนไหวหลายคุณสมบัติ ให้ใช้ SpringAnimation.createFor(view, property)

Jetpack Compose: เริ่มต้นจาก Compose 1.0 แอนิเมชันสปริงมีให้ใช้งานผ่าน Animatable ด้วย spring() — animationSpec = spring(dampingRatio = 0.5f, stiffness = 300f) นี่เป็นวิธีที่แนะนำสำหรับโปรเจกต์ Compose เนื่องจาก SpringAnimation จาก DynamicAnimation เข้ากันได้กับระบบ View เท่านั้น เวอร์ชัน Compose ของ spring ใช้เอนจินฟิสิกส์เดียวกัน แต่ทำงานในบริบทของ Compose Animation System และหยุดชั่วคราวโดยอัตโนมัติเมื่อแยกออก

Spring Animation กับ Easing: เมื่อใดควรเลือกอะไร

Spring Animation และเส้นโค้ง Easing (easeInOut, FastOutSlowIn, decelerate) แก้ปัญหาที่แตกต่างกัน เส้นโค้ง Easing เป็นวิถีที่กำหนดทางคณิตศาสตร์ด้วยเวลาคงที่ Spring เป็นการจำลองทางฟิสิกส์ที่เวลาขึ้นอยู่กับพารามิเตอร์และเงื่อนไขเริ่มต้น สำหรับแอนิเมชันการปรากฏ/หายไปอย่างง่าย เส้นโค้ง Easing ก็เพียงพอ สำหรับแอนิเมชันที่เกี่ยวข้องกับการเคลื่อนไหวของผู้ใช้ (ลาก ปัด เลื่อน) Spring Animation ให้การตอบสนองที่เป็นธรรมชาติมากกว่า

รูปแบบที่ควรหลีกเลี่ยง: อย่าใช้ Spring Animation สำหรับการเคลื่อนไหวพารามิเตอร์เลย์เอาต์ (ความกว้าง/ความสูงของ View ผ่าน LayoutParams) — สิ่งนี้ทำให้เกิดการคำนวณลำดับชั้นใหม่ทุกเฟรม นำไปสู่การกระตุกและ FPS ลดลง สำหรับแอนิเมชันสี เส้นโค้ง Easing ก็เหมาะสมกว่าเช่นกัน สำหรับแอนิเมชันตำแหน่งเลื่อน ให้ใช้ Scroller ของระบบพร้อม fling — Spring Animation ไม่มีข้อดีที่นี่ เพื่อประสิทธิภาพสูงสุดบน Android ให้จำกัดจำนวนอินสแตนซ์ SpringAnimation ที่ทำงานพร้อมกันไว้ที่ 10–15