Hereket dizaýny we animasiýa interfeýsleri

1) Önümde animasiýa näme üçin?

• sebäp-netije baglanyşyklaryny düşündirýär (nirä ýitdi, element nireden geldi),
• esasy herekete ünsi gönükdirýär,
• netijäni tassyklaýar (feedback) we aň-düşünjäni azaldýar,
• geçişleri öňünden aýdyp boljak we "duýgur" edýär.

1-nji düzgün: manysy> stili. Islendik animasiýa "näme boldy we meniň bilen nähili baglanyşygy bar?" Diýen soraga jogap berýär ».

2) Esasy ýörelgeler

1. Hereket iýerarhiýasy: ilki konteýnerler, soňra mazmuny, soňra jikme-jiklikler hereket edýär.
2. Yzygiderlilik: birmeňzeş hereketler üçin birmeňzeş nagyşlar.
3. Tygşytlamak: iň az häsiýet, iň az işgär; has gysga we has düşnükli.
4. Realistik fizika: başynda tizlenmek, ahyrynda haýallamak; "bökmek" ýok.
5. Yzyna gaýdyp gelmek: "yza" aýna "öňe" duýulýar.
6. Elýeterlilik: Animasiýany azaltmak üçin ulgam sazlamalaryna hormat goýuň.

3) Dowamlylygy we egrileri (teklipler)

3. 1 Dowamlylygy (desktop/mobile)

Hover: 120-180 ms

Focus/Pressed: 80–120 мс

Tooltip/Toast: giriş 180-240 ms, çykyş 120-160 ms

Modalkalar/drouerler: 200-320 ms

Ekran geçişleri: 240-360 ms

Aýlawlar/paralaks: segment üçin 200 ms ≤, tükeniksiz aýlawlardan gaça duruň

3. 2 Egri

Esasy: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) '- tebigy "material" depgini

Giriş has çalt, çykyş has ýumşak: 'cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Çeýeligi (seýrek, aksent): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) 'overshoot çäklendirmesi bilen ≤ 8px/8 °

Düzgün: Bir wagtyň özünde hereket etmek we opacity üçin çyzykly interpolýasiýany ulanmaň - "mehaniklik" duýgusy.

4) Geçişleriň horeografiýasy

Görnüşi: ýeňil masştab 0. 98→1. 0 + fade-in, ýüze çykýan okda 8-16 px.
Ýitip gitmek: yzyna sargyt, girmekden has çalt (20-30% −).
Bellikleri üýtgetmek/üýtgetmek: umumy "esas" (konteýner) 16-24 px-e geçýär; işjeň goýma hereket başlamazdan ozal görkezilýär.
Sanawlar: kaskady gowşadyň (stagger 20-40 ms/element, 6-8 elementden köp bolmaly däl).

5) Mikro-özara täsirler (patterns)

Düwme (hover/press): kölege + ýeňil gizlin/scale 0. 98; pressed 80 ms ≤ bökýär.
Fokus: blursyz gapma-garşylyk halkasy; glow däl-de, galyňlygy/aç-açanlygy animasiýa ediň.
Input: çarçuwany focus-a bölmek/yşyklandyrmak; ýalňyşlyklar - sarsdyrmak ≤ 6 px, ≤ 140 ms, 1 aýlaw.
Toggle/Checkbox: snap iň soňky ýagdaýa çenli, basmagyň gijikdirilmegi 60-80 ms-den köp bolmaly däldir.
Skelet/ýüklemek: shimmer 1200-1600 ms, ýagtylyk amplitudasy ≤ 20%, ýiti çyralar ýok.

6) Mazmunyň ýagdaýy

Ýüklemek → Success/Empty/Error: hereketiň bir "kanaly"; dürli ugurlary garyşdyrmaň.
Toast/Alerts: hadysanyň çeşmesinden gelýär (mysal üçin, ulanyjynyň hereketleri üçin aşaky sag).
Pull to refresh: elastik poslama bilen uzalmak; yzyna gaýtarmak wagty ≤ 250 ms.

7) Elýeterlilik (A11y) we howpsuzlyk

'prefers-reduced-motion: reduce': fade/scale ≤ 1% ýa-da statik geçişi çalyşyň.
Sekuntda> 3 çyralaryndan we uly kontrast şöhlelerinden (fotosensitiw epilepsiýa) gaça duruň.
Ulanyjylarda güýçli parallax/zoom ulanmaň; öçürmek mümkinçiligini beriň.
Fokus stilleri animasiýasyz hemişe görünýär (diňe reňk/hereket däl).

