Motion-dizayn va interfeys animatsiyalari

1) Mahsulotda animatsiya nima uchun

• sababiy bog’liqlikni tushuntiradi (qayerga g’oyib bo’ldi, element qayerdan paydo bo’ldi),
• asosiy harakatga e’tibor qaratadi,
• natijani tasdiqlaydi (feedback) va kognitiv yuklamani kamaytiradi,
• o’tishlarni oldindan aytib bo’ladigan va «seziladigan» qiladi.

1-qoida: ma’nosi> uslubi. Har qanday animatsiya "Nima sodir boʻldi va bu men bilan qanday bogʻliq? ».

2) Bazaviy prinsiplar

1. Harakat ierarxiyasi: konteynerlar birinchi bo’lib harakatlanadi, so’ngra tarkibiy qismlar, keyin detallar.
2. Doimiylik: bir xil harakatlar uchun bir xil patternlar.
3. Tejash: minimal xossalar, minimal kadrlar; yaxshiroq va ravshan.
4. Realistik fizika: boshida tezlanish, oxirida sekinlashish; «sakrash» yo’q.
5. Orqaga qaytish: «orqaga» «oldinga» ko’zgu bilan seziladi.
6. Foydalanish imkoniyati: animatsiyani kamaytirish uchun tizim moslamalarini hurmat qiling.

3) Davomiyliklar va egri chiziqlar (tavsiyalar)

3. 1 Davomiyligi (desktop/mobile)

Hover: 120-180 ms

Focus/Pressed: 80–120 мс

Tooltip/Toast: kirish 180-240 ms, chiqish 120-160 ms

Modalkalar/drouerlar: 200-320 ms

Ekranlarning o’tishi: 240-360 ms

Skroll/parallaks: segmentga 200 ms ≤, cheksiz sikllardan qochish

3. 2 Egri chiziqlar

Asosiy: ’cubic-bezier (0. 2, 0. 0, 0. 2, 1)’- tabiiy «moddiy» sur’at

Kirish tezroq, chiqish yumshoqroq: ’cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Elastiklik (kamdan-kam hollarda, urg’u): ’cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2)’overshoot chegarasi bilan ≤ 8px/8 °

Qoida: bir vaqtning o’zida harakatlanish uchun chiziqli interpolyasiyadan foydalanmang va opacity - «mexaniklik» hissi.

4) O’tishlar xoreografiyasi

Koʻrinish: 0. 98→1. 0 + fade-in, paydo bo’lish o’qi bo’yicha 8-16 px o’zgarishi.
Yo’qolish: orqaga qaytish tartibi, kirish tezroq (20-30% −).
Tablarni ochish/almashtirish: umumiy «asos» (konteyner) 16-24 px ga ko’chiriladi; aktiv tabda harakat boshlangunga qadar yoritiladi.
Ro’yxatlar: kaskadni zaiflashtiring (stagger 20-40 ms/element, ko’pi bilan 6-8 element).

5) Mikro-o’zaro ta’siri (patterns)

Tugma (hover/press): soya + oson maxfiy/scale 0. 98; pressed 80 ms ≤ sakraydi.
Fokus: blursiz kontrast halqa; glow emas, balki qalinlik/shaffoflikni animatsiya qiling.
Inputlar: maydonni focus ga karetka/yoritish; xatolar - silkitish ≤ 6 px, ≤ 140 ms, 1 tsikl.
Toggle/Checkbox: snap oxirgi holatgacha, bosish kechikishi 60-80 ms dan oshmaydi.
Skeleton/yuklash: shimmer 1200-1600 ms, yorqinlik amplitudasi ≤ 20%, keskin chaqnashlarsiz.

6) Kontentning holati

Loading → Success/Empty/Error: harakatning bitta «kanali»; Turli sohalarni aralashtirmang.
Toast/Alerts: hodisa manbaidan (masalan, foydalanuvchi harakatlari uchun pastdan-oʻngdan) uchib keladi.
Pull to refresh: elastik uzatma bilan cho’zish; qaytarish vaqti ≤ 250 ms.

7) Foydalanish imkoniyati (A11y) va xavfsizlik

’prefers-reduced-motion: reduce’ ni qoʻllab-quvvatlang: harakatlarni fade/scale bilan almashtiring ≤ 1% yoki statik oʻtish.
Sekundiga> 3 chaqnash va katta kontrast miltillashlardan (fotosensitiv epilepsiya) saqlaning.
Kuchli parallaks/zoom dan foydalanmang oʻchirish variantini yarating.
Fokus uslublari har doim animatsiyasiz koʻrinadi (faqat rang/harakat emas).

