Animasiýa wagty we UX duýgusy

1) Taýming näme üçin möhüm?

• derrew jogap duýgusy we ulgama bolan ynam;
• sebäpler-derňew gatnaşyklarynyň aýdyňlygy (element nireden/nirä göçdi);
• uzak sessiýalarda ýadawlyk we rahatlyk;
• hereketleriň takyklygy (esasanam ykjam we ýokary nyrhlarda).

Düzgün: Taýming manyda hyzmat edýär. Animasiýa "näme boldy" diýip düşünmäge kömek etmese, bu päsgelçilik döredýär.

2) Psihofizika we bosagalar

• ≤ 50 ms - giriş sesleri (çap etmek, basmak-effekt); duýdansyz görünýär.
• ≤ 100 ms - hereket boýunça ilkinji wizual fidbek ("basyldy" düwmesi).
• 120-180 ms - hover/focus, ýagdaýyň "ýumşak" geçişi.
• 180-280 ms - modallar/paneller; "tebigy" görnüş hökmünde kabul edilýär.
• 300-500 ms - ünsli hereket (shared element), "ädim öňe" ösüş.
💡 700 ms - "haýallyk" töwekgelçiligi; diňe manysy bar bolsa goýuň (mysal üçin, ýeňşi tassyklamak).
• ≈ 1200-1600 ms - skeleton/shimmer aýlawy; has köp - ýadadýar.

3) Tizlenme egri (easing) we "agram"

