Кыймыл-дизайн жана анимация интерфейстери

1) Эмне үчүн продукт жандандыруу

• себептик байланыштарды түшүндүрөт (кайда жоголду, элемент кайдан пайда болду),
• негизги иш-аракетке көңүл бурат,
• натыйжасын тастыктайт (feedback) жана когнитивдик жүктү азайтат,
• өтүүнү алдын ала жана "сезилерлик" кылат.

Эреже № 1: мааниси> стили. Ар бир анимация "эмне болду жана бул мени менен кандай байланышы бар? ».

2) Негизги принциптер

1. Кыймыл иерархиясы: биринчи контейнерлер көчүп, андан кийин мазмуну, андан кийин маалымат.
2. Туруктуулук: бирдей иш-аракеттер үчүн бирдей үлгүлөр.
3. Үнөмдөө: минималдуу касиеттери, минималдуу кадрлар; жакшыраак жана ачык.
4. Реалдуу физика: башында тездетүү, аягында жайлоо; жок.
5. Артка: "артка" күзгү сезилет "алдыга".
6. Жеткиликтүүлүк: Анимацияны азайтуу үчүн системалык орнотууларды урматтоо.

3) узактыгы жана ийри (сунуштар)

3. 1 узактыгы (desktop/mobile)

Hover: 120-180 мс

Focus/Pressed: 80–120 мс

Tooltip/Toast: кирүү 180-240 мс, чыгуу 120-160 мс

Модалдар/Drouer: 200-320 ms

Өткөөл экрандар: 240-360 ms

Scroll байламталары/параллакс: сегментте 200 ms ≤, чексиз циклдерден качуу

3. 2 ийри сызыктар

Негизги: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) '- табигый "материалдык" темп

Кирүү тезирээк, чыгуу жумшак: 'cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Ийкемдүүлүк (сейрек, басым): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) 'overshoot чектөө менен ≤ 8px/8 °

Эреже: бир эле учурда кыймылдар жана opacity үчүн сызыктуу интерполяцияны колдонбоңуз - "механикалык" сезим.

4) Өтүү хореографиясы

Көрүнүшү: жеңил масштаб 0. 98→1. 0 + fade-in, пайда болгон огунда 8-16 px жылыш.
Жок: тескери тартиби, тез кирүү (− 20-30%).
Өтмөктөрдү жылдыруу/алмаштыруу: жалпы "пайдубалы" (контейнер) 16-24 px жылдырылат; активдүү өтмөк кыймыл башталганга чейин жарыктандырылып турат.
Тизмелер: каскадын алсыратуу (stagger 20-40 ms/элемент, 6-8 элементтен ашык эмес).

5) Micro-өз ара аракеттенүү (patterns)

баскычы (hover/press): көлөкө + жарык/scale 0. 98; pressed секирип ≤ 80 ms.
Focus: blur жок карама-каршы шакек; жарык эмес, калыңдыгын/тунуктугун жандандыруу.
Input: focus боюнча араба/жарык талаасы; каталар - силкип ≤ 6 px, ≤ 140 ms, 1 цикл.
Toggle/Checkbox: акыркы абалына snap, басуу кечигүү 60-80 мс ашык эмес.
Skeleton/жүктөө: shimmer 1200-1600 мс, жарык ≤ 20%, эч кандай кескин жарк.

6) Мазмундун абалы

Loading → Success/Empty/Error: бир "канал" кыймылы; ар кандай багыттарды аралаштырбаңыз.
Toast/Alerts: окуя булагы тараптан келет (мисалы, колдонуучунун иш-аракеттери үчүн төмөнкү-оң).
Pull to refresh: серпилгич жазылуу менен чоюлуу; кайтаруу убактысы ≤ 250 ms.

7) Жеткиликтүүлүк (A11y) жана коопсуздук

Колдоо 'prefers-reduced-motion: reduce': fade/scale боюнча кыймылдарды алмаштыруу ≤ 1% же статикалык өтүү.
жарк> 3 секундасына жана чоң контрасттык жарк этүүдөн (фотосенсивдүү эпилепсия) качыңыз.
термелүү тарыхы менен күчтүү параллакс/zoom колдонгон эмес; өчүрүү опциясын жасаңыз.
Фокус стилдери ар дайым анимациясыз көрүнүп турат (түс/кыймыл гана эмес).

8) аткаруу (максат катары 60 FPS)

Анимация гана opacity жана transform (translate/scale/rotate); 'top/left/width/height' дегенден качыңыз.
'transform: translateZ (0)' же 'will-change: transform, opacity' (орточо).
Repaint минималдаштыруу: көп элементтер боюнча чоң blur жана чыпкалар менен көлөкө жандандыруу жок.
Чоң өтмөктөрдү батчиге сындырыңыз; requestAnimationFrame.
Тизмелер үчүн - экрандан тышкары виртуалдаштыруу/кайра жайгаштыруу.

9) Дизайн системасында motion токендери

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) ишке ашыруу (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: иллюстративдик бош абалдар жана onboarding үчүн колдонуу; көзөмөлгө алуу үчүн эмес. оптималдаштыруу жана кэш.

11) Жүктөө үлгүлөрү

Skeleton ордуна spinner мазмун структурасы белгилүү жерде.
Progress: прогресс белгилүү болсо, аныктоо бар; индетерминацияланган - бир калыпта темп менен, "жылышсыз".
өзгөртүп жатканда "калкып" skeleton алыс - өлчөмдөрүн бекитүү.

12) барактар/экрандар ортосундагы өтүү

Көңүл бургула (shared element transitions) - карта майда-чүйдөсүнө чейин "ачылат".
"Терең" багыттоо алдыга/оңго/өйдө, "артка" - артка; платформа үчүн бирдиктүү багыт.
Арткы субстрат 40-60% га чейин караңгылатылат.

13) iGaming өзгөчөлүктөрү

Spin/Reveal: бир кыска ылдамдануу (≤ 200 ms) + бир калыпта айлануу + жумшак өчүрүү; аракетсиз чексиз циклдерге тыюу салуу.
Win/Jackpot: жарык ≤ 500ms, эч кандай строба; төмөн үн үн дубль; жеңиштин текстин окууга болот (контраст боюнча AAA).
Турнирлер/рейтингдер: эсеп инкременти - таблицалык цифралар жана 40-60 мс/бирдик (батч) менен жеңил кадам менен эсептегич, "секирбестен" layout.
Жооптуу оюн: алаксытуучу таасирлери жок билдирүүлөр жана лимиттер; анимация минималдуу, окууга жөндөмдүүлүккө басым жасайт.

14) Анти-үлгүлөрү

кечигүү> 120 ms чыкылдатуу жооп чейин.
"Lift" чейин opacity + scale 0. 9→1. 05→1. 0 менен overshoot ар бир майда-чүйдөсүнө чейин.
Параллакс фон, scroll менен карама-каршы келет.
Чексиз жылтылдоо/пульсация.
Көп элементтерде layout/paint ('height', 'left', 'filter: blur ()') касиеттерин анимациялоо.
Туруктуу эмес ийри сызыктар жана бирдей аракеттердин узактыгы.

15) Процесс жана QA

• Таймингдер/ийри сызыктар менен прототиптер; фреймдердин деңгээлиндеги хореография.
• Motion-токендер каталогу жана компоненттер үчүн мисалдар.

• Unit-көрүнүү/абалы тесттер (өткөөл күтүлүүдө).
• Визуалдык тесттер (анимациянын аягында снапшоттор).
• Profile (Performance/Timeline) максималдуу жүк менен сахнада.

• Колдогон 'prefers-reduced-motion'.
• Гана transform/opacity.
• узактыгы жана ийри белгилери менен дал келет.
• эч кандай жарк эткен> 3/сек жана күчтүү капкак.
• Skeleton spinner ордуна мүмкүн болгон жерде.
• Өткөөл кайра жана алдын ала айтууга болот.

16) Дизайн системасында документтер

"Motion-токендер": duration/easing/stagger мисалдар менен.
"Өтмөктөрдүн үлгүлөрү": модалдар, тизмелер, өтмөктөр, беттер.
"A11y & Performance": reduce-motion жана композиция боюнча жол.
"Do/Don 't": ийгиликтүү/ийгиликсиз мисалдар менен кыска клиптер.

Кыскача резюме

Motion-дизайн - себептеринин жана натыйжаларынын тили. Таймингдерди кыска кармаңыз, ийри сызыктар макулдашылган, ал эми касиеттери рендер үчүн арзан. Жеткиликтүүлүктү сыйлоо, токендерди документтештирүү жана аткарууну текшерүү. Андан кийин анимация UX күчөтөт жана интерфейстин ылдамдыгына жана тактыгына тоскоол болбойт.