8) Unumdorlik (maqsad sifatida 60 FPS)

Faqat opacity va transform (translate/scale/rotate) ni jonlantiring; ’top/left/width/height’ dan qoching.
Kompozitsiyani yoqing:’transform: translateZ (0)’yoki’will-change: transform, opacity’(oʻrtacha).
Repaintni minimallashtiring: katta blur va filtrlar bilan ko’plab elementlarni jonlantirmang.
Batchlarga katta o’tish joylarini sindiring; requestAnimationFrame.
Roʻyxatlar uchun - ekrandan tashqarida virtualizatsiya/qayta belgilash.

9) Dizayn-tizimdagi motion tokenlari

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) Amalga oshirish (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: illyustrativ holatlar va onboarding uchun foydalaning; tanqidiy nazorat uchun emas. Optimallashtirish va kesh qilish.

11) Yuklash patternlari

Skeleton kontent tuzilishi ma’lum bo’lgan spinner o’rniga.
Progress: determinirlangan bar, agar taraqqiyot ma’lum bo’lsa; indeterminlangan - bir tekis sur’atda, «sakrashlarsiz».
Qayta qurishda «suzuvchi» skeletondan qoching - o’lchamlarini mahkamlang.

12) Sahifalar/ekranlar orasidagi o’tish

Diqqat nuqtasini saqlang (shared element transitions) - kartochka detalga «ochiladi».
«Chuqur» navigatsiya oldinga/o’ngga/yuqoriga, «orqaga» - orqaga; platforma uchun yagona yo’nalish.
Fon substrati overlelarda 40-60% gacha qorayadi.

13) iGaming xususiyatlari

Spin/Reveal: bitta qisqa tezlanish (200 ms ≤) + bir tekis aylanish + yumshoq susayish; harakatsiz cheksiz tsikllarni taqiqlash.
Win/Jackpot: yorug’lik portlashi ≤ 500 ms, strobsiz; past ovozli dubl; g’alaba matni o’qish mumkin (kontrast bo’yicha AAA).
Turnirlar/reytinglar: hisobvaraq inkrement - jadval raqamlari va engil qadami 40-60 ms/birlik (batch) bo’lgan hisoblagich, «sakrashlarsiz» layout.
Mas’uliyatli o’yin: chalg’ituvchi ta’sirlarsiz bildirishnomalar va limitlar; minimal animatsiya, o’quvchanlikka urg’u berish.

14) Anti-patternlar

Bosilgunga qadar kechikish> 120 ms.
opacity + scale dan «Lift» 0. 9→1. 05→1. Har bir kichik narsaga 0 dan overshoot.
Skroll bilan ziddiyatli fon parallaksi.
Cheksiz miltillash/pulsatsiya.
Layout/paint (’height’,’left’,’filter: blur ()’) xossalarini bir nechta elementlarda animatsiya qilish.
Bir xil harakatlarning doimiy boʻlmagan egri chiziqlari va davomiyliklari.

15) Jarayon va QA

• Tayming/egri chiziqli prototiplar; freym darajasidagi xoreografiya.
• Motion-tokenlar katalogi va komponentlar uchun namunalar.

• Ko’rinish/holatlarning unit-testlari (o’tish kutilganidek yakunlanadi).
• Vizual testlar (animatsiya oxirining snapshotlari).
• Maksimal yuklamali sahnalarda profillash (Performance/Timeline).

• Qoʻllab-quvvatlandi’prefers-reduced-motion’.
• Faqat transform/opacity.
• Uzunligi va egri chiziqlari tokenlarga mos keladi.
• Chaqnash yo’q> 3/sek va kuchli stroba.
• Skeleton mumkin bo’lgan spinner o’rniga.
• O’tishni oldindan aytib bo’lmaydi.

16) Dizayn-tizimdagi hujjatlar

«Motion-tokenlar»: duration/easing/stagger misollar bilan.
«Oʻtish namunalari»: modallar, roʻyxatlar, tablar, sahifalar.
«A11y & Performance»: reduce-motion va kompoziting bo’yicha gidlar.
«Do/Don’t»: muvaffaqiyatli/muvaffaqiyatsiz misollar bilan qisqa kliplar.

Qisqacha xulosa

Motion-dizayn - sabablar va oqibatlar tilidir. Tayminglarni qisqa tuting, egri chiziqlar kelishilgan, xossalari esa render uchun arzon. Foydalanuvchanlikni hurmat qiling, tokenlarni hujjatlashtiring va ishlashini tekshiring. Keyin animatsiya UX ni kuchaytiradi va interfeysning tezligi va aniqligiga xalaqit bermaydi.