• Standart: 'cubic-bezier (0. 2, 0, 0. 2, 1) '- bitarap "maddy" dinamika.
• Tizlenme (pressed): 'cubic-bezier (0. 4, 0, 1, 1) '- çalt giriş, gysga basmak.
• Haýallamak (overlay out): 'cubic-bezier (0, 0, 0. 2, 1) '- ýumşak çykalga.
• Nygtalan aksent (seýrek): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2)` с overshoot ≤ 8 px.

Agramyň optikasy: komponent (kartoçka, drouer) näçe uly bolsa, uzynlygy şonça uzyn (baza 40-80 ms).

4) Tapgyrlar we horeografiýa

1. Başlangyç (10-40 ms): ýeňil fade/scale 0. 98 → 1 - başlangyç signaly.

2. Ulag (esasy faza): hereket etmek/açmak.

3. Çökündi (20-60 ms): kiçijik tormoz, kölege/fokus halkasyny durnuklaşdyrmak.

• Sanawlar: 20-40 ms/element, yzly-yzyna iň köp 6-8 element.
• Formalar: kaskadsyz; girişine päsgel bermezlik üçin hemme zat bir wagtda peýda bolýar.

Yzyna gaýdyp gelmek: "yza" aýna "öňe" we has çalt 15-30%.

5) Özara gatnaşyklaryň görnüşleri boýunça wagtlar

6) Wagty kabul etmek: hakyky tizlenmezden nädip "çaltlaşdyrmaly"

Instant affordance: cursors/pressed stilini derrew üýtgetmek ≤ tordan öň 100 ms.
Çylşyrymlylygy gizläň: ýüklemeleri paralelläň; panel açylýança fon maglumatlary çekmek.
Semantik labyr: shared element we hereketiň ugry garaşmagyň aň-düşünjesini peseldýär.
Optimistik täzelenmeler: UI derrew "taýýar", serwer tassyklaýar ýa-da yzyna alýar.

7) Animasiýalaryň ýadawlygy we arassaçylygy

Tükeniksiz impulslardan gaça duruň; islendik sikl üznüksiz ýa-da öçürilmeli.
Elementleriň (tablisa, grid) massiwlerinde mikro effektleri her düwünde blur/box-shadow bolmazdan ediň.
'prefers-reduced-motion: reduce' -ni saklaň: diňe 100 ms ≤ fade ýa-da statik şalteri goýuň.

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

8) Taýming bellikleri (dizaýn ulgamy)

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

Adynyň ady: 'motion. duration.{role}` и `motion. easing. {role} '- komponentleriň hereketlendirijisi we Figma üçin birdir.

9) Durmuşa geçirmek: CSS we 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) Wagtyň düzümi: paralel vs yzygiderlilik

Paralel (fade + translate bir wagtyň özünde) - duýmak üçin has çalt.
Yzygiderlilik (ilki konteýner, soň mazmun) - gurluşy has aýdyň, ýöne has uzyn. Iýerarhiýany görkezmek möhüm bolanda ulanyň.
Bir blokda ýakyn baglanyşykly elementleriň arasynda "basgançaklardan"> 60 ms-den gaça duruň.

11) Wagt we mazmun

Tekst: önümlerde letter/word-by-word animasiýa etmäň; bu marketing tehnikasy.
Sanlar/hasaplaýjylar: ädim 40-60 ms batçalar bilen, titremän layout (tabular-nums).
Grafikler: seriýany açmak 180-240 ms, hover-highlight ≤ 120 ms.

12) Elýeterlilik we duýmagyň ýalňyşlygy

Fokus stilleri gijikdirilmän peýda bolmalydyr.
Duýduryşlar/ýalňyşlyklar - iň az animasiýa (120 ms ≤), eger ulanyjy AT (assistive tech) bilen sarsmasa.

13) iGaming aýratynlyklary

• Press ≤ 100 ms; 'busy' statusy; jemleýji tost/görkeziji - gijikdirilmän.
• UI jogap wagty tassyklama animasiýasyndan has möhümdir: tassyklama gysga 120-160 ms.

• Başlangyç ≤ 200 ms, birmeňzeş aýlaw, tormoz 300-500 ms; tükeniksiz ýalpyldawuk ýok.
• Win-splash ≤ 500 ms, strobsyz; jemi teksti - AAA.

• Batch täzelenmeleri (250-1000 ms); wizual diff ≤ 160 ms; maket böküşleri bolmazdan.
• Hover/focus - yşyklandyryş debauns 80-120 ms, "ýalpyldawuk" bolmazlygy üçin.

14) Anti-patternler

Hereket etmek üçin çyzykly egriler ("mehaniklik" duýgusy).
Düwmäniň ýönekeý ýagdaýlary üçin uzynlygy> 400 ms.
Kaskad 100 ms onlarça elementiň sanawy boýunça (agyrlyk güýji).
Animasiýadaky ýüzlerçe elementde kölegeler/blur.
Gabat gelmezlik: bir önümde dürli wagtlar bilen birmeňzeş hereketler.
Klawiatura boýunça gijikdirilen üns ýa-da gijikdirme.

15) Taýmingleriň QA-çek-sanawy

Tutarlylyk

• Taýmingler we egriler tokenlerden alynýar, birmeňzeş hereketler üçin birmeňzeş.

Jogap

• Press/hover/focus 80-180 ms.
• Ilkinji wizual jogap ≤ 100 ms.

Horeografiýa

• Giriş we çykyş simmetrik; giriş 15-30% has çalt.
• Kaskad 8 elementden we 40 ms ädimden geçmeýär.

A11y

• 'prefers-reduced-motion' goldanýar; gijikdirilmän fokus.
• Yşyk ýok> 3/s.

Performans

• Diňe 'transform/opacity' animasiýa edilýär; köpçülikleýin blur/kölegeler ýok.

16) Dizaýn-ulgamdaky resminamalar

"Motion Tokens": duration/easing/stagger + ulanyş kartasy (button, overlay, tab, list).
"Rhythm & Phasing": kaskad we öwrülişik shemalary.
"Reduce Motion": pese gaçmagyň düzgünleri we mysallar.
"Do/Don 't": taýkodly we maksatly metrli gysga klipler (INP/First Feedback).

Gysgaça gysgaça

Gowy wagt - derrew jogap, düşnükli horeografiýa we tygşytly egri çyzyklar. Mikro-ýagdaýlar üçin gysga wagt saklaň, diňe many berýän ýerinde uzadyň, reduce-motiony saklaň we "gymmat" häsiýetleri janlandyrmaň. Şonda interfeýs janly we ygtybarly duýulýar - esasanam hakyky wagtda we ýokary nyrhlarda.