Calendarul animației și percepția UX

1) De ce sincronizarea este critică

• un sentiment de răspuns instantaneu și încredere în sistem;
• claritatea cauzei și a efectului (de la/la care elementul sa mutat);
• oboseală și confort în sesiuni lungi;
• acuratețea acțiunilor (în special pe mobil și la rate ridicate).

Regula: sincronizarea are un scop. Dacă animația nu ajută la înțelegerea „ce sa întâmplat”, interferează.

2) Psihofizică și praguri

• ≤ 50 ms - intrare ecou (imprimare, efect clic); pare instant.
• ≤ 100 ms - primul feedback vizual prin acțiune (butonul „apăsat”).
• 120-180 ms - hover/focus, tranziție de stare moale.
• 180-280 ms - modale/panouri; perceput ca un aspect „natural”.
• 300-500 ms - element comun, pas înainte progres.
💡 700 ms - riscuri de „lentoare”; lasă doar dacă are sens (de exemplu, confirmarea unui câștig).
• ≈ 1200-1600 ms - ciclu schelet/strălucire; mai mult - obositor.

3) Curbe de relaxare și greutate

• Standard: 'cubic-bezier (0. 2, 0, 0. 2, 1) '- dinamica neutră a „materialului”.
• Apăsat: 'cubic-bezier (0. 4, 0, 1, 1) "- conectare rapidă, clic scurt.
• Suprapunere: 'cubic-bezier (0, 0, 0. 2, 1) "- ieșire moale.
• Accent subliniat (rar): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) "с depășire ≤ 8 px.

Optica de greutate: cu cât este mai mare componenta (card, sertar), cu atât este mai lungă durata (+ 40-80 ms la bază).

4) Faze și coregrafie

1. Inițiere (10-40ms): lumina se estompează/scara 0. 98→1 - semnal de pornire.

2. Transport (faza principală): deplasare/deschidere.

3. Proiect (20-60 ms): frână mică, stabilizare inel umbră/focalizare.

• Liste: 20-40 ms/element, maxim 6-8 elemente într-un rând.
• Formulare: fără cascadă; totul apare în același timp pentru a nu interfera cu intrarea.

Reversibilitate: oglinzile "înapoi" înainte "și mai rapid cu 15-30%.

5) Temporizări după tipul de interacțiune

6) Percepția timpului: cum se „accelerează” fără accelerare reală

Accesibilitate instantanee: schimbare instantanee a cursoarelor/stil apăsat ≤ 100 ms chiar înainte de rețea.
Ascunderea complexității: descărcări paralele; date de fundal pull-up înainte de a deschide panoul.
Ancora sensului: elementul comun și direcția de mișcare reduc costul cognitiv al așteptării.
Actualizări optimiste: UI este „gata” imediat, serverul confirmă sau se întoarce.

7) Igiena oboselii și animației

Evitați pulsațiile nesfârșite; orice ciclu trebuie să fie intermitent sau deconectabil.
Face efecte micro pe matrice de elemente (tabel, grilă), fără blur/cutie-umbra pe fiecare nod.
Suport 'prefers-redused-motion: reduce': lăsați doar să se estompeze ≤ 100ms sau un comutator static de stare.

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8) jetoane de sincronizare (sistem de proiectare)

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Denumire: 'moțiune. durata. {rol} 'и' motion. easing. {role} '- componentele și Figma sunt aceleași pentru motor.

9) Implementarea: CSS și Framer Motion

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

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

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

10) Compoziția timpului: secvență paralelă vs

Paralel (se estompează + traduce în același timp) - mai repede în simt.
Secvența (containerul mai întâi, apoi conținutul) este structură mai clară, dar mai lungă. Aplicați atunci când este important să arătați ierarhia.
Evitați pașii> 60 ms între elemente strâns legate în același bloc.

11) Calendarul și conținutul

Text: nu animați litere/cuvinte cu cuvinte în produse; E o tehnică de marketing.
Numere/contoare: pasul 40-60 ms batchami, fără aspect jitter (tabular-nums).
Grafică: deschidere seria 180-240 ms, hover-highlight ≤ 120 ms.

12) Accesibilitate și eroare perceptuală

Stilurile de focalizare trebuie să apară fără întârziere.
Avertismente/erori - animație minimă (≤ 120 ms), fără tremurături dacă utilizatorul este cu AT (tehnologie asistivă).
Evitați flash-urile> 3/s și pâlpâiturile mari de contrast.

13) Specificul iGaming

• Apăsați ≤ 100 ms; status 'ocupat' immediately; pâine prăjită finală/indicator - nici o întârziere.
• Calendarul de răspuns UI este mai important decât animația de confirmare: confirmarea este scurtă 120-160 ms.

• Start ≤ 200 ms, ciclu uniform, frânare 300-500 ms; fără pâlpâiri nesfârşite.
• Win-burst ≤ 500 ms, fără strobe; textul sumei este AAA.

• Actualizări pe loturi (250-1000 ms); diff vizual ≤ 160 ms; fără salturi de aspect.
• Pe hover/focus - lumina de fundal debunk 80-120 ms pentru a nu „clipi”.

14) Anti-modele

Curbe liniare pentru mișcări (senzație „mecanică”).
Durata> 400 ms pentru stări simple buton.
Cascadă 100 + ms conform unei liste de zeci de elemente (tracțiune).
Umbre/blur pe sute de elemente în animație.
Inconsecvență: aceleași acțiuni cu calendare diferite în același produs.
Concentrare întârziată sau întârziere la activarea tastaturii.

15) Lista de verificare a calendarului QA

Coerență

• Temporizările și curbele sunt preluate din jetoane, aceleași pentru aceleași acțiuni.

Răspuns

• Apăsați/hover/focus se potrivesc în scara de 80-180 ms.

Primul răspuns vizual ≤ de 100 ms.

Coregrafie

• Intrarea și ieșirea sunt simetrice; ieșire este 15-30% mai rapid decât de intrare.
• Cascada nu depășește 8 elemente și 40 ms pas.

A11y

• „preferă mișcarea redusă” susținută; se concentreze fără întârziere.
• Nu clipește> 3/s.

Performanță

• Numai „transformare/opacitate” este animat; fără ceață/umbre în masă.

16) Documentația în sistemul de proiectare

„Motion Jetoane”: durata/ușurare/eșalonare + harta aplicației (buton, suprapunere, filă, listă).
„Rhythm & Phasing”: scheme de cascadă și reversibilitate.
„Reducerea mișcării”: reguli și exemple de degradare.
„Do/Don' t”: clipuri scurte cu timecode și valori țintă (INP/First Feedback).

Scurt rezumat

Momentul bun este un răspuns instantaneu, coregrafie ușor de înțeles și curbe economice. Păstrați durate scurte pentru micro-stări, întindeți-vă numai acolo unde adaugă sens, mențineți reducerea mișcării și nu animați proprietățile „scumpe”. Apoi, interfața se simte plină de viață și de încredere - în special în timp real și scenarii cu mize mari.