Motion-dizayn və animasiya interfeys

1) Niyə məhsulda animasiya

• səbəb-nəticə əlaqələrini izah edir (hara yoxa çıxdı, element haradan gəldi),
• əsas hərəkətə diqqət yönəldir,
• nəticəni təsdiqləyir (feedback) və idrak yükünü azaldır,
• keçidləri proqnozlaşdırıla bilən və «toxunulabilir» edir.

Qayda № 1: məna> üslub. Hər hansı bir animasiya «Nə baş verdi və mənimlə necə əlaqəsi var?» sualına cavab verir ».

2) Əsas prinsiplər

1. Hərəkət iyerarxiyası: qablar əvvəlcə hərəkət edir, sonra məzmun, sonra detallar.
2. Sabitlik: eyni hərəkətlər üçün eyni nümunələr.
3. Qənaət: minimum xüsusiyyətlər, minimum kadr; daha qısa və aydın.
4. Realist fizika: başlanğıcda sürətlənmə, sonda yavaşlama; «sıçrayışlar» yoxdur.
5. Geri dönüş: «geri» güzgü «irəli» hiss olunur.
6. Əlçatanlıq: Animasiya azaldılması sistem parametrlərinə hörmət edin.

3) Uzunluqlar və əyrilər (tövsiyələr)

3. 1 Müddət (desktop/mobile)

Hover: 120-180 ms

Focus/Pressed: 80–120 мс

Tooltip/Toast: 180-240 ms giriş, 120-160 ms çıxış

Modalka/drouer: 200-320 ms

Ekran keçidləri: 240-360 ms

Scroll bağları/paralaks: seqment başına 200 ms ≤, sonsuz dövrlərdən qaçın

3. 2 Əyrilər

Əsas: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) '- təbii «maddi» temp

Giriş daha sürətli, çıxış daha yumşaq: 'cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Elastiklik (nadir hallarda, vurğu): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) 'overshoot limiti ilə ≤ 8px/8 °

Qayda: Eyni zamanda hərəkət və opacity üçün xətti interpolyasiyadan istifadə etməyin - «mexaniklik» hissi.

4) Keçidlərin xoreoqrafiyası

Görünüş: yüngül miqyaslı 0. 98→1. 0 + fade-in, görünüş oxu boyunca 8-16 px yerdəyişmə.
Yox olma: geri sifariş, daha sürətli giriş (− 20-30%).
Sekmələrin açılması/dəyişdirilməsi: ümumi «baz» (konteyner) 16-24 px; aktiv sekmə hərəkət başlamazdan əvvəl işıqlandırılır.
Siyahılar: kaskadı zəiflətmək (stagger 20-40 ms/element, ən çox 6-8 element).

5) Mikro qarşılıqlı təsir (patterns)

düyməsi (hover/press): kölgə + yüngül gizli/scale 0. 98; pressed 80 ms ≤ sıçrayır.
Focus: blur olmadan kontrast ring; glow deyil, qalınlığı/şəffaflığı canlandırın.
Input: fayl/focus sahəsinin işıqlandırılması; səhvlər - silkələmə ≤ 6 px, ≤ 140 ms, 1 dövr.
Toggle/Checkbox: son mövqeyə snap, 60-80 ms-dən çox olmayan klik.
Skelet/yükləmə: shimmer 1200-1600 ms, parlaqlıq genliyi ≤ 20%, kəskin flaşlar olmadan.

6) Məzmun halları

Yükləmə → Success/Empty/Error: bir «kanal» hərəkət; müxtəlif istiqamətləri qarışdırmayın.
Toast/Alerts: hadisə mənbəyindən (məsələn, istifadəçinin hərəkətləri üçün aşağıdan sağa) gəlir.
Pull to refresh: elastik yayılması ilə dartılması; geri dönüş vaxtı ≤ 250 ms.

7) Mövcudluq (A11y) və təhlükəsizlik

Dəstək 'prefers-reduced-motion: reduce': 1% və ya statik keçid ≤ fade/scale yerdəyişmələri əvəz.
Flaşlardan> 3 saniyədə və böyük kontrast yanıqlardan (fotosensitiv epilepsiya) qaçın.
Sallanma tarixi olan istifadəçilər arasında güclü paralaks/zoom istifadə etməyin; off seçimi edin.
Fokus stilləri həmişə animasiyasız görünür (yalnız rəng/hərəkət deyil).

