Анимация тайминг және UX-қабылдау

1) Тайминг неге қиын?

• жылдам жауап беру сезімі және жүйеге сенім;
• себеп-салдарлық байланыстардың анықтығы (элемент қайдан/қайда көшірілді);
• ұзақ сессиялардағы шаршау және жайлылық;
• іс-қимылдардың дәлдігі (әсіресе ұтқыр және жоғары мөлшерлемелер кезінде).

Ереже: тайминг мағынаға қызмет етеді. Егер анимация «не болғанын» түсінуге көмектеспесе, ол кедергі келтіреді.

2) Психофизика және табалдырықтар

• ≤ 50 мс - енгізу жаңғырығы (басу, клик-эффект); жылдам болып көрінеді.
• ≤ 100 мс - іс-қимылы бойынша алғашқы визуалды фидбек («басылды» түймесі).
• 120-180 мс - hover/focus, жай-күйінің «жұмсақ» өтуі.
• 180-280 мс - модульдер/панельдер; «табиғи» пайда болу ретінде қабылданады.
• 300-500 мс - мұқият жылжыту (shared element), «алға қадам» прогресі.
💡 700 мс - «баяулау» тәуекелі; егер мағынасы болса ғана қалдырыңыз (мысалы, ұтысты растау).
• 1200-1600 мс ≈ - skeleton/shimmer циклі; ұзақ - шаршатады.

3) Жеделдету қисықтары (easing) және «салмақ»

