Animasiyaların vaxtı və UX qavrayışı

1) Niyə vaxt kritik

• ani cavab hissi və sistemə inam;
• səbəb-nəticə əlaqələrinin aydınlığı (elementin haradan/hara köçdüyü);
• uzun sessiyalarda yorğunluq və rahatlıq;
• hərəkətlərin dəqiqliyi (xüsusilə mobil və yüksək dərəcələrdə).

Qayda: Tayminq mənaya xidmət edir. Animasiya «nə baş verdiyini» anlamağa kömək etmirsə, müdaxilə edir.

2) Psixofizika və eşiklər

• ≤ 50 ms - giriş əks-sədası (çap, klik effekti); ani görünür.
• ≤ 100 ms - hərəkətə görə ilk vizual fidbek (düyməsi «vuruldu»).
• 120-180 ms - hover/focus, «yumşaq» hal keçidi.
• 180-280 ms - modallar/panellər; «təbii» görünüş kimi qəbul edilir.
• 300-500 ms - diqqətlə hərəkət (shared element), tərəqqi «addım irəli».
💡 700 ms - «yavaşlıq» riskləri; yalnız mənalı olduqda tərk edin (məsələn, uduşun təsdiqi).
• ≈ 1200-1600 ms - skeleton/shimmer dövrü; daha uzun - yorucu.

3) Sürətlənmə (easing) və «çəki» əyriləri

• Standart: 'cubic-bezier (0. 2, 0, 0. 2, 1) '- neytral «maddi» dinamika.
• Sürətləndirmə (pressed): 'cubic-bezier (0. 4, 0, 1, 1) '- sürətli giriş, qısa klik.
• Yavaşlama (overlay out): 'cubic-bezier (0, 0, 0. 2, 1) '- yumşaq çıxış.
• Vurğulanmış vurğu (nadir hallarda): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2)` с overshoot ≤ 8 px.

Ağırlıq optikası: komponent (kart, drouer) nə qədər böyük olarsa, uzunluq bir o qədər uzun olur (bazaya + 40-80 ms).

4) Mərhələlər və xoreoqrafiya

1. Başlanğıc (10-40 ms): yüngül fade/scale 0. 98 → 1 - başlanğıc siqnalı.

2. Nəqliyyat (əsas faza): hərəkət/açıqlama.

3. Çöküntü (20-60 ms): kiçik əyləc, kölgə/fokus halqasının sabitləşməsi.

• Siyahılar: 20-40 ms/element, ardıcıl maksimum 6-8 element.
• Formalar: kaskadsız; hər şey daxil mane olmamaq üçün eyni anda görünür.

Geri dönüş: «geri» «irəli» güzgü və 15-30% daha sürətli.

5) Qarşılıqlı əlaqə növlərinə görə taymininqlər

6) Zaman qavrayışı: real sürətlənmədən necə «sürətləndirmək»

Instant affordance: cursors/pressed stilinin ani dəyişdirilməsi ≤ şəbəkədən əvvəl 100 ms.
Çətinliyin gizlədilməsi: yükləmələri paralelləşdirin; panel açılana qədər arxa planda data çəkmək.
Semantik lövhə: şəred element və hərəkət istiqaməti gözləmənin idrak dəyərini azaldır.
Optimist yeniləmələr: UI dərhal «hazırdır», server təsdiq və ya geri qayıdır.

7) Animasiyaların yorğunluğu və gigiyenası

Sonsuz dalğalanmalardan çəkinin; hər hansı bir dövr fasiləli və ya off olmalıdır.
Elementlər (cədvəl, izləmə) massivlərində mikro effektləri hər bir qovşaqda blur/box-shadow olmadan edin.
Saxlayın 'prefers-reduced-motion: reduce': yalnız 100 ms ≤ fade və ya statik hal açarı buraxın.

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

8) Tayminq tokenləri (dizayn sistemi)

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

Adı: 'motion. duration.{role}` и `motion. easing. {role} '- komponentlərin mühərriki və Figma üçün birdir.

9) Realizasiya: CSS və 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) Zaman kompozisiyası: paralel vs ardıcıllığı

Paralel (eyni zamanda fade + translate) - hiss üçün daha sürətli.
Ardıcıllıq (əvvəlcə konteyner, sonra məzmun) - daha aydın quruluş, lakin daha uzun. Hiyerarxiya göstərmək vacib olduqda tətbiq edin.
Bir blokda sıx bağlı elementlər arasında «addımlardan»> 60 ms çəkinin.

11) Vaxt və məzmun

Mətn: məhsullarda letter/word-by-word animasiya etməyin; marketinq texnikasıdır.
Ədədlər/sayğaclar: batches ilə 40-60 ms addım, titrəmədən layout (tabular-nums).
Qrafiklər: 180-240 ms seriyası, hover-highlight ≤ 120 ms.

12) Əlçatanlıq və səhv qavrayış

Fokus üslubları gecikmədən görünməlidir.
Xəbərdarlıqlar/səhvlər - AT (assistive tech) ilə istifadəçi titrəmədən minimum (120 ms ≤) animasiya.

13) iGaming xüsusiyyətləri

• Press ≤ 100 ms; «busy» statusu dərhal; yekun tost/göstərici - gecikmədən.
• UI cavabının vaxtı təsdiqləmə animasiyasından daha vacibdir: təsdiqləmə qısa 120-160 ms.

• Başlanğıc ≤ 200 ms, vahid dövr, əyləc 300-500 ms; sonsuz parıltı yoxdur.
• Win-sıçrayış ≤ 500 ms, strobe olmadan; məbləğin mətni - AAA.

• Batch yeniləmələri (250-1000 ms); vizual diff ≤ 160 ms; maket sıçrayışları olmadan.
• hover/focus - «yanıb-sönməmək» üçün 80-120 ms işıqlandırma debauns.

14) Anti-nümunələr

Hərəkət üçün xətti əyrilər («mexaniklik» hissi).
Sadə düymə vəziyyətləri üçün> 400 ms.
Kaskad 100 + ms onlarla element siyahısında (yük maşını).
Animasiyada yüzlərlə elementdə kölgələr/blur.
Uyğunsuzluq: bir məhsulda müxtəlif vaxtlarla eyni hərəkətlər.
Klaviatura üzərində təxirə salınmış fokus və ya aktivləşdirmə gecikməsi.

15) QA-çek-vaxt siyahısı

Tutarlılıq

• Tayminqlər və əyrilər eyni hərəkətlər üçün eyni olan tokenlərdən alınır.

Cavab

• Press/hover/focus 80-180 ms.
• İlk vizual cavab ≤ 100 ms.

Xoreoqrafiya

• Giriş və çıxış simmetrikdir; giriş 15-30% daha sürətli çıxış.
• Kaskad 8 element və 40 ms addımı keçmir.

A11y

• 'prefers-reduced-motion' dəstəklənir; gecikmədən fokus.
• No parıltı> 3/s.

Performans

• Yalnız 'transform/opacity' animasiya; heç bir kütləvi blur/kölgə.

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

«Motion Tokens»: duration/easing/stagger + applications card (button, overlay, tab, list).
«Rhythm & Phasing»: kaskad və geri dönüş sxemləri.
«Reduce Motion»: deqradasiya qaydaları və nümunələr.
«Do/Don 't»: taymkodlar və hədəf metrlər (INP/First Feedback) ilə qısa kliplər.

Qısa xülasə

Yaxşı vaxt - ani cavab, aydın xoreoqrafiya və iqtisadi əyrilərdir. Mikro hallar üçün qısa müddət saxlayın, yalnız məna əlavə etdiyi yerdə uzanın, reduce-motion saxlayın və «bahalı» xüsusiyyətləri canlandırmayın. O zaman interfeys canlı və etibarlı hiss olunur - xüsusilə real vaxt və yüksək bahis ssenarilərində.