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

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 мс

Модальдар/дроуэрлер: 200-320 мс

Экрандардың ауысуы: 240-360 мс

Скролл-байлаулар/параллакс: сегментке 200 мс ≤, шексіз циклдардан аулақ болу

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 мс/элемент, 6-8 элементтен артық емес).

5) Микро өзара әрекеттесу (patterns)

Түймешік (hover/press): көлеңке + жеңіл скриншот/scale 0. 98; pressed 80 мс ≤ секіреді.
Фокус: blur жоқ қарама-қарсы сақина; glow емес, қалыңдығын/мөлдірлігін анимациялау.
Инпуттар: өрісті focus-қа каретка/жарықтандыру; қателер - сілкілеу ≤ 6 px, ≤ 140 мс, 1 цикл.
Toggle/Checkbox: соңғы жағдайға дейін түсу, басу кідірісі 60-80 мс аспайды.
Скелетон/жүктеме: shimmer 1200-1600 мс, жарықтық амплитудасы ≤ 20%, кенеттен жарқылдаусыз.

6) Мазмұн күйі

Loading → Success/Empty/Error: қозғалыстың бір «арнасы»; әр түрлі бағыттарды араластырмаңыз.
Toast/Alerts: оқиға көзі жағынан ұшып келеді (мысалы, пайдаланушының әрекеттері үшін төменнен оң жақтан).
Pull to refresh: серпімді босату арқылы созылу; қайтару уақыты ≤ 250 мс.

7) Қолжетімділік (A11y) және қауіпсіздік

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

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) Жүктеу үлгілері

Мазмұн құрылымы белгілі жерде spinner орнына Skeleton.
Progress: егер прогресс белгілі болса, детерминирленген бар; индетерминирленген - біркелкі қарқынмен, «жұлқусыз».
«Жүзетін» skeletondan аулақ болыңыз - өлшемдерін бекітіңіз.

12) Беттер/экрандар арасындағы өту

Назар аудару нүктесін сақтаңыз (shared element transitions) - карточка егжей-тегжейлі «ашылады».
Терең навигация алға/оңға/жоғары, «артқа» - кері қарай жүреді; платформа үшін бірыңғай бағыт.
Фондық төсемдер оверлерде 40-60% -ға дейін қараңғыланады.

13) iGaming ерекшелігі

Spin/Reveal: бір қысқа жылдамдық (≤ 200 мс) + біркелкі айналу + жұмсақ баяулау; әрекетсіз шексіз циклдарға тыйым салу.
Win/Jackpot: жарық ≤ 500 мс, стробсыз; төмен дыбысты дубль; жеңістің мәтіні оқылатын болады (контраст бойынша AAA).
Турнирлер/рейтингтер: шоттың инкремент - кестелік сандары және жеңіл қадамы 40-60 мс/бірлік (батч), «секірулерсіз» layout.
Жауапты ойын: алаңдататын әсерсіз хабарламалар мен лимиттер; ең аз анимация, оқылымдылыққа екпін.

14) Қарсы үлгілер

opacity + scale-ден «лифт» 0. 9→1. 05→1. 0 с overshoot әрбір ұсақ-түйекке.
Скроллмен қайшы келетін ая параллаксы.
Шексіз жылтыраулар/пульсациялар.
Көп элементтегі layout/paint ('height', 'left', 'filter: blur ()') сипаттарының анимациясы.
Бірдей әрекеттердегі тұрақты емес қисықтар мен ұзақтықтар.

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

• Таймингтері/қисықтары бар прототиптер; фрейм деңгейіндегі хореография.
• Motion-токендер каталогы және компоненттерге арналған мысалдар.

• Көріну/жай-күй юнит-тестілері (ауысулар күтілгендей аяқталады).
• Көзбен шолу тестілері (анимация соңындағы снапшоттар).
• Ең жоғары жүктемемен сахнада профильдеу (Performance/Timeline).

• Қолдау 'prefers-reduced-motion'.
• Тек transform/opacity.
• Ұзақтығы мен қисықтары белгілерге сәйкес келеді.
• Жарқылдақ> 3/сек және күшті строба жоқ.
• Мүмкін болған жерде спиннердің орнына Skeleton.
• Өткелдер қайтымды және болжамды.

16) Дизайн-жүйедегі құжаттама

«Motion-токендер»: duration/easing/stagger мысалдары бар.
«Өту үлгілері»: модальдар, тізімдер, қойындылар, беттер.
«A11y & Performance»: reduce-motion және композитинг бойынша гайд.
«Do/Don 't»: сәтті/сәтсіз мысалдары бар қысқа клиптер.

Қысқаша түйіндеме

Motion-дизайн - бұл себептер мен салдардың тілі. Таймингтерді қысқа, қисықтарды келісілген, ал қасиеттерін - рендер үшін арзан ұстаңыз. Қол жетімділікті құрметтеңіз, белгілерді құжаттаңыз және өнімділікті тексеріңіз. Сонда анимация UX-ті күшейтеді және интерфейстің жылдамдығы мен айқындығына кедергі келтірмейді.