Projektowanie ruchu i animacje interfejsu

1) Dlaczego animacja w produkcie

• wyjaśnia związki przyczynowe (gdzie zniknął, skąd pochodzi pierwiastek),
• zwraca uwagę na główne działanie,
• potwierdza wynik (informacje zwrotne) i zmniejsza obciążenie poznawcze,
• czyni przejścia przewidywalnym i „namacalnym”.

Zasada # 1: znaczenie> styl. Jakaś animacja odpowiada na pytanie "co się stało i jak to się do mnie odnosi? ».

2) Podstawowe zasady

1. Hierarchia ruchu: Pojemniki poruszają się najpierw, następnie zawartość, a następnie części.
2. Spójność: Te same wzory dla tych samych działań.
3. Oszczędności: minimalne właściwości, minimalne ramy; Lepsze krótsze i wyraźniejsze.
4. Fizyka realistyczna: przyspieszenie na początku, opóźnienie na końcu; Nie ma żadnych „palantów”.
5. Odwracalność: „plecy” czują się jak „do przodu”.
6. Dostępność: Przestrzegaj ustawień systemu redukcji animacji.

3) Okresy i krzywe (zalecenia)

3. 1 Czas trwania (pulpit/telefon komórkowy)

Hover: 120-180ms

Ostrość/naciśnięty: 80-120 м,

Końcówka narzędzi/Toast: wejście 180-240ms, wyjście 120-160ms

Modale/Drouers: 200-320 ms

Przejścia ekranu: 240-360 ms

Przewijanie/Parallax: ≤ 200 ms na segment, unikać nieskończonych pętli

3. 2 Krzywe

Główny: "sześcienno-bezier (0. 2, 0. 0, 0. 2, 1) '- naturalne tempo „materiału”

Wejście szybciej, wyjście miększe: 'sześcienno-bezier (0. 05, 0. 7, 0. 1, 1)`

Elastyczność (rzadko, akcent): 'sześcienno-bezier (0. 2, 0. 8, 0. 2, 1. 2) "o granicy przekroczenia ≤ 8px/8 °

Zasada: nie używać interpolacji liniowej dla ruchów i nieprzezroczystości w tym samym czasie - uczucie „mechaniczności”.

4) Choreografia przejściowa

Wygląd: skala światła 0. 98→1. 0 + fade-in, 8-16 px przesunięcie wzdłuż osi pochodzenia.
Zniknięcie: odwrócone zamówienie, szybsze niż wejście (-20-30%).
Zakładki toczenia/zmiany: ogólna „podstawa” (pojemnik) jest przesunięta o 16-24 px; aktywna karta jest podświetlana przed rozpoczęciem ruchu.
Listy: rozluźnić kaskadę (stagger 20-40 ms/element, nie więcej niż 6-8 elementów).

5) Mikro-interakcje (wzory)

Przycisk (hover/press): shadow + light subscreen/scale 0. 98; naciśnięte odbicia ≤ 80 ms.
Skupienie: pierścień kontrastowy bez rozmycia; animowana grubość/przezroczystość zamiast blasku.
Wejścia: oświetlenie przewozu/pola w centrum uwagi; błędy - wstrząsanie ≤ 6 px, ≤ 140 ms, 1 cykl.
Przełączanie/pole wyboru: przycisk do pozycji końcowej, kliknij opóźnienie nie więcej niż 60-80 ms.
Szkielet/obciążenie: błyszczący 1200-1600 ms, amplituda jasności ≤ 20%, bez ostrych błysków.

6) Stany treści

Załadunek → Sukces/Pusty/Błąd: jeden „kanał” ruchu; nie mieszaj różnych kierunków.
Toast/Alerts: przybyć ze strony źródłowej wydarzenia (np. prawa dołu dla działań użytkownika).
Pociągnąć do odświeżenia: sprężynowe napięcie sprężynowe; czas powrotu ≤ 250 ms.

7) Dostępność (A11y) i bezpieczeństwo

Support 'prefers-reduced-motion: reduce': Zastąpić ruchy blaknięciem/skalą ≤ 1% lub statycznym przejściem.
Unikać błysków> 3 na sekundę i dużych błysków kontrastowych (padaczka światłoczuła).
Nie stosować silnej paralaksy/powiększenia u użytkowników z historią choroby ruchowej; wykonać opcję odłączenia.
Style ostrości są zawsze widoczne bez animacji (nie tylko kolor/ruch).