8) Performance (hədəf kimi 60 FPS)

Yalnız opacity və transform (translate/scale/rotate) animasiya edin; 'top/left/width/height' çəkinin.
Kompoziti daxil edin: 'transform: translateZ (0)' və ya 'will-change: transform, opacity' (orta).
Repaint 'i minimuma endirin: kölgələri böyük blur və filtrlərlə bir çox elementdə animasiya etməyin.
Batchy böyük keçidləri qırın; requestAnimationFrame istifadə edin.
Siyahılar üçün - virtualizasiya/ekrandan kənarda yenidən qurulma.

9) Dizayn sistemində motion tokenləri

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) Realizasiya (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: illüstrativ boş hallar və onboarding üçün istifadə edin; kritik nəzarət üçün deyil. Optimallaşdırın və cache.

11) Yükləmə nümunələri

Skeleton, məzmun quruluşunun məlum olduğu spinner əvəzinə.
Progress: tərəqqi məlum olduqda determinik bar; indetermined - bərabər templə, «sıçrama» olmadan.
Yenidən qurarkən «üzən» skeletondan çəkinin - ölçüləri düzəldin.

12) Səhifələr/ekranlar arasında keçid

Diqqət nöqtəsini saxlayın (shared element transitions) - kart detala «açılır».
«Dərin» naviqasiya irəli/sağa/yuxarı, «geri» - geri gedir; platforma üçün vahid istiqamət.
Fon substratı overleydə 40-60% -ə qədər qaralır.

13) iGaming xüsusiyyətləri

Spin/Reveal: bir qısa sürətlənmə (≤ 200 ms) + vahid fırlanma + yumşaq sönmə; hərəkətsiz sonsuz dövrlərə qadağa.
Win/Jackpot: 500 ms ≤ işıq sıçrayışı, strobe olmadan; aşağı səs səs dubl; qələbə mətni oxunabilir (kontrast AAA).
Turnirlər/reytinqlər: hesabın inkrementi - layout «sıçrayışları» olmadan cədvəl rəqəmləri və asan addım 40-60 ms/vahid (batch) olan sayğacdır.
Məsuliyyətli oyun: xəbərdarlıqlar və məhdudiyyətlər heç bir yayındırıcı təsir olmadan; animasiya minimal, oxuculuq vurğu.

14) Anti-nümunələr

Gecikmələr> 120 ms klik cavabına qədər.
«Lift» of opacity + scale 0. 9→1. 05→1. 0 ilə overshoot hər kiçik.
Skroll ilə ziddiyyət fonunda paralaks.
Sonsuz titrəmə/dalğalanma.
layout/paint ('height', 'left', 'filter: blur ()') xüsusiyyətlərinin animasiyası.
Eyni hərəkətlərdə qeyri-sabit əyrilər və uzunluqlar.

15) Proses və QA

• Timing/əyri ilə prototiplər; freym səviyyəsində xoreoqrafiya.
• Motion-tokenlərin kataloqu və komponentlər üçün nümunələr.

• Vahid görünürlük/vəziyyət testləri (keçidlər gözlənildiyi kimi tamamlanır).
• Vizual testlər (animasiyaların sonunun snapshotları).
• Maksimum yüklə səhnələrdə profil (Performance/Timeline).

• Dəstəklənən 'prefers-reduced-motion'.
• Yalnız transform/opacity.
• Uzunluq və əyrilər tokenlərə uyğundur.
• Heç bir flaş> 3/san və güclü strobe.
• Skeleton mümkün olan spinner əvəzinə.
• Keçidlər geri qaytarıla bilər və proqnozlaşdırıla bilər.

16) Dizayn sistemində sənədləşmə

«Motion-tokenlər»: duration/easing/stagger nümunələri ilə.
«Keçid nümunələri»: modallar, siyahılar, sekmələr, səhifələr.
«A11y & Performance»: reduce-motion və bəstəkarlıq bələdçisi.
«Do/Don 't»: uğurlu/uğursuz nümunələri olan qısa kliplər.

Qısa xülasə

Motion-dizayn səbəblərin və nəticələrin dilidir. Tayminqləri qısa, əyriləri razılaşdırılmış, xüsusiyyətləri isə render üçün ucuz saxlayın. Əlçatanlığa hörmət edin, tokenləri sənədləşdirin və performansı yoxlayın. Sonra animasiya UX gücləndirəcək və interfeysin sürətinə və aydınlığına mane olmayacaq.