Animatsiyalar taymingi va UX idrok etish

1) Nima uchun tayming muhim?

• tezkor javob hissi va tizimga ishonch;
• sabablar-tergov aloqalarining aniqligi (element qayerdan/qayerga ko’chganligi);
• uzoq sessiyalarda charchash va qulaylik;
• harakatlarning aniqligi (ayniqsa mobil va yuqori stavkalarda).

Qoida: Tayming ma’noga xizmat qiladi. Agar animatsiya «nima bo’lganini» tushunishga yordam bermasa, u aralashadi.

2) Psixofizika va chegaralar

• ≤ 50 ms - kirish aks-sadosi (muhr, klik-effekt); tezkor koʻrinadi.
• ≤ 100 ms - harakat bo’yicha birinchi vizual fidbek («bosilgan» tugmasi).
• 120-180 ms - hover/focus, «yumshoq» holat o’tishi.
• 180-280 ms - modalkalar/panellar; «tabiiy» paydo bo’lish sifatida qabul qilinadi.
• 300-500 ms - diqqat bilan harakatlanish (shared element), «oldinga qadam tashlash».
💡 700 ms - «sustkashlik» xavfi; faqat ma’noga ega bo’lgan taqdirdagina qoldiring (masalan, yutuqni tasdiqlash).
• ≈ 1200-1600 ms - skeleton/shimmer sikli; uzoqroq - charchatadi.

3) Tezlanish (easing) va «og’irlik» egri chiziqlari

