Design de mișcare și animații interfață

1) De ce animație în produs

• explică relațiile cauzale (de unde a dispărut, de unde provine elementul),
• direcționează atenția către acțiunea principală,
• confirmă rezultatul (feedback) și reduce sarcina cognitivă,
• face tranzițiile previzibile și „tangibile”.

Regula # 1: semnificație> stil. Orice animație răspunde la întrebarea "ce sa întâmplat și cum se referă la mine? ».

2) Principii de bază

1. Ierarhia mișcării: Containerele se mișcă mai întâi, apoi conținutul, apoi părțile.
2. Consecvență: Aceleași modele pentru aceleași acțiuni.
3. Economii: proprietăți minime, cadre minime; mai bine mai scurt și mai clar.
4. Fizica realistă: accelerarea la început, decelerarea la sfârșit; nu există „ticăloşi”.
5. Reversibilitate: „înapoi” se simte ca o oglindă „înainte”.
6. Accesibilitate: Respectați setările sistemului de reducere a animației.

3) Durate și curbe (recomandări)

3. 1 Durate (desktop/mobil)

Hover: 120-180ms

Focus/Presat: 80-120 мс

Tooltip/Toast: intrare 180-240ms, ieșire 120-160ms

Modale/Drouere: 200-320 ms

Tranziții ecran: 240-360 ms

Defilare/Parallax: ≤ 200ms pe segment, pentru a evita bucle infinite

3. 2 Curbe

Principal: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) '- ritmul natural „material”

Intrare mai rapidă, de ieșire mai moale: "cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Elasticitate (rar, accent): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) "cu limită de depășire ≤ 8px/8 °

Regula: nu utilizați interpolarea liniară pentru mișcări și opacitate în același timp - sentimentul de „mecanicitate”.

4) Coregrafia de tranziție

Aspect: scala de lumină 0. 98→1. 0 + decolorare, 8-16 px decalaj de-a lungul axei de origine.
Dispariție: ordine inversă, mai rapidă decât intrarea (− 20-30%).
Rotirea/schimbarea filelor: „baza” generală (container) se deplasează cu 16-24 px; fila activă este evidențiată înainte de pornirea mișcării.
Liste: slăbiți cascada (stagger 20-40 ms/element, nu mai mult de 6-8 elemente).

5) Micro-interacțiuni (modele)

Buton (hover/apăsați): umbră + subscreen de lumină/scară 0. 98; sarituri presate ≤ 80ms.
Focalizare: inel de contrast fără estompare; animați grosimea/transparența în loc de strălucire.
Intrări: iluminare transport/câmp pe focalizare; erori - agitare ≤ 6 px, ≤ 140 ms, 1 ciclu.
Comutare/Casetă de selectare: fixați la poziția finală, faceți clic pe întârziere nu mai mult de 60-80 ms.
Schelet/sarcină: strălucire 1200-1600 ms, amplitudine luminozitate ≤ 20%, fără sclipiri ascuțite.

6) Stări de conținut

Încărcare → Succes/Gol/Eroare: un „canal” de mișcare; nu se amestecă direcții diferite.
Pâine prăjită/Alerte: sosiți din partea sursă a evenimentului (de ex. jos-dreapta pentru acțiunile utilizatorilor).
Trageți pentru a reîmprospăta: tensiune elastică de primăvară; timpul de întoarcere ≤ 250 ms.

7) Accesibilitate (A11y) și securitate

Suport 'prefers-redused-motion: reduce': Înlocuiți mișcările cu decolorare/scară ≤ 1% sau tranziție statică.
Evitați flash-urile> 3 pe secundă și flash-urile mari de contrast (epilepsie fotosensibilă).
Nu utilizați paralaxă/zoom puternic la utilizatorii cu istoric de rău de mișcare; face opțiunea de deconectare.
Stilurile de focalizare sunt întotdeauna vizibile fără animație (nu doar culoare/mișcare).

8) Performanţă (60 FPS ca ţintă)

Animați numai opacitatea și transformați (traduceți/scalați/rotiți); evitați „sus/stânga/lățime/înălțime”.
Include compunerea: 'transforma: translateZ (0)' sau 'va-schimba: transforma, opacitate'.
Minimizaţi vopsirea prin faptul că nu animaţi umbre şi filtre cu blur mare pe mai multe elemente.
Spargeți tranzițiile mari în loturi; utilizați cerereAnimationFrame.
Pentru liste, virtualizare/re-layout în afara ecranului.

9) Jetoane de mișcare în sistemul de proiectare

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Именование: 'motion. {duration' easing 'stagger}. {role}' - 'hover', 'focus', 'overlayIn', 'pageTransition', 'listItem'.

10) Implementarea (CSS/JS/React)

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0. 22 } }}
exit={{ opacity: 0, transition: { duration: 0. 16 } }}
className="fixed inset-0 bg-black/50"
>
<motion. div initial={{ y: 16, scale: 0. 98, opacity: 0 }}
animate={{ y: 0, scale: 1, opacity: 1, transition: { duration: 0. 24, ease: [0. 2,0,0. 2,1] } }}
exit={{ y: 8, scale: 0. 99, opacity: 0, transition: { duration: 0. 18 } }}
className="m-auto max-w-lg rounded-2xl bg-white p-6"
>
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

Lottie/SVG: utilizare pentru stări ilustrative goale și onboarding; nu pentru controale critice. Optimizați și memoria cache.

11) Modele de încărcare

Schelet în loc de un spinner în cazul în care structura de conținut este cunoscut.
Progres: bară deterministă dacă progresul este cunoscut; nedeterminate - cu un ritm uniform, fără „labagii”.
Evitați scheletul „plutitor” atunci când reconstruiți - dimensiunile de blocare.

12) Tranziții pagină/ecran

Păstrați punctul de atenție (tranziții de elemente partajate) - cardul este „extins” în parte.
Navigarea "adânc' merge înainte/dreapta/sus," înapoi "- înapoi; direcția este aceeași pentru platformă.
Substratul de fundal se întunecă la 40-60% la suprapuneri.

13) Specificul iGaming

Spin/Reveal: o accelerație scurtă (≤ 200 ms) + rotație uniformă + atenuare moale; interzicerea ciclurilor infinite fără acțiune.
Win/Jackpot: splash ușor ≤ 500 ms, fără strobe; sunet dublu la volum redus; textul victoriei este lizibil (AAA în contrast).
Turnee/evaluări: increment cont - contor cu numere tabelare și pas de lumină de 40-60 ms/unitate (loturi), fără „salturi” aspect.
Joc responsabil: notificări și limite fără a distrage atenția asupra efectelor; animația este minimă, accentul pe lizibilitate.

14) Anti-modele

Întârziere> 120ms pentru a face clic pe răspuns.
"Lift' de la opacitate + scară 0. 9→1. 05→1. 0 cu depășire pentru fiecare lucru mic.
Paralaxă de fundal care intră în conflict cu derularea.
Pâlpâiri/pulsaţii infinite.
Animaţi proprietăţile de aspect/vopsea ('înălţime', 'stânga', 'filtru: blur ()') pe un set de elemente.
Curbe și durate non-constante pentru aceleași acțiuni.

15) Proces și QA

• Prototipuri cu temporizări/curbe; coregrafie la nivel de cadru.
• Catalog de jetoane de mișcare și exemple pentru componente.

• Testele de vizibilitate/stare (tranzițiile se termină conform așteptărilor).
• Teste vizuale (instantanee ale sfârșitului animațiilor).
• Performanță/Cronologie pe scene cu sarcină maximă.

• 'preferă mișcarea redusă' susținută.
• Numai transformare/opacitate.
• Duratele și curbele corespund jetoanelor.
• Nu flash-uri> 3/sec și strobe puternic.
• Schelet în loc de spinner acolo unde este posibil.
• Tranzițiile sunt reversibile și previzibile.

16) Documentația în sistemul de proiectare

Jetoane de mișcare: durată/ușurare/eșalonare cu exemple.
„Modele de tranziție”: modale, liste, file, pagini.
„A11y & Performance”: ghid pentru reducerea mișcării și a compoziției.
„Do/Don' t”: clipuri scurte cu exemple bune/rele.

Scurt rezumat

Proiectarea mișcării este limbajul cauzei și efectului. Păstrați temporizări scurte, curbe consecvente și proprietăți ieftine pentru a face. Respectați disponibilitatea, jetoanele pentru documente și verificați performanța. Apoi animația va consolida UX și nu va interfera cu viteza și claritatea interfeței.