Jarní animace: Fyzika přirozeného pohybu uživatelského rozhraní
Přečtěte si, jak funguje jarní animace v designu uživatelského rozhraní. Pochopte tuhost, tlumení, hmotnost a rychlost. Vytvářejte přirozené fyzikální animace pro React a SwiftUI.
Core Takeaway
Pružinová animace modeluje pohyb uživatelského rozhraní pomocí fyzikálního chování systému hmota-pružina-tlumič, kde je pohyb součásti řízen tuhostí (jak silně táhne směrem k klidu), tlumením (jak rychle ztrácí energii) a hmotností (jak velkou setrvačnost nese). Na rozdíl od animací založených na trvání pružiny automaticky reagují na rychlost uživatele a mohou být v kterémkoli bodě přerušeny, aniž by způsobily vizuální nespojitost.
Proč se pružiny cítí přirozenější než křivky trvání
Fyzický svět nemá pojmy jako „ease-in-out“ nebo „cubic-bezier(0,4, 0, 0,2, 1).“ Fyzické objekty se zrychlují v důsledku sil a zpomalují v důsledku tření. Když se zásuvka vysune, má hybnost; když ho uvolníte, tření ho uvede do klidu. Jarní fyzika replikuje tuto fyzickou realitu v softwaru, a proto jsou iOS UIKit, Android Motion Compose a ExodeUI prvními animačními systémy.
Vysvětlení parametrů pružiny
Pochopení každého parametru vám umožní navrhnout přesně takový fyzický pocit, jaký chcete.
Tuhost (napětí)
Jak silně pružina táhne směrem ke své klidové hodnotě. Vysoká tuhost (600+) vytváří svižné a citlivé uživatelské rozhraní jako odezvu při stisknutí tlačítka. Nízká tuhost (100–200) vytváří pomalý, plynulý pohyb vhodný pro přechody stránek nebo okolní plovoucí prvky.
Tlumení (tření)
Kolik energie ztratí pružina za cyklus. Při kritickém tlumení se pružina dostane do klidu bez kmitání. Nedostatečně tlumené pružiny (nízké tření) přestřelí a odskočí. Poměr tlumení / (2 × sqrt (tuhost × hmotnost)) určuje, zda jste podtlumení, kriticky tlumení nebo přetlumení.
Mše
Jak velkou setrvačnost nese animovaný prvek. Vyšší hmotnost způsobuje, že animace je těžší a trvá déle, než změní směr. Většina animací uživatelského rozhraní si udržuje hmotnost na hodnotě 1,0 a ovládá pocit tuhosti a tlumení.
Počáteční rychlost
Pokud uživatel přejetím nebo mrská prvkem, pružinu lze inicializovat s touto rychlostí gesta, čímž se vytvoří plynulá kontinuita mezi gestem a usazením pružiny.
Praktické jarní přednastavení pro komponenty uživatelského rozhraní
Tyto přednastavení pokrývají nejběžnější vzorce interakce uživatelského rozhraní.
- Klepnutí na tlačítko: tuhost 500, tlumení 30 — okamžité, svižné, minimální odskoky
- Roztažení karty: tuhost 280, tlumení 24, hmotnost 1,2 — plynulé, vážené roztažení
- Zásuvka / plech: tuhost 340, tlumení 28 — rozhodující, s mírným sedáním
- Upozornění na odskoky: tuhost 400, tlumení 18 — hravý přepal
- Přechod stránky: tuhost 220, tlumení 22, hmotnost 1,4 — filmový, vážený
Fragment implementace výroby
// 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>
);
}