Тарроҳии ҳаракат ва аниматсияҳои интерфейс

1) Чаро аниматсия дар маҳсулот

• муносибатҳои сабабиро шарҳ медиҳад (дар куҷо нопадид шуд, унсур аз куҷо пайдо шуд),
• диққатро ба амали асосӣ равона мекунад,
• натиҷаро тасдиқ мекунад (фикру мулоҳизаҳо) ва сарбории маърифатиро коҳиш медиҳад,
• гузаришҳоро пешгӯишаванда ва "моддӣ" мекунад.

Қоидаи № 1: маъно> услуб. Ягон аниматсия ба саволи "чӣ шуд ва он бо ман чӣ гуна робита дорад?" Ҷавоб медиҳад ».

2) Принсипҳои асосӣ

1. Иерархияи ҳаракат: Зарфҳо аввал, баъд мундариҷа, баъд қисмҳо ҳаракат мекунанд.
2. Мувофиқат: Ҳамон намунаҳо барои амалҳои якхела.
3. Пасандоз: хосиятҳои ҳадди аққал, чаҳорчӯбаҳои ҳадди аққал; кӯтоҳтар ва равшантар.
4. Физикаи воқеӣ: шитоб дар ибтидо, сустшавӣ дар охири; вуҷуд надорад "jerks".
5. Бозсозӣ: "бозгашт" худро "ба пеш" оина "ҳис мекунад.
6. Дастрасӣ: Танзимоти системаи коҳиши аниматсияро эҳтиром кунед.

3) Давомнокӣ ва хатҳо (тавсияҳо)

3. 1 Давомнокӣ (мизи корӣ/мобилӣ)

Ҳовер: 120-180м

Фокус/Фишор: 80-120 мс

Tooltip/Toast: вуруди 180-240ms, баромади 120-160ms

Модалҳо/Drouers: 200-320 мс

Гузаришҳои экран: 240-360 мс

Ҳаракат/Parallax: ≤ 200 метр дар як сегмент, аз ҳалқаҳои беохир дурӣ ҷӯед

3. 2 Хати каҷ

Асосӣ: 'кубик-безиер (0. 2, 0. 0, 0. 2, 1) '- суръати табиии "мавод"

Тезтар ворид кунед, баромади мулоим: 'кубик-безер (0. 05, 0. 7, 0. 1, 1)`

Тағйирпазирӣ (нодир, аксент): 'кубик-безер (0. 2, 0. 8, 0. 2, 1. 2) 'бо маҳдудияти overshoot ≤ 8px/8 °

Қоида: интерполясияи хаттиро барои ҳаракат ва шаффофият дар як вақт истифода набаред - эҳсоси "механикӣ".

4) Хореографияи гузариш

Намуди зоҳирӣ: миқёси сабук 0. 98→1. 0 + пажмурда шудан, 8-16 px дар баробари меҳвари пайдоиш ҷуброн карда мешавад.
Нопадидшавӣ: тартиби баръакс, тезтар аз воридшавӣ (− 20-30%).
Ҷадвалҳои тағирёбанда/тағирёбанда: "пойгоҳ" (контейнер) -и умумӣ бо 16-24 px иваз карда мешавад; ҷадвали фаъол пеш аз оғози ҳаракат равшан карда мешавад.
Рӯйхатҳо: каскадро озод кунед (20-40 мс/унсур, на бештар аз 6-8 унсур).

5) Таъсири хурд (намунаҳо)

Тугма (hover/press): shadow + subscreen/scale 0. 98; pressed bounces ≤ 80 мс.
Фокус: ҳалқаи контраст бе норавшан; ғафсӣ/шаффофияти зинда ба ҷои дурахшон.
Воридот: равшании интиқол/саҳро ба фокус; хатогиҳо - ларзиш ≤ 6 px, ≤ 140 мс, 1 давра.
Toggle/Checkbox: ба ҳолати ниҳоӣ часпед, на бештар аз 60-80 ms таъхирро пахш кунед.
Скелет/сарборӣ: дурахшон 1200-1600 мс, амплитудаи дурахшон ≤ 20%, бе дурахши тез.

6) Ҳолати мундариҷа

Боркунӣ → Муваффақият/Холӣ/Хато: як "канал" -и ҳаракат; самтҳои гуногунро омехта накунед.
Тост/Огоҳиҳо: аз ҷониби сарчашмаи ҳодиса меоянд (масалан, поёни рост барои амалҳои корбар).
Кашидан ба тароват: шиддати тағйирёбандаи баҳор; вақти бозгашт ≤ 250 мс.

7) Дастрасӣ (A11y) ва амният

Дастгирии 'prefers-кам-ҳаракат: кам кардан': Ҷойивазкунии ҳаракатҳо бо пажмурда/миқёс ≤ 1% ё гузариши статикӣ.
Аз дурахши> 3 дар як сония ва контрасти калон дурӣ ҷӯед (эпилепсияи ҳассос).
Дар корбарони таърихи бемории ҳаракат параллакс/масштаби қавӣ истифода набаред; имконоти пайвастшавиро созед.
Услубҳои фокус ҳамеша бе аниматсия намоёнанд (на танҳо ранг/ҳаракат).

8) Иҷро (60 FPS ҳамчун ҳадаф)

Танҳо шаффофият ва тағиротро зинда кунед (тарҷума/миқёс/гардиш); аз 'боло/чап/паҳнӣ/баландӣ' канорагирӣ кунед.
Композитсияро дар бар гиред: 'табдил: translate' Z (0) 'ё' тағир додан: табдил додан, шаффофият '.
Рангро бо аниматсия накардани сояҳо ва филтрҳои калон дар унсурҳои гуногун кам кунед.
Гузаришҳои калонро ба партияҳо шикастед; истифода баред Request-Animation-Frame.
Барои рӯйхатҳо, виртуализатсия дар экран/тарҳбандии дубора.

9) Нишонаҳои ҳаракат дар системаи тарроҳӣ

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

Именование: 'ҳаракат. {давомнокии' easing 'stagger}. {рол}' - 'hover', 'focus', 'overlay' In ',' page 'Transition', 'рӯйхати'.

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: истифода барои ҳолати холии тасвирӣ ва киштӣ; на барои назорати интиқодӣ. Оптимизатсия ва кэш.

11) Намунаҳои боркунӣ

Скелет ба ҷои спиннер, ки сохтори мундариҷа маълум аст.
Пешрафт: бари детерминистӣ, агар пешрафт маълум бошад; номуайян - бо суръати ягона, бе "ҷаҳиш".
Ҳангоми барқарорсозӣ скелети "шинокунанда" -ро пешгирӣ кунед - андозаҳои қулф.

12) Гузариши саҳифа/экран

Нуқтаи диққатро нигоҳ доред (гузариши унсури муштарак) - корт ба қисм "васеъ" карда мешавад.
Паймоиш "амиқ" ба пеш/рост/боло, "бозгашт" - бозгашт; самт барои платформа якхела аст.
Субстратҳои пасзамина дар қабати болоӣ то 40-60% торик мешаванд.

13) Хусусиятҳои IGaming

Чарх занед/Ошкор кунед: як суръатбахшии кӯтоҳ (≤ 200 мс) + гардиши якхела + афсурдагии мулоим; манъ кардани давраҳои беохир бе амал.
Win/Jackpot: лаппиши сабук ≤ 500 мс, строб нест; садои дукарата дар ҳаҷми паст; матни ғалаба қобили хондан аст (баръакс AAA).
Мусобиқаҳо/рейтингҳо: афзоиши ҳисоб - муқобили рақамҳои ҷадвалӣ ва қадами сабуки 40-60 мс/воҳид (маҷмӯаҳо), бидуни тарҳбандии "ҷаҳиш".
Бозии масъул: огоҳиҳо ва маҳдудиятҳо бидуни таъсири парешон; аниматсия ночиз аст, таъкид ба хондан.

14) Анти-намунаҳо

Таъхир> 120 мм барои пахш кардани ҷавоб.
"Лифт" аз шаффофият + ҷадвали 0. 9→1. 05→1. 0 бо overshoot барои ҳар як чизи хурд.
Параллакси пасзамина, ки бо ҳаракат мухолиф аст.
Фликтерҳои беохир/пульсацияҳо.
Хусусиятҳои аниматсионии тарҳ/ранг ('баландӣ', 'чап', 'филтр: норавшан ()') дар маҷмӯи элементҳо.
Хатҳо ва давомнокии доимӣ барои амалҳои якхела.

15) Раванд ва QA

• Прототипҳо бо вақт/хатҳо; хореографияи сатҳи чорчӯба.
• Феҳристи аломатҳои ҳаракат ва намунаҳо барои ҷузъҳо.

• Намоиши воҳидҳо/санҷишҳои давлатӣ (гузариш тавре ки интизор мерафт).
• Санҷишҳои визуалӣ (лаҳзаҳои охири аниматсияҳо).
• Иҷро/Ҷадвали саҳнаҳо бо сарбории ҳадди аксар.

• 'дастгирии-кам-кам' дастгирӣ карда мешавад.
• Танҳо табдил/шаффофият.
• Давомнокӣ ва хатҳо ба нишонаҳо мувофиқанд.
• Не дурахшон> 3/сония ва strobe қавӣ.
• Скелет ба ҷои спиннер, агар имкон бошад.
• Гузариш баръакс ва пешгӯишаванда аст.

16) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Аломатҳои ҳаракат: давомнокӣ/сабукӣ/стаггер бо мисолҳо.
"Намунаҳои гузариш": модалҳо, рӯйхатҳо, ҷадвалҳо, саҳифаҳо.
"A11y & Иҷро": дастур оид ба кам кардани ҳаракат ва таркиб.
"Иҷро кунед/накунед": клипҳои кӯтоҳ бо намунаҳои хуб/бад.

Хулосаи мухтасар

Тарҳи ҳаракат забони сабаб ва натиҷа аст. Вақтро кӯтоҳ нигоҳ доред, каҷҳо пайваста ва хосиятҳои арзонро пешниҳод кунед. Эҳтиром ба мавҷудият, нишонаҳои ҳуҷҷат ва санҷиши иҷро. Он гоҳ аниматсия UX-ро мустаҳкам мекунад ва ба суръат ва возеҳии интерфейс халал намерасонад.