แอนิเมชั่นฤดูใบไม้ผลิ: ฟิสิกส์ของการเคลื่อนไหวของ UI ตามธรรมชาติ
เรียนรู้วิธีการทำงานของ Spring Animation ในการออกแบบ UI ทำความเข้าใจเรื่องความแข็ง การหน่วง มวล และความเร็ว สร้างแอนิเมชั่นตามฟิสิกส์ที่เป็นธรรมชาติสำหรับ React และ SwiftUI
หลัก Takeaway
แอนิเมชัน Spring จำลองการเคลื่อนไหวของ UI โดยใช้พฤติกรรมทางกายภาพของระบบแมสสปริง-แดมเปอร์ โดยที่การเคลื่อนไหวของส่วนประกอบถูกควบคุมโดยความแข็ง (แรงดึงไปยังส่วนที่เหลือ) การหน่วง (สูญเสียพลังงานเร็วแค่ไหน) และมวล (ความเฉื่อยที่บรรทุกได้มากน้อยเพียงใด) สปริงจะตอบสนองต่อความเร็วของผู้ใช้โดยอัตโนมัติ ซึ่งแตกต่างจากแอนิเมชั่นตามระยะเวลา และสามารถถูกรบกวนได้ทุกจุดโดยไม่ทำให้ภาพไม่ต่อเนื่อง
เหตุใดสปริงจึงให้ความรู้สึกเป็นธรรมชาติมากกว่าเส้นโค้งระยะเวลา
โลกทางกายภาพไม่มีแนวคิดเช่น "ความง่ายในการเข้า-ออก" หรือ "ลูกบาศก์เบซิเยร์ (0.4, 0, 0.2, 1)" วัตถุทางกายภาพมีความเร่งเนื่องจากแรง และชะลอตัวลงเนื่องจากแรงเสียดทาน เมื่อลิ้นชักเลื่อนเปิดออก ก็มีโมเมนตัม; เมื่อคุณปล่อยมัน แรงเสียดทานจะทำให้มันหยุดนิ่ง ฟิสิกส์ของฤดูใบไม้ผลิจำลองความเป็นจริงทางกายภาพนี้ในซอฟต์แวร์ ซึ่งเป็นสาเหตุที่ iOS UIKit, Android Motion Compose และ ExodeUI ล้วนเป็นระบบแอนิเมชันที่เน้นฤดูใบไม้ผลิเป็นหลัก
อธิบายพารามิเตอร์สปริง
การทำความเข้าใจแต่ละพารามิเตอร์ช่วยให้คุณออกแบบความรู้สึกทางกายภาพที่คุณต้องการได้อย่างแท้จริง
ความฝืด (แรงดึง)
สปริงดึงเข้าหาค่าพักตัวแรงแค่ไหน ความแข็งสูง (600+) สร้าง UI ที่รวดเร็วและตอบสนองเช่นการตอบสนองการกดปุ่ม ความแข็งต่ำ (100–200) สร้างการเคลื่อนไหวที่ช้าและลอย เหมาะสำหรับการเปลี่ยนหน้าหรือองค์ประกอบแบบลอยโดยรอบ
การทำให้หมาด ๆ (แรงเสียดทาน)
สปริงสูญเสียพลังงานเท่าใดต่อรอบ เมื่อเกิดการหน่วงขั้นวิกฤต สปริงจะหยุดนิ่งโดยไม่มีการสั่น สปริงแบบ Underdamped (แรงเสียดทานต่ำ) จะพุ่งเกินและเด้งกลับ อัตราส่วนการหน่วง / (2 × sqrt (ความแข็ง × มวล)) เป็นตัวกำหนดว่าคุณซับแรงสั่นสะเทือนขั้นวิกฤต หรือโอเวอร์แดมปิ้งหรือไม่
มวล
องค์ประกอบภาพเคลื่อนไหวมีความเฉื่อยเท่าใด มวลที่มากขึ้นจะทำให้แอนิเมชั่นรู้สึกหนักขึ้นและใช้เวลาเปลี่ยนทิศทางนานขึ้น แอนิเมชัน UI ส่วนใหญ่จะมีมวลอยู่ที่ 1.0 และควบคุมความรู้สึกผ่านความแข็งและการหน่วง
ความเร็วเริ่มต้น
หากผู้ใช้ปัดหรือเหวี่ยงองค์ประกอบ สปริงสามารถเริ่มต้นได้ด้วยความเร็วท่าทางนั้น สร้างความต่อเนื่องที่ราบรื่นระหว่างท่าทางและการชำระสปริง
Spring Presets ที่ใช้งานได้จริงสำหรับส่วนประกอบ UI
ค่าที่ตั้งล่วงหน้าเหล่านี้ครอบคลุมรูปแบบการโต้ตอบ UI ที่พบบ่อยที่สุด
- การแตะด้วยปุ่ม: ความแข็ง 500, การหน่วง 30 — ทันที เร็ว และเด้งน้อยที่สุด
- การขยายการ์ด: ความแข็ง 280, การหน่วง 24, มวล 1.2 — การขยายตัวที่ราบรื่นและมีน้ำหนัก
- ลิ้นชัก / แผ่น: ความแข็ง 340, การหน่วง 28 — แตกหักโดยมีการตกตะกอนเล็กน้อย
- การแจ้งเตือนการเด้ง: ความแข็ง 400, การหน่วง 18 — พุ่งเกินอย่างสนุกสนาน
- การเปลี่ยนหน้า: ความแข็ง 220, การหน่วง 22, มวล 1.4 — แบบภาพยนตร์, แบบถ่วงน้ำหนัก
ตัวอย่างการใช้งานการผลิต
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}