8) Öndürijilik (maksat hökmünde 60 FPS)

Diňe opacity we transform (translate/scale/rotate) animasiýa ediň; 'top/left/width/height' -den gaça duruň.
Kompozisiýany açyň: 'transform: translateZ (0)' ýa-da 'will-change: transform, opacity' (ortaça).
Repaint iň az: köp elementli kölegeleri we süzgüçleri animasiýa etmäň.
Batçlara uly geçişleri döwüň; requestAnimationFrame.
Sanawlar üçin - ekrandan daşarda wirtualizasiýa/gaýtadan düzmek.

9) Dizaýn ulgamyndaky motion bellikleri

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) Durmuşa geçirmek (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: suratly boş ýagdaýlar we onboarding üçin ulanyň; möhüm gözegçilikler üçin däl. Optimizirläň we kesiň.

11) Ýüklemek nusgalary

Kontentiň gurluşy belli bolan ýerinde spinneriň ýerine skeleton.
Progress: ösüş belli bolsa, kesgitlenen bar; indeterminirlenen - deň depginde, "bökmezden".
Üýtgedilende "ýüzýän" skeletondan gaça duruň - ölçegleri düzüň.

12) Sahypalaryň/ekranlaryň arasyndaky geçişler

Üns nokadyny saklaň (shared element transitions) - kartoçka jikme-jik "açylýar".
"Çuň" nawigasiýa öňe/sag/ýokary, "yza" - yza; platforma üçin ýeke-täk ugur.
Fon substraty 40-60% -e çenli garalýar.

13) iGaming aýratynlyklary

Spin/Reveal: bir gysga tizlenme (≤ 200 ms) + birmeňzeş aýlanma + ýumşak azalma; hereketsiz tükeniksiz aýlawlara gadaganlyk.
Win/Jackpot: ýagtylygyň ýokarlanmagy ≤ 500 ms, gapysyz; pes sesli ses bilen iki gezek; ýeňşiň teksti okalýar (kontrast boýunça AAA).
Ýaryşlar/reýtingler: hasap inkrementi - tablisaly sanlar we ýeňil ädimli hasaplaýjy 40-60 ms/birlik (batç), "bökmezden" layout.
Jogapkär oýun: ünsüni sowmaýan bildirişler we çäkler; animasiýa iň az, okalmaga ünsi jemleýär.

14) Anti-patternler

Gijä galmak> 120 ms.
"Lift" opacity + scale -den 0. 9→1. 05→1. 0 s overshoot her bir owershoot.
Skroll bilen gapma-garşylykly fon paralaksy.
Tükeniksiz titremeler/impulslar.
Köp elementde layout/paint ('height', 'left', 'filter: blur ()') aýratynlyklarynyň animasiýasy.
Hereketleriň dowamlylygy we dowamlylygy birmeňzeş.

15) Proses we QA

• Taýmingli/egrili prototipler; freým derejesinde horeografiýa.
• Motion-tokenleriň katalogy we komponentler üçin mysallar.

• Görnüklilik/ýagdaýlaryň unit-synaglary (geçişler garaşylyşy ýaly tamamlanýar).
• Wizual synaglar (animasiýalaryň ahyrynyň snapshotlary).
• Iň köp ýüklenen sahnalarda profillemek (Performance/Timeline).

• 'prefers-reduced-motion' tarapyndan goldanyldy.
• Diňe transform/opacity.
• Dowamlylygy we egrileri belliklere laýyk gelýär.
• Çyralar ýok> 3/sek we güýçli strobe.
• Spinner ýerine skeleton.
• Geçişler tersine we öňünden aýdyp bolýar.

16) Dizaýn-ulgamdaky resminamalar

"Motion-tokenler": duration/easing/stagger mysallar bilen.
"Geçişleriň patternleri": modallar, sanawlar, tablar, sahypalar.
"A11y & Performance": reduce-motion we kompoziting boýunça gollanma.
"Do/Don 't": üstünlikli/şowsuz mysallar bilen gysga klipler.

Gysgaça gysgaça

Hereket dizaýny sebäpleriň we netijeleriň dilidir. Taýmingleri gysga saklaň, egrileri utgaşdyryň, häsiýetleri bolsa render üçin arzan. Elýeterlilige hormat goýuň, bellikleri dokumentleşdiriň we öndürijiligini barlaň. Şonda animasiýa UX-ni güýçlendirer we interfeýsiň tizligine we aýdyňlygyna päsgel bermez.