Animasi Musim Semi: Fisika Gerakan UI Alami
Pelajari cara kerja animasi pegas dalam desain UI. Memahami kekakuan, redaman, massa, dan kecepatan. Buat animasi berbasis fisika alam untuk React dan SwiftUI.
Pengambilan Inti
Animasi pegas memodelkan gerakan UI menggunakan perilaku fisik sistem peredam pegas massa, yang mana pergerakan komponen diatur oleh kekakuan (seberapa kuat komponen tertarik ke keadaan diam), redaman (seberapa cepat komponen kehilangan energi), dan massa (seberapa besar inersia yang dibawanya). Tidak seperti animasi berbasis durasi, pegas secara otomatis merespons kecepatan pengguna dan dapat diinterupsi kapan saja tanpa menyebabkan diskontinuitas visual.
Mengapa Mata Air Terasa Lebih Alami Dibandingkan Kurva Durasi
Dunia fisik tidak memiliki konsep seperti "ease-in-out" atau "cubic-bezier(0.4, 0, 0.2, 1)." Benda-benda fisik mengalami percepatan karena adanya gaya dan diperlambat karena gesekan. Saat laci dibuka, ia mempunyai momentum; ketika Anda melepaskannya, gesekan membuatnya berhenti. Fisika pegas mereplikasi realitas fisik ini dalam perangkat lunak, itulah sebabnya iOS UIKit, Android Motion Compose, dan ExodeUI semuanya merupakan sistem animasi pegas pertama.
Parameter Pegas Dijelaskan
Memahami setiap parameter memungkinkan Anda merancang nuansa fisik yang Anda inginkan.
Kekakuan (Ketegangan)
Seberapa kuat pegas menarik menuju nilai istirahatnya. Kekakuan tinggi (600+) menciptakan UI yang tajam dan responsif seperti umpan balik penekanan tombol. Kekakuan rendah (100–200) menghasilkan gerakan lambat dan ringan yang cocok untuk transisi halaman atau elemen mengambang di sekitar.
Redaman (Gesekan)
Berapa banyak energi yang hilang dari pegas per siklus. Pada redaman kritis, pegas mencapai keadaan diam tanpa berosilasi. Pegas yang kurang teredam (gesekan rendah) akan melampaui batas dan memantul. Rasio redaman / (2 × sqrt(kekakuan × massa)) menentukan apakah Anda teredam kurang, teredam kritis, atau teredam berlebihan.
Massa
Berapa banyak inersia yang dimiliki elemen animasi. Massa yang lebih tinggi membuat animasi terasa lebih berat dan membutuhkan waktu lebih lama untuk mengubah arah. Sebagian besar animasi UI mempertahankan massa pada 1,0 dan mengontrol rasa melalui kekakuan dan redaman.
Kecepatan Awal
Jika pengguna menggesek atau melemparkan elemen, pegas dapat diinisialisasi dengan kecepatan gerakan tersebut, sehingga menciptakan kontinuitas yang mulus antara gerakan dan penyelesaian pegas.
Preset Pegas Praktis untuk Komponen UI
Preset ini mencakup pola interaksi UI yang paling umum.
- Ketukan tombol: kekakuan 500, redaman 30 — instan, cepat, pantulan minimal
- Kartu mengembang: kekakuan 280, redaman 24, massa 1,2 — pemuaian halus dan tertimbang
- Laci / lembaran: kekakuan 340, redaman 28 — tegas, dengan sedikit pengendapan
- Notifikasi goyang: kekakuan 400, redaman 18 — overshoot yang menyenangkan
- Transisi halaman: kekakuan 220, redaman 22, massa 1,4 — sinematik, berbobot
Cuplikan Implementasi Produksi
// 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>
);
}