Animasyon zamanlaması ve UX algısı

1) Zamanlama neden kritik

• Sistemde anlık tepki ve güven duygusu;
• Neden ve sonuç netliği (elemanın taşındığı/taşındığı);
• Uzun seanslarda yorgunluk ve rahatlık;
• Eylemlerin doğruluğu (özellikle mobil cihazlarda ve yüksek oranlarda).

Kural: Zamanlama bir amaca hizmet eder. Animasyon'ne olduğunu "anlamaya yardımcı olmazsa, müdahale eder.

2) Psikofizik ve eşikler

• ≤ 50 ms - yankı girişi (baskı, tıklama efekti); anlık görünüyor.
• ≤ 100 ms - eylemle ilk görsel geri bildirim ("basıldı" düğmesi).
• 120-180 ms - hover/focus, yumuşak durum geçişi.
• 180-280 ms - modeller/paneller; "Doğal'bir görünüm olarak algılanır.
• 300-500 ms - paylaşılan eleman, ilerleme ileri adım.
💡 700 ms - "yavaşlık" riskleri; Sadece mantıklı ise bırakın (örneğin, bir kazancın onaylanması).
• ≈ 1200-1600 ms - iskelet/ışıltı döngüsü; daha uzun - yorucu.

3) Hareket hızı ve ağırlık eğrileri

• Standart: 'kübik-bezier (0. 2, 0, 0. 2, 1) '- nötr "malzeme" dinamikleri.
• Preslenmiş: 'kübik-bezier (0. 4, 0, 1, 1) '- hızlı giriş, kısa tıklama.
• Kaplama: 'kübik-bezier (0, 0, 0. 2, 1) '- yumuşak çıkış.
• Altı çizili vurgu (nadir): 'kübik-bezier (0. 2, 0. 8, 0. 2, 1. 2) 'с aşma ≤ 8 px.

Ağırlık optiği: Bileşen ne kadar büyük olursa (kart, çekmece), süre o kadar uzun olur (tabana + 40-80 ms).

4) Aşamalar ve koreografi

1. Başlatma (10-40ms): hafif solma/ölçek 0. 98 - 1 - başlangıç sinyali.

2. Taşıma (ana faz): taşıma/açma.

3. Draft (20-60 ms): küçük fren, gölge/odak halkası stabilizasyonu.

• Listeler: 20-40 ms/öğe, üst üste en fazla 6-8 öğe.
• Formlar: basamaksız; Her şey, girdiye müdahale etmeyecek şekilde aynı anda görünür.

Tersinirlik: "Geri" aynalar "ileri've %15-30 daha hızlı.

5) Etkileşim türüne göre zamanlamalar

6) Zaman algısı: Gerçek hızlanma olmadan nasıl "hızlandırılır"

Anında uygun fiyat: Imleçlerin/preslenmiş stilin anında değişimi ≤ ağdan önce bile 100 ms.
Karmaşıklığın gizlenmesi: paralel indirmeler; Paneli açmadan önce arka plan verileri yukarı çekilir.
Duyu çapası: Paylaşılan unsur ve hareket yönü, beklemenin bilişsel maliyetini azaltır.
İyimser güncellemeler: UI hemen "hazır", sunucu onaylar veya geri alır.

7) Yorgunluk ve animasyon hijyeni

Sonsuz titreşimlerden kaçının; Herhangi bir döngü aralıklı veya bağlantısız olmalıdır.
Her düğümde bulanıklık/kutu-gölge olmadan eleman dizileri (tablo, ızgara) üzerinde mikro etkiler yapın.
'prefers-reduced-motion: reduce' Desteği: yalnızca 100ms ≤ solmaya veya statik durum anahtarına izin verin.

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

8) Zamanlama belirteçleri (tasarım sistemi)

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

Adlandırma: 'hareket. Süre. {rol} 'и' hareketi. Hareket hızı. {rol} '- bileşenler ve Figma motor için aynıdır.

