Czas animacji i percepcja UX

1) Dlaczego czas jest krytyczny

• poczucie natychmiastowej reakcji i zaufania do systemu;
• jasność przyczyny i efektu (z/do którego element się przeniósł);
• zmęczenie i komfort w długich sesjach;
• dokładność działań (zwłaszcza w przypadku mobilnych i wysokich stawek).

Zasada: czas służy celowi. Jeśli animacja nie pomoże zrozumieć „co się stało”, to przeszkadza.

2) Psychofizyka i progi

• ≤ 50 ms - wejście echo (wydruk, efekt kliknięcia); Wydaje się natychmiastowe.
• ≤ 100 ms - pierwszy sprzężenie zwrotne przez działanie (przycisk „naciśnięty”).
• 120-180 ms - hover/focus, miękki stan przejścia.
• 180-280 ms - modale/panele; postrzegany jako „naturalny” wygląd.
• 300-500 ms - wspólny element, krok naprzód.
💡 700 ms - ryzyko „powolności”; pozostawić tylko wtedy, gdy ma to sens (na przykład potwierdzenie wygranej).
• • 1200-1600 ms - cykl szkieletu/migotania; dłużej - męczące.

3) Luzowanie i krzywe wagi

• Standard: "sześcienno-bezier (0. 2, 0, 0. 2, 1) '- neutralna dynamika „materiału”.
• Prasowane: 'sześcienno-bezier (0. 4, 0, 1, 1) '- szybkie logowanie, krótkie kliknięcie.
• Nakładka: 'sześcienno-bezier (0, 0, 0. 2, 1) "- miękkie wyjście.
• Akcent podkreślony (rzadko): "sześcienno-bezier (0. 2, 0. 8, 0. 2, 1. 2) przekroczenie ≤ 8 px.

Optyka wagowa: im większy składnik (karta, szuflada), tym dłuższy czas trwania (+ 40-80 ms do podstawy).

4) Fazy i choreografia

1. Inicjacja (10-40 ms): światło zanika/skala 0. 98 → 1 - sygnał startowy.

2. Transport (główny etap): ruch/otwarcie.

3. Projekt (20-60 ms): mały hamulec, stabilizacja pierścienia cienia/ostrości.

• Listy: 20-40 ms/pozycja, maksymalnie 6-8 pozycji z rzędu.
• Formy: bez kaskady; wszystko pojawia się w tym samym czasie, aby nie zakłócać wejścia.

Odwracalność: „plecy” lusterka „do przodu” i szybciej o 15-30%.

5) Terminy według typu interakcji

6) Percepcja czasu: jak „przyspieszyć” bez rzeczywistego przyspieszenia

Natychmiastowy affordance: natychmiastowa zmiana kursorów/prasowany styl ≤ 100 ms nawet przed siecią.
Ukrycie złożoności: równoległe pliki do pobrania; pull-up danych tła przed otwarciem panelu.
Kotwica zmysłu: wspólny element i kierunek ruchu zmniejszają koszty poznawcze oczekiwania.
Optymistyczne aktualizacje: interfejs użytkownika jest „gotowy” natychmiast, serwer potwierdza lub wraca.

7) Zmęczenie i higiena animacji

Unikać niekończących się pulsacji; każdy cykl musi być przerywany lub rozłączny.
Zrobić mikro wpływ na tablice elementów (stół, siatka) bez rozmycia/pudełko-cień na każdym węźle.
Support 'prefers-reduced-motion: reduce': pozostawić tylko blaknięcie ≤ 100 ms lub przełącznik statyczny.

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

8) Żetony do pomiaru czasu (system projektowania)

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 }
}
}

Nazwa: 'ruch. czas trwania. {rola} ruch „м”. luzowanie. {role} '- komponenty i Figma są takie same dla silnika.

9) Wdrożenie: CSS i Motion Framer

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) Skład czasu: równoległy vs sekwencja

Równoległe (wyblaknięcie + tłumaczyć w tym samym czasie) - szybciej w odczuciu.
Sekwencja (najpierw pojemnik, potem zawartość) jest jaśniejsza, ale dłuższa. Stosować, gdy ważne jest, aby pokazać hierarchię.
Unikaj kroków> 60 ms między blisko spokrewnionymi elementami w tym samym bloku.

11) Czas i treść

Tekst: nie animować litery/słowa po słowie w produktach; to technika marketingowa.
Liczby/liczniki: krok 40-60 ms batchami, brak jitter układ (tabularne numery).
Grafika: otwieranie serii 180-240 ms, hover-highlight ≤ 120 ms.

12) Dostępność i błąd percepcyjny

Style ostrości muszą pojawić się bezzwłocznie.
Ostrzeżenia/błędy - minimalna animacja (≤ 120 ms), bez wstrząsania, jeśli użytkownik jest z AT (assistive tech).
Unikaj migawek> 3/s i dużych migotań kontrastowych.

13) Specyfika iGaming

• Prasa ≤ 100 ms; status „zajęty”; końcowy toast/wskaźnik - bez opóźnień.
• Czas odpowiedzi interfejsu jest ważniejszy niż animacja potwierdzająca: potwierdzenie jest krótkie 120-160 ms.

• Start ≤ 200 ms, jednolity cykl, hamowanie 300-500 ms; żadnych niekończących się migotań.
• Win-burst ≤ 500 ms, bez strobi; tekst kwoty to AAA.

• Aktualizacje według partii (250-1000 ms); diff wizualny ≤ 160 ms; bez skoków układu.
• Na hover/focus - debunk podświetlenie 80-120 ms, aby nie „mrugać”.

14) Anty-wzory

Krzywe liniowe dla ruchów (uczucie „mechaniczne”).
Czas trwania> 400 ms dla prostych stanów przycisków.
Kaskada 100 + ms według listy kilkudziesięciu elementów (trakcja).
Cienie/rozmycie na setkach elementów w animacji.
niespójność: te same działania z różnymi terminami w tym samym produkcie.
Opóźnione skupienie lub opóźnienie aktywacji klawiatury.

15) Lista kontrolna czasu QA

Spójność

• Terminy i krzywe są pobierane z żetonów, takie same dla tych samych działań.

Odpowiedź

• Prasa/hover/focus pasuje do skali 80-180 ms.
• Pierwsza odpowiedź wizualna ≤ 100 ms.

Choreografia

• Wejście i wyjście są symetryczne; wyjście jest 15-30% szybsze niż wejście.
• Kaskada nie przekracza 8 elementów i 40 ms kroku.

A11y

• „Preferers-reduced-motion” obsługiwane; skupić się bezzwłocznie.
• Brak migawek> 3/s.

Wydajność

• Tylko „transformacja/nieprzezroczystość” jest animowana; brak rozmycia/cienia masy.

16) Dokumentacja w systemie projektowym

„Żetony ruchu”: czas trwania/ułatwianie/stagger + mapa aplikacji (przycisk, nakładka, zakładka, lista).
„Rytm & Phasing”: systemy kaskadowe i odwracalności.
„Reduce Motion”: zasady i przykłady degradacji.
„Do/Don”: krótkie klipy z kodami czasowymi i metrykami docelowymi (INP/First Feedback).

Krótkie podsumowanie

Dobry czas to natychmiastowa reakcja, zrozumiała choreografia i ekonomiczne krzywe. Zachować krótkie okresy dla mikro-stanów, rozciągnąć tylko tam, gdzie dodaje znaczenie, utrzymać redukcję ruchu, i nie animować „drogie” właściwości. Wtedy interfejs czuje się żywy i niezawodny - zwłaszcza w czasie rzeczywistym i wysokich stawkach.