Tavaszi animáció: A természetes felhasználói felület mozgásának fizikája
Ismerje meg, hogyan működik a tavaszi animáció a felhasználói felület kialakításában. Értse meg a merevséget, a csillapítást, a tömeget és a sebességet. Készíts természetes fizikán alapuló animációkat a React és SwiftUI számára.
Core Takeaway
A rugós animáció a felhasználói felület mozgását egy tömeg-rugó-csillapító rendszer fizikai viselkedésével modellezi, ahol az alkatrész mozgását a merevség (milyen erősen húzódik nyugalom felé), a csillapítás (milyen gyorsan veszít energiát) és a tömeg (mekkora tehetetlenséget hordoz). Az időtartam-alapú animációkkal ellentétben a rugók automatikusan reagálnak a felhasználói sebességre, és bármikor megszakíthatók anélkül, hogy vizuális megszakadást okoznának.
Miért érzik a forrásokat természetesebbnek, mint az időtartam görbéit?
A fizikai világnak nincsenek olyan fogalmai, mint az "könnyű be-ki" vagy a "cubic-bezier(0,4, 0, 0,2, 1)." A fizikai tárgyak az erőhatások hatására felgyorsulnak, a súrlódás miatt pedig lelassulnak. Amikor egy fiók kicsúszik, lendülete van; amikor elengeded, a súrlódás nyugalmi állapotba hozza. A tavaszi fizika ezt a fizikai valóságot reprodukálja szoftverekben, ezért az iOS UIKit, az Android Motion Compose és a ExodeUI mind tavaszi animációs rendszerek.
A tavaszi paraméterek magyarázata
Az egyes paraméterek megértése lehetővé teszi, hogy pontosan a kívánt fizikai érzést alakítsa ki.
Merevség (feszültség)
Milyen erősen húz a rugó a nyugalmi értéke felé. A nagy merevség (600+) lendületes, érzékeny felhasználói felületet hoz létre, mint például a gombnyomás visszajelzése. Az alacsony merevség (100–200) lassú, lebegő mozgást hoz létre, amely alkalmas oldalátmenetekhez vagy környezeti lebegő elemekhez.
Csillapítás (súrlódás)
Mennyi energiát veszít a rugó ciklusonként. Kritikus csillapításkor a rugó rezgés nélkül nyugalmi állapotba kerül. Az alulcsillapított rugók (alacsony súrlódás) túllendülnek és visszapattannak. A csillapítás / (2 × sqrt (merevség × tömeg)) arány határozza meg, hogy alul, kritikusan vagy túlcsillapított-e.
Tömeg
Mekkora tehetetlenséget hordoz az animált elem. A nagyobb tömeg miatt az animáció nehezebbnek tűnik, és hosszabb ideig tart az irányváltás. A legtöbb UI-animáció tömege 1,0, és a merevség és a csillapítás révén szabályozható.
Kezdeti sebesség
Ha a felhasználó lehúz vagy elhajt egy elemet, a rugó inicializálható ezzel a mozdulatsebességgel, ami zökkenőmentes folytonosságot teremt a mozdulat és a rugó elrendezése között.
Gyakorlati tavaszi beállítások a felhasználói felület összetevőihez
Ezek az előre beállított értékek lefedik a leggyakoribb felhasználói interakciós mintákat.
- Gombérintkezés: merevség 500, csillapítás 30 – azonnali, lendületes, minimális pattanás
- Kártya kitágulása: merevség 280, csillapítás 24, tömeg 1,2 – sima, súlyozott tágulás
- Fiók / lap: merevség 340, csillapítás 28 - meghatározó, enyhe ülepedéssel
- Pattogó figyelmeztetés: merevség 400, csillapítás 18 – játékos túllövés
- Oldalátmenet: merevség 220, csillapítás 22, tömeg 1,4 – filmszerű, súlyozott
Gyártási megvalósítási részlet
// 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>
);
}