9) Uygulama: CSS ve 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) Zamanın bileşimi: paralel vs dizi

Paralel (aynı anda soldur + çevir) - daha hızlı hissedin.
Dizi (önce konteyner, sonra içerik) daha net bir yapıdır, ancak daha uzundur. Hiyerarşiyi göstermek önemli olduğunda uygulayın.
Aynı blokta yakından ilişkili elemanlar arasında> 60 ms adımlardan kaçının.

11) Zamanlama ve içerik

Metin: ürünlerde harf/kelime-kelime animasyon yapmayın; Bu bir pazarlama tekniği.
Sayılar/sayaçlar: adım 40-60 ms batchami, jitter düzeni yok (tabular-nums).
Grafikler: açılış serisi 180-240 ms, vurgulu vurgu ≤ 120 ms.

12) Erişilebilirlik ve algısal hata

Odak stilleri gecikmeden görünmelidir.
Uyarılar/hatalar - minimum animasyon (≤ 120 ms), kullanıcı AT (yardımcı teknoloji) ile ise sallama yok.
Yanıp sönme> 3/s ve büyük kontrast titremelerinden kaçının.

13) iGaming'in özellikleri

• Basın ≤ 100 ms; Durum 'meşgul' hemen; Son tost/gösterge - gecikme yok.
• UI yanıt zamanlaması onay animasyonundan daha önemlidir: onay kısa 120-160 ms'dir.

• 200 ms ≤ başlayın, düzgün çevrim, 300-500 ms frenleme; Sonsuz titreme yok.
• Win-burst ≤ 500 ms, strobe yok; Miktar metni AAA'dır.

• Toplu olarak güncellemeler (250-1000 ms); Görsel diff ≤ 160 ms; düzen sıçramaları olmadan.
• Hover/focus üzerinde - "göz kırpmamak" için arka ışığı 80-120 ms düşürün.

14) Anti-desenler

Hareketler için doğrusal eğriler ("mekanik" hissi).
Süre> basit düğme durumları için 400 ms.
Cascade 100 + ms onlarca element (çekiş) listesine göre.
Animasyondaki yüzlerce öğede gölgeler/bulanıklaştırma.
Tutarsızlık: Aynı üründeki farklı zamanlamalarla aynı eylemler.
Klavye aktivasyonunda gecikmeli odaklanma veya gecikme.

15) QA zamanlama kontrol listesi

Tutarlılık

• Zamanlamalar ve eğriler, aynı eylemler için aynı olan belirteçlerden alınır.

Yanıt

• Basın/hover/odak 80-180 ms ölçeğine sığar.
• İlk görsel yanıt 100 ms ≤.

Koreografi

• Giriş ve çıkış simetriktir; Çıkış, girişten %15-30 daha hızlıdır.
• Kaskad 8 elementi ve 40 ms adımını geçmez.

A11y

• 'prefers-reduced-motion' desteklenir; Gecikmeden odaklanın.
• Yanıp sönme yok> 3/s.

Performans

• Sadece 'transform/opacity' canlandırılmıştır; toplu bulanıklık/gölge yok.

16) Tasarım sistemindeki belgeler

"Hareket Belirteçleri": süre/hareket hızı/stagger + uygulama haritası (düğme, bindirme, sekme, liste).
"Rhythm & Phasing": basamaklı ve tersinirlik şemaları.
"Hareketi Azalt": bozulma kuralları ve örnekleri.
"Yap/Yapma": zaman kodları ve hedef metrikleri olan kısa klipler (INP/İlk Geri Bildirim).

Kısa Özet

İyi zamanlama anında yanıt, anlaşılabilir koreografi ve ekonomik eğrilerdir. Mikro durumlar için kısa süreler tutun, yalnızca anlam kattığı yerlerde gerin, hareketi azaltın ve "pahalı" özellikleri canlandırmayın. Ardından arayüz, özellikle gerçek zamanlı ve yüksek riskli senaryolarda canlı ve güvenilir hissediyor.