• Standart:’cubic-bezier (0. 2, 0, 0. 2, 1)’- neytral «moddiy» dinamika.
• Tezlashuv (pressed):’cubic-bezier (0. 4, 0, 1, 1)’- tez kirish, qisqa bosish.
• Sekinlashish (overlay out):’cubic-bezier (0, 0, 0. 2, 1)’- yumshoq chiqish.
• Ta’kidlangan urg’u (kamdan-kam hollarda):’cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2)` с overshoot ≤ 8 px.

Og’irlik optikasi: komponent (kartochka, drouer) qanchalik katta bo’lsa, davomiyligi shunchalik uzun bo’ladi (bazaga nisbatan + 40-80 ms).

4) Fazalar va xoreografiya

1. Tashabbus (10-40 ms): yengil fade/scale 0. 98 → 1 - boshlanish signali.

2. Transport (asosiy bosqich): ko’chirish/ochish.

3. Yog’ingarchilik (20-60 ms): kichik tormoz, soyani/fokus halqasini barqarorlashtirish.

• Ro’yxatlar: 20-40 ms/element, ketma-ket maksimal 6-8 element.
• Shakllar: kaskadsiz; hamma narsa kiritishga xalaqit bermaslik uchun bir vaqtning oʻzida paydo boʻladi.

Qaytaruvchanlik: «orqaga» «oldinga» va 15-30% tezroq.

5) O’zaro hamkorlik turlari bo’yicha tayminglar

6) Vaqtni idrok etish: real tezlashmasdan qanday «tezlashtirish» kerak

Instant affordance: cursors/pressed uslubini tezda oʻzgartirish ≤ tarmoqdan oldin 100 ms.
Murakkablikni yashirish: yuklashni parallel qilish; Panel ochilgunga qadar orqa fonda tortish.
Semantik langar: shared element va harakat yo’nalishi kutishning kognitiv qiymatini kamaytiradi.
Optimistik yangilanishlar: UI birdaniga tayyor, server tasdiqlaydi yoki qaytadi.

7) Charchash va animatsiya gigiyenasi

Cheksiz pulsatsiyalardan qoching; har qanday sikl uzluksiz yoki o’chirib qo’yiladigan bo’lishi kerak.
Elementlar massividagi mikro effektlarni (jadval, grid) har bir uzelda blur/box-shadowsiz bajaring.
’prefers-reduced-motion: reduce’: fade ≤ 100 ms yoki statik holat kalitini qoldiring.

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

8) Tayming tokenlari (dizayn-tizim)

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

Nomi:’motion. duration.{role}` и `motion. easing. {role}’- komponentlar va Figma dvigatellari uchun birdir.

9) Amalga oshirish: CSS va 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) Vaqt kompozitsiyasi: parallel vs ketma-ketlik

Parallel (bir vaqtning o’zida fade + translate) - sezish uchun tezroq.
Ketma-ketlik (avval konteyner, keyin kontent) - tuzilishi aniqroq, lekin uzoqroq. Agar muhim boʻlsa, uni qoʻllang.
Bitta blokdagi chambarchas bogʻlangan elementlar orasidagi «zinapoyalar»> 60 ms dan qoching.

11) Tayming va kontent

Matn: mahsulotlarda letter/word-by-word animatsiya qilmang; bu marketing texnikasi.
Sonlar/hisoblagichlar: 40-60 ms batchlar bilan qadam, titramasdan layout (tabular-nums).
Grafiklar: seriyalarni ochish 180-240 ms, hover-highlight ≤ 120 ms.

12) Tushunish imkoniyati va xatosi

Fokus uslublari kechiktirmasdan paydo boʻlishi kerak.
Ogohlantirishlar/xatolar - minimal animatsiya (120 ms ≤), agar foydalanuvchi AT (assistive tech) bo’lsa, silkinmasdan.

13) iGaming xususiyatlari

• Press ≤ 100 ms; birdaniga’busy’maqomi; yakuniy tost/indikator - kechikishsiz.
• UI javob vaqti tasdiqlash animatsiyasidan muhimroqdir: tasdiqlash qisqa 120-160 ms.

• Start ≤ 200 ms, bir tekis sikl, tormozlash 300-500 ms; cheksiz miltillash yo’q.
• Win-splash ≤ 500 ms, strobsiz; summa matni - AAA.

• Batchlar bilan yangilash (250-1000 ms); vizual diff ≤ 160 ms; maket sakrashlarsiz.
• Hover/focus - 80-120 ms yoritilgan debauns.

14) Anti-patternlar

Harakatlanish uchun chiziqli egri chiziqlar («mexaniklik» hissi).
Tugmaning oddiy holatlari uchun davomiyligi> 400 ms.
Kaskad 100 + ms o’nlab elementlardan iborat ro’yxat bo’yicha (og’irlik).
Animatsiyadagi yuzlab elementlarning soyalari/blur.
Nomuvofiqlik: bitta mahsulotda turli tayminglar bilan bir xil harakatlar.
Klaviatura uchun kechiktirilgan fokus yoki kechikish.

15) Tayminglar QA-chek-listi

Konsistentlik

• Tayminglar va egri chiziqlar bir xil harakatlar uchun bir xil tokenlardan olinadi.

Javob

• Press/hover/focus 80-180 ms shkalaga to’g’ri keladi.
• Birinchi vizual javob ≤ 100 ms.

Xoreografiya

• Kirish va chiqish simmetrik; chiqish 15-30% tezroq.
• Kaskad 8 elementdan oshmaydi va 40 ms qadam.

A11y

• ’prefers-reduced-motion’qoʻllab-quvvatlandi; kechiktirmasdan fokus.
• Miltillash yoʻq> 3/s.

Performance

• Faqat’transform/opacity’animatsiya qilinadi; katta blur/soyalar yoʻq.

16) Dizayn-tizimdagi hujjatlar

«Motion Tokens»: duration/easing/stagger + qoʻllanmalar xaritasi (button, overlay, tab, list).
«Rhythm & Phasing»: kaskad va qaytuvchanlik sxemalari.
«Reduce Motion»: degradatsiya qoidalari va misollar.
«Do/Don’t»: taymkodli va maqsadli metrli qisqa kliplar (INP/First Feedback).

Qisqacha xulosa

Yaxshi tayming - bu tezkor javob, tushunarli xoreografiya va tejamkor egri chiziqlar. Mikro holatlar uchun qisqa vaqt saqlang, faqat ma’no qo’shadigan joyga cho’zing, reduce-motion-ni qo’llab-quvvatlang va «qimmat» xususiyatlarni jonlantirmang. O’shanda interfeys jonli va ishonchli tuyuladi - ayniqsa real vaqt va yuqori stavkalar ssenariylarida.