8) Wydajność (60 FPS jako cel)

Animować tylko nieprzezroczystość i przekształcić (translate/scale/rotate); unikać „górnej/lewej/szerokości/wysokości”.
Zaliczyć kompozycję: 'transformata: tłumacz Z (0)' lub 'wola-zmiana: transformata, nieprzezroczystość'.
Zminimalizuj repaint, nie animując dużych zaciemnień i filtrów na wielu elementach.
Przełamać duże przejścia w partie; użyj ramki AnimationFrame.
W przypadku list, wirtualizacja poza ekranem/ponowny układ.

9) Żetony ruchu w systemie projektowania

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}. {rola}' - 'hover', 'focus', 'overlayIn', 'Transition', 'listItem'.

10) Wdrożenie (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: zastosowanie do ilustracyjnych pustych stanów i na pokładzie; nie do kontroli krytycznych. Optymalizacja i pamięć podręczna.

11) Wzory załadunku

Szkielet zamiast spinnera, w którym znana jest struktura treści.
Postęp: bar deterministyczny, jeśli znany jest postęp; nieokreślony - z jednolitym tempem, bez „palantów”.
Unikaj „pływającego” szkieletu podczas odbudowy - wymiary blokady.

12) Przejścia strony/ekranu

Zachować punkt uwagi (wspólne przejścia elementu) - karta jest „rozszerzona” do części.
Nawigacja „głębokie” idzie do przodu/prawo/do góry, „do tyłu” - do tyłu; kierunek jest taki sam dla platformy.
Podłoże tła ciemnieje do 40-60% przy nakładkach.

13) Specyfika iGaming

Spin/Reveal: jedno krótkie przyspieszenie (≤ 200 ms) + jednolity obrót + miękkie tłumienie; zakaz nieskończonych cykli bez działania.
Win/Jackpot: lekki splash ≤ 500 ms, bez strobi; podwójny dźwięk przy niskiej objętości; tekst zwycięstwa jest czytelny (AAA w przeciwieństwie).
Turnieje/oceny: przyrost konta - licznik z liczbami tabelarycznymi i krokiem świetlnym 40-60 ms/jednostka (partie), bez układu „skoki”.
Odpowiedzialna zabawa: powiadomienia i ograniczenia bez rozpraszania skutków; animacja jest minimalna, nacisk na czytelność.

14) Anty-wzory

Opóźnienie> 120ms, aby kliknąć odpowiedź.
„Winda” ze zmętnienia + skala 0. 9→1. 05→1. 0 z przeciążeniem dla każdej małej rzeczy.
Tło parallax, który koliduje z zwojem.
Nieskończone migotania/pulsacje.
Właściwości animacji układu/farby ('wysokość', 'lewa', 'filtr: rozmycie ()') na zestawie elementów.
Nieustające krzywe i okresy dla tych samych działań.

15) Proces i QA

• Prototypy z czasami/krzywymi; choreografia na poziomie klatki.
• Katalog żetonów ruchu i przykłady komponentów.

• Badania widzialności jednostki/stanu (przejścia kończą się zgodnie z oczekiwaniami).
• Testy wizualne (migawki końca animacji).
• Wydajność/Timeline na scenach z maksymalnym obciążeniem.

• „Preferers-reduced-motion” obsługiwane.
• Tylko przekształcenie/nieprzezroczystość.
• Okresy i krzywe odpowiadają żetonom.
• Brak błysków> 3/s i silny strobrobe.
• Szkielet zamiast spinnera w miarę możliwości.
• Przejścia są odwracalne i przewidywalne.

16) Dokumentacja w systemie projektowym

Żetony ruchu: czas trwania/łagodzenie/stagger z przykładami.
„Wzory przejściowe”: modale, listy, zakładki, strony.
„A11y & Performance”: przewodnik po redukcji ruchu i kompozytorstwie.
„Do/Don”: krótkie klipy z dobrymi/złymi przykładami.

Krótkie podsumowanie

Projekt ruchu jest językiem przyczyny i efektu. Zachowaj krótkie czasy, krzywe spójne i właściwości tanie do renderowania. Szanuj dostępność, żetony i sprawdź wydajność. Następnie animacja wzmocni UX i nie zakłóci prędkości i jasności interfejsu.