Kevätanimaatio: Luonnollisen käyttöliittymän liikkeen fysiikka
Opi kuinka kevätanimaatio toimii käyttöliittymäsuunnittelussa. Ymmärrä jäykkyys, vaimennus, massa ja nopeus. Rakenna luonnonfysiikkaan perustuvia animaatioita malleille React ja SwiftUI.
Core Takeaway
Jousianimaatio mallintaa käyttöliittymän liikettä käyttämällä massa-jousi-vaimenninjärjestelmän fyysistä käyttäytymistä, jossa komponentin liikettä ohjaavat jäykkyys (kuinka voimakkaasti se vetää lepoa kohti), vaimennus (kuinka nopeasti se menettää energiaa) ja massa (kuinka paljon hitautta se kantaa). Toisin kuin kestoon perustuvat animaatiot, jouset reagoivat automaattisesti käyttäjän nopeuteen ja ne voidaan keskeyttää missä tahansa vaiheessa aiheuttamatta visuaalista epäjatkuvuutta.
Miksi jouset tuntuvat luonnollisemmilta kuin kestokäyrät
Fyysisessä maailmassa ei ole käsitteitä, kuten "helposti sisään-ulos" tai "cubic-bezier(0.4, 0, 0.2, 1)." Fyysiset esineet kiihtyvät voimien vaikutuksesta ja hidastuvat kitkan vaikutuksesta. Kun laatikko liukuu auki, sillä on vauhtia; kun vapautat sen, kitka saa sen lepäämään. Kevään fysiikka toistaa tämän fyysisen todellisuuden ohjelmistoissa, minkä vuoksi iOS UIKit, Android Motion Compose ja ExodeUI ovat kaikki kevätensimmäisiä animaatiojärjestelmiä.
Kevään parametrit selitetty
Kunkin parametrin ymmärtäminen antaa sinun suunnitella juuri haluamasi fyysisen tunteen.
Jäykkyys (jännitys)
Kuinka voimakkaasti jousi vetää kohti lepoarvoaan. Suuri jäykkyys (600+) luo näppärän, reagoivan käyttöliittymän, kuten painikkeen painalluksen. Matala jäykkyys (100–200) luo hidasta, kelluvaa liikettä, joka sopii sivun siirtymiin tai ympäristön kelluviin elementteihin.
Vaimennus (kitka)
Kuinka paljon energiaa jousi menettää sykliä kohden. Kriittisessä vaimennuksen yhteydessä jousi lepää ilman värähtelyä. Alivaimennetut jouset (pieni kitka) ylittävät ja pomppivat. Vaimennussuhde / (2 × sqrt (jäykkyys × massa)) määrittää, oletko alivaimennettu, kriittisesti vaimennettu vai ylivaimennettu.
Massa
Kuinka paljon inertiaa animoitu elementti kantaa. Suurempi massa saa animaation tuntumaan raskaammalta ja kestää kauemmin muuttaa suuntaa. Useimmat käyttöliittymäanimaatiot pitävät massan 1,0:ssa ja hallitsevat tuntumaa jäykkyyden ja vaimennuksen avulla.
Alkunopeus
Jos käyttäjä pyyhkäisee tai heittelee elementtiä, jousi voidaan alustaa tällä elenopeudella, mikä luo saumattoman jatkuvuuden eleen ja jousen asettumisen välille.
Käytännön kevään esiasetukset käyttöliittymäkomponenteille
Nämä esiasetukset kattavat yleisimmät käyttöliittymän vuorovaikutusmallit.
- Napautus: jäykkyys 500, vaimennus 30 – välitön, näppärä, vähäinen pomppiminen
- Kortin laajennus: jäykkyys 280, vaimennus 24, massa 1,2 - tasainen, painotettu laajeneminen
- Laatikko / arkki: jäykkyys 340, vaimennus 28 - ratkaiseva, hieman laskeutunut
- Pomppuva ilmoitus: jäykkyys 400, vaimennus 18 – leikkisä ylitys
- Sivusiirtymä: jäykkyys 220, vaimennus 22, massa 1,4 - elokuvamainen, painotettu
Tuotannon toteutuskatkelma
// 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>
);
}