• Стандарт: 'cubic-bezier (0. 2, 0, 0. 2. 1) '- бейтарап «материалдық» динамика.
• Жылдамдату (pressed): 'cubic-bezier (0. 4, 0, 1, 1) '- жылдам кіру, қысқа басу.
• Баяулау (overlay out): 'cubic-bezier (0, 0, 0. 2. 1) '- жұмсақ шығыс.
• Сызылған екпін (сирек): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2)` с overshoot ≤ 8 px.

Салмақ оптикасы: компонент (карточка, дроуэр) неғұрлым үлкен болса, ұзақтығы соғұрлым ұзын (базалыққа + 40-80 мс).

4) Фазалар және хореография

1. Инициация (10-40 мс): жеңіл fade/scale 0. 98 → 1 - бастау сигналы.

2. Көлік (негізгі фаза): орнын ауыстыру/ашу.

3. Тұнба (20-60 мс): шағын тежегіш, фокус көлеңкесін/сақинасын тұрақтандыру.

• Тізімдер: 20-40 мс/элемент, қатарынан ең көп дегенде 6-8 элемент.
• Нысандар: каскадсыз; енгізуге кедергі келтірмеу үшін бәрі бір уақытта пайда болады.

Кері қайтарымдылық: «артқа» «алға» айна түсіреді және 15-30% жылдам.

5) Өзара іс-қимыл түрлері бойынша таймингтер

6) Уақытты қабылдау: нақты жылдамдатусыз қалай «жылдамдату»

Instant affordance: cursors/pressed стилін желіге дейін 100 мс ≤ жылдам ауыстыру.
Қиындықты жасыру: жүктеу параллелиті; панелі ашылғанға дейін деректерді фондық түрде тарту.
Мағыналық зәкір: shared element және қозғалыс бағыты күту когнитивтік құнын азайтады.
Оптимистік жаңартулар: UI бірден дайын, сервер растайды немесе қайтарады.

7) Анимацияның шаршауы және гигиенасы

Шексіз пульсациядан аулақ болыңыз; кез келген цикл үзік немесе ажыратылатын болуы тиіс.
Әрбір торапта blur/box-shadowсыз элементтер массивтерінде (кесте, грид) микроэффектілер жасаңыз.
'prefers-reduced-motion: reduce': fade ≤ 100 мс немесе статикалық күй қосқышын ғана қалдырыңыз.

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

8) Тайминг токендері (дизайн-жүйе)

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

Атауы: 'motion. duration.{role}` и `motion. easing. {role} '- компоненттер мен Figma қозғалтқышы үшін бірыңғай.

9) Іске асыру: CSS және 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) Уақыт композициясы: параллель vs бірізділігі

Параллель (fade + translate бір мезгілде) - сезу бойынша жылдам.
Бірізділік (алдымен контейнер, содан кейін контент) - құрылымы анық, бірақ ұзағырақ. Иерархияны көрсету қажет болғанда қолданыңыз.
Бір блоктағы тығыз байланысқан элементтер арасында> 60 мс «баспалдақтан» аулақ болыңыз.

11) Тайминг және контент

Мәтін: өнімдерде letter/word-by-word анимацияламаңыз; бұл маркетингтік техника.
Сандар/есептегіштер: 40-60 мс батшпен, дірілсіз layout (tabular-nums).
Графиктер: сериясын ашу 180-240 мс, hover-highlight ≤ 120 мс.

12) Қолжетімділік және қабылдау қатесі

Фокус-стильдер кідіріссіз пайда болуы тиіс.
Ескертулер/қателер - ең аз анимация (120 мс ≤), егер пайдаланушы АТ (assistive tech) болса, сілкініссіз.

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

• Press ≤ 100 мс; 'busy' мәртебесі бірден; қорытынды тост/индикатор - кідіріссіз.
• UI жауап таймингі растау анимациясынан маңызды: қысқа растау 120-160 мс.

• Бастау ≤ 200 мс, бірқалыпты цикл, тежеу 300-500 мс; шексіз жылтылдау жоқ.
• Win-жарылыс ≤ 500 мс, стробсыз; соманың мәтіні - AAA.

• Батчалармен жаңарту (250-1000 мс); көзбен шолу дифф ≤ 160 мс; орналасу секірулерсіз.
• hover/focus - «жыпылықтамау» үшін 80-120 мс жарықтандыру дебаунсы.

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

Орын ауыстыруға арналған сызықтық қисықтар («механикалылық» сезімі).
Түймешіктің қарапайым күйі үшін> 400 мс ұзақтығы.
Ондаған элементтерден тұратын тізім бойынша каскад 100 + мс (тартым машинасы).
Анимациядағы жүздеген элементтегі көлеңкелер/blur.
Келіспеушілік: бір өнімде әртүрлі таймингтермен бірдей әрекеттер.
Пернетақта бойынша кейінге қалдырылған фокус немесе белсендіру кідірісі.

15) QA-чек-тайминг парағы

Консистенттілік

• Таймингтер мен қисықтар токендерден алынады, бірдей әрекеттер үшін бірдей.

Жауап беру

• Press/hover/focus 80-180 мс шкаласына сәйкес келеді.
• Бірінші визуалды жауап ≤ 100 мс.

Хореография

• Кіру және шығу симметриялы; кіруден 15-30% тезірек шығу.
• Каскад 8 элементтен аспайды және 40 мс қадам.

A11y

• 'prefers-reduced-motion' қолданылды; кідіріссіз фокус.
• Жыпылықтау жоқ> 3/с.

Көрініс

• Тек 'transform/opacity' анимацияланады; жаппай blur/көлеңкелер жоқ.

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

«Motion Tokens»: duration/easing/stagger + қолдану картасы (button, overlay, tab, list).
«Rhythm & Phasing»: каскад және кері қайтарымдылық схемалары.
«Reduce Motion»: тозу ережелері мен мысалдар.
«Do/Don 't»: таймкодтары және мақсатты өлшемдері бар қысқа клиптер (INP/First Feedback).

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

Жақсы тайминг - бұл бірден жауап беру, түсінікті хореография және үнемді қисықтар. Микро күйде қысқа уақыт ұстаңыз, тек мағынаны қосатын жерде созыңыз, reduce-motion-ды сақтаңыз және «қымбат» қасиеттерді анимацияламаңыз. Сонда интерфейс тірі және сенімді сезіледі - әсіресе нақты уақыт пен жоғары мөлшерлемелер сценарийлерінде.