ანიმაციების დრო და UX აღქმა

1) რატომ არის ტაიმინგი კრიტიკული

• მყისიერი პასუხის გრძნობა და სისტემაში ნდობა;
• მიზეზების-საგამოძიებო კავშირების სიცხადე (სად/სად გადავიდა ელემენტი);
• დაღლილობა და კომფორტი ხანგრძლივ სესიებში;
• მოქმედების სიზუსტე (განსაკუთრებით მობილური და მაღალი განაკვეთებით).

წესი: ტაიმინგი მნიშვნელობას ანიჭებს. თუ ანიმაცია არ გვეხმარება იმის გაგებაში, თუ რა მოხდა, ეს ერევა.

2) ფსიქოფიზიკა და ბარიერები

• 50 ms - შეყვანის ექო (ბეჭდვა, დაწკაპუნების ეფექტი); როგორც ჩანს მყისიერი.
• 100 ms - პირველი ვიზუალური fidback მოქმედებით (ღილაკი „დაჭერით“).
• 120-180 ms - hover/focus, „რბილი“ სახელმწიფოს გადასვლა.
• 180-280 ms - მოდალური/პანელები; აღიქმება, როგორც „ბუნებრივი“ გარეგნობა.
• 300-500 ms - ყურადღებიანი მოძრაობა, პროგრესი „წინ გადადგმული ნაბიჯი“.
💡 700 ms - „ნელი“ რისკი; დატოვეთ მხოლოდ იმ შემთხვევაში, თუ მას აქვს მნიშვნელობა (მაგალითად, მოგების დადასტურება).
• 1200-1600 ms - skeleton/shimmer ციკლი; უფრო მეტხანს - დაიღალა.

3) აჩქარება და წონა

• სტანდარტი: 'cubic-bezier (0. 2, 0, 0. 2, 1) '- ნეიტრალური „მატერიალური“ დინამიკა.
• აჩქარება: '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.

წონის ოპტიკა: რაც უფრო მეტი კომპონენტია (ბარათი, drower), მით უფრო გრძელია ხანგრძლივობა (+ 40-80 ms ბაზაზე).

4) ფაზები და ქორეოგრაფია

1. ინიციაცია (10-40 ms): მსუბუქი fade/scale 0. 98-1 - დაწყების სიგნალი.

2. ტრანსპორტი (ძირითადი ეტაპი): გადაადგილება/გამჟღავნება.

3. ნალექი (20-60 ms): მცირე სამუხრუჭე, ჩრდილის/ფოკუსის რგოლის სტაბილიზაცია.

• სიები: 20-40 ms/ელემენტი, მაქსიმუმ 6-8 ელემენტი ზედიზედ.
• ფორმები: კასკადის გარეშე; ყველაფერი ერთდროულად ჩნდება ისე, რომ ხელი არ შეუშალოს შესვლას.

შექცევადობა: „უკან“ სარკე „წინ“ და უფრო სწრაფად 15-30% -ით.

5) ტაიმინგი ურთიერთქმედების ტიპებზე

6) დროის აღქმა: როგორ „დააჩქაროს“ რეალური აჩქარების გარეშე

Instant affordance: მყისიერი შეცვლა cursors/pressed სტილის ქსელში 100 ms.
სირთულის დამალვა: დატვირთვის პარალელი; პანელის გახსნამდე მონაცემების ფონის დაჭერა.
სემანტიკური წამყვანები: შეკუმშული მოძრაობა და მოძრაობის მიმართულება ამცირებს მოლოდინის კოგნიტურ ღირებულებას.
ოპტიმისტური განახლებები: UI „მზად არის“ დაუყოვნებლივ, სერვერი ადასტურებს ან ასწორებს.

7) დაღლილობა და ანიმაციის ჰიგიენა

მოერიდეთ გაუთავებელ პულსაციებს; ნებისმიერი ციკლი უნდა იყოს წყვეტილი ან გათიშული.
მიკრო ეფექტები ელემენტების მასივებზე (ცხრილი, მაკიაჟი) გააკეთეთ blur/box-shadow გარეშე თითოეულ კვანძზე.
შეინარჩუნეთ 'prefers-reduced-motion: reduce': დატოვეთ მხოლოდ fade-100 ms ან სტატიკური სტატიკური მდგომარეობის შეცვლა.

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) დროის შემადგენლობა: პარალელი თანმიმდევრობით

პარალელურად (ერთდროულად fade + translate) უფრო სწრაფად გრძნობს თავს.
თანმიმდევრობა (ჯერ კონტეინერი, შემდეგ შინაარსი) უფრო ნათელია, ვიდრე სტრუქტურა, მაგრამ უფრო გრძელი. გამოიყენეთ, როდესაც მნიშვნელოვანია იერარქიის ჩვენება.
თავიდან აიცილეთ ნაბიჯები> 60 ms ერთ ბლოკში მჭიდროდ დაკავშირებულ ელემენტებს შორის.

11) დრო და შინაარსი

ტექსტი: ნუ გამოიყენებთ letter/word-by-word პროდუქტებს; ეს არის მარკეტინგის ტექნიკა.
რიცხვები/მრიცხველები: ნაბიჯი 40-60 ms ბრძოლებით, layout- ის გარეშე (tabular-nums).
გრაფიკა: 180-240 ms სერიის გამჟღავნება, hover-highlight - 120 ms.

12) ხელმისაწვდომობა და აღქმის შეცდომა

ფოკუსის სტილი უნდა გამოჩნდეს შეფერხების გარეშე.
გაფრთხილებები/შეცდომები - მინიმალური ანიმაცია (120 ms), შერყევის გარეშე, თუ მომხმარებელი AT- ით (ასისტენტი).
თავიდან აიცილეთ ციმციმები> 3/წმ და დიდი კონტრასტული ციმციმები.

13) iGaming სპეციფიკა

• პრესა 100 ms; სტატუსი 'busy' დაუყოვნებლივ; საბოლოო სადღეგრძელო/ინდიკატორი - შეფერხებების გარეშე.
• UI პასუხის დრო უფრო მნიშვნელოვანია, ვიდრე დადასტურების ანიმაცია: დადასტურება მოკლე 120-160 ms.

• დაწყება 200 ms, ერთიანი ციკლი, 300-500 ms დამუხრუჭება; არ არის უსასრულო ციმციმები.
• Win სიჩქარე 500 ms, სტაგნაციის გარეშე; თანხის ტექსტი არის AAA.

• განახლებები ბრძოლებით (250-1000 ms); ვიზუალური ჩანაწერი 160 ms; განლაგების გარეშე.
• Hover/focus- ზე - 80-120 ms განათების მორბენალი ისე, რომ არ იყოს „შაკიკი“.

14) ანტი შაბლონები

ხაზოვანი მრუდი მოძრაობისთვის („მექანიზმის“ შეგრძნება).
ხანგრძლივობა> 400 ms ღილაკის მარტივი მდგომარეობისთვის.
კასკადი 100 + ms ათეულობით ელემენტის ჩამონათვალის მიხედვით (ტიაგომოტინი).
ჩრდილები/ბლური ასობით ელემენტზე ანიმაციაში.
შეუსაბამობა: იგივე ქმედებები სხვადასხვა ტაიმინგით ერთ პროდუქტში.
დაგვიანებული ფოკუსი ან კლავიატურის გააქტიურების შეფერხება.

15) QA ჩეკების სია

თანმიმდევრულობა

• ტაიმინგები და მრუდები მიიღება ნიშნებისგან, იგივეა იგივე მოქმედებებისთვის.

გამოხმაურება

• Press/hover/focus ჯდება მასშტაბით 80-180 ms.
• პირველი ვიზუალური პასუხი 100 ms.

ქორეოგრაფია

• შესასვლელი და გასასვლელი სიმეტრიულია; გასვლა უფრო სწრაფია, ვიდრე შესვლა 15-30%.
• კასკადი არ აღემატება 8 ელემენტს და 40 ms ნაბიჯს.

A11y

• prefers-reduced-motion 'მხარს უჭერს; ფოკუსი შეფერხების გარეშე.

არ არსებობს მოციმციმე> 3/წმ

შესრულება

• ანიმაცია ხდება მხოლოდ 'ტრანსფორმაცია/opacity'; არ არსებობს მასიური ბლურ/ჩრდილები.

16) დოკუმენტაცია დიზაინის სისტემაში

Motion Tokens: duration/easing/stagger + განაცხადის ბარათი (button, overlay, tab, სია).
„Rhythm & Phasing“: კასკადის და შექცევადობის სქემები.
„Reduce Motion“: დეგრადაციის წესები და მაგალითები.
„Do/Don 't“: მოკლე კლიპები დროის კოდებით და სამიზნე მეტრიკებით (INP/პირველი Feedback).

მოკლე რეზიუმე

კარგი დრო არის მყისიერი პასუხი, გასაგები ქორეოგრაფია და ეკონომიური მრუდი. შეინარჩუნეთ მოკლე ხანგრძლივობა მიკრო სახელმწიფოებისთვის, გაჭიმეთ მხოლოდ იქ, სადაც ეს აზრს მატებს, მხარი დაუჭირეთ reduce-motion- ს და არ განასახიეროთ „ძვირადღირებული“ თვისებები. შემდეგ ინტერფეისი იგრძნობა ცოცხალი და საიმედო - განსაკუთრებით რეალურ დროში და მაღალი მაჩვენებლების სცენარებში.