Анимация убакыт жана UX-кабылдоо

1) Эмне үчүн убакыт критикалык

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

Эреже: тайминг мааниге кызмат кылат. Эгерде анимация "эмне болгонун" түшүнүүгө жардам бербесе, анда ал тоскоолдук кылат.

2) Психофизика жана босоголор

• ≤ 50 ms - киргизүү жаңырыгы (басып чыгаруу, басуу эффекти); бир заматта көрүнөт.
• ≤ 100 ms - иш-аракет боюнча биринчи визуалдык фидбек ("басылган" баскычы).
• 120-180 ms - hover/focus, "жумшак" мамлекеттик өтүү.
• 180-280 ms - модалдар/панелдер; "табигый" көрүнүш катары кабылданат.
• 300-500 ms - кылдат жылыш (shared элемент), прогресс "алдыга кадам".
💡 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 ms): жеңил fade/scale 0. 98 → 1 - башталышы белги.

2. Транспорт (негизги этап): көчүп/ачуу.

3. Чөкмө (20-60 ms): кичинекей тормоз, көлөкө/шакек focus турукташтыруу.

• Тизмеси: 20-40 ms/элемент, максималдуу катары менен 6-8 элементтер.
• Формалар: каскадсыз; баары кирүүгө тоскоолдук кылбоо үчүн бир убакта пайда болот.

Артка кайтаруу: "артка" күзгү "алдыга" жана 15-30% тезирээк.

5) Өз ара аракеттенүү түрлөрү боюнча таймингдер

6) Убакытты кабыл алуу: реалдуу ылдамдатуусуз кантип "тездетүү"

Instant affordance: cursors/pressed стилин заматта өзгөртүү ≤ 100ms тармагына чейин.
Кыйынчылыкты жашыруу: жүктөөлөрдү параллелдештирүү; тактасынын ачылышына чейин маалыматтарды өбөлгө.
Semantic якорь: shared элемент жана кыймыл багыты күтүү когнитивдик наркын азайтат.
Оптимисттик жаңыртуулар: UI "даяр" дароо, Server тастыктайт же тоголотуп жатат.

7) Чарчоо жана гигиеналык анимация

чексиз толкунданып качуу; ар кандай цикл үзгүлтүктүү же өчүрүлүшү керек.
Микроэффекттерди элементтердин массивдеринде (таблица, грид) ар бир түйүн боюнча blur/box-shadow жок жасаңыз.
Колдоо 'prefers-reduced-motion: reduce': гана fade ≤ 100 ms же статикалык Service Switch калтыруу.

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 ms батч кадам, титиреп жок layout (tabular-nums).
Graphics: 180-240 мс сериясы ачылышы, hover-highlight ≤ 120 мс.

12) Жеткиликтүүлүк жана кабылдоо катасы

Фокус стилдери кечиктирбестен пайда болушу керек.
Эскертүүлөр/каталар - анимация минималдуу (120 мс ≤), эгерде колдонуучу АТ (assistive tech) менен титиреп жок.

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

• Press ≤ 100ms; статус 'busy' дароо; акыркы тост/индикатор - кечиктирбестен.
• Убакыт жооп UI ырастоо анимация маанилүү: ырастоо кыска 120-160 ms.

• баштоо ≤ 200 мс, бир калыпта цикл, 300-500 мс тормоз; чексиз жылтылдаган жок.
• Win-Splash ≤ 500ms, Strobe жок; суммасынын тексти - AAA.

• тактоо батч (250-1000 ms); көрүү diff ≤ 160 ms; макети жок.
• hover/focus боюнча - Дебаунс жарык 80-120 ms, "жарк".

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

Кыймыл үчүн сызыктуу ийри сызыктар ("механикалык" сезим).
жөнөкөй баскычы шарттары үчүн> 400 ms узактыгы.
Каскад 100 + ms ондогон элементтердин тизмеси боюнча (оор).
Көлөкө/blur анимациядагы жүздөгөн элементтерде.
Ыраатсыздык: бир продуктта ар кандай таймингдер менен бирдей аракеттер.
Кийинкиге калтырылган көңүл же клавиатура боюнча активдештирүү кечигүү.

15) QA-чек тизмеси

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

• Таймингдер жана ийри сызыктар токендерден алынат, бирдей иш-аракеттер үчүн бирдей.

Жооп

• Press/hover/focus 80-180 ms шкалага туура келет.
• Биринчи визуалдык жооп ≤ 100 ms.

Хореография

• Кирүү жана чыгуу симметриялуу; кирүү 15-30% тезирээк чыгуу.
• Cascade 8 элементтерин жана 40 ms кадам ашпайт.

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ду сактаңыз жана "кымбат" касиеттерди анимациялабаңыз. Анда интерфейс жандуу жана ишенимдүү сезилет - өзгөчө реалдуу убакыт жана жогорку коюмдардын сценарийлеринде.