Hareket tasarımı ve arayüz animasyonları

1) Neden üründe animasyon

• Nedensel ilişkileri açıklar (nerede kaybolduğunu, elementin nereden geldiğini),
• dikkati ana eyleme yönlendirir,
• Sonucu onaylar (geri bildirim) ve bilişsel yükü azaltır,
• geçişleri öngörülebilir ve "somut" hale getirir.

Kural # 1: anlam> stil. Herhangi bir animasyon "Ne oldu ve benimle nasıl bir ilişkisi var?" ».

2) Temel ilkeler

1. Hareket hiyerarşisi: Konteynerler önce hareket eder, sonra içindekiler, sonra parçalar.
2. Tutarlılık: Aynı eylemler için aynı desenler.
3. Tasarruflar: minimum özellikler, minimum çerçeveler; daha kısa ve net.
4. Gerçekçi fizik: Başlangıçta hızlanma, sonunda yavaşlama; "Pislik'diye bir şey yok.
5. Tersinirlik: "Geri", ayna gibi "ileri" hissi verir.
6. Erişilebilirlik: Animasyon azaltma sistemi ayarlarına saygı gösterin.

3) Süreler ve eğriler (öneriler)

3. 1 Süreler (masaüstü/mobil)

Hover: 120-180ms

Odak/Preslenmiş: 80-120 мс

Araç ipucu/Tost: giriş 180-240ms, çıkış 120-160ms

Modals/Drouers: 200-320 ms

Ekran geçişleri: 240-360 ms

Kaydırma/Paralaks: Segment başına ≤ 200ms, sonsuz döngülerden kaçının

3. 2 Eğriler

Ana: 'kübik-bezier (0. 2, 0. 0, 0. 2, 1) '- doğal "malzeme" hızı

Giriş daha hızlı, çıkış daha yumuşak: 'cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Esneklik (nadir, vurgu): 'kübik-bezier (0. 2, 0. 8, 0. 2, 1. 2) 'limit aşımı ile ≤ 8px/8 °

Kural: Aynı anda hareketler ve opaklık için doğrusal enterpolasyon kullanmayın - "mekaniklik" hissi.

4) Geçiş koreografisi

Görünüm: hafif ölçek 0. 98→1. 0 + fade-in, başlangıç ekseni boyunca 8-16 px ofset.
Kaybolma: Ters sıra, girişten daha hızlı (− %20-30).
Sekmeleri çevirme/değiştirme: genel "temel" (konteyner) 16-24 px kaydırılır; Etkin sekme, hareket başlamadan önce vurgulanır.
Listeler: Kaskadı gevşetin (stagger 20-40 ms/element, en fazla 6-8 element).

5) Mikro etkileşimler (kalıplar)

Düğme (hover/press): gölge + ışık alt ekranı/ölçek 0. 98; Basılmış sekmeler ≤ 80ms.
Odak: bulanıksız kontrast halkası; Işıma yerine kalınlığa/saydamlığa animasyon uygulayın.
Girdiler: Odakta taşıma/alan aydınlatması; Hatalar - sallama ≤ 6 piksel, ≤ 140 ms, 1 döngü.
Geçiş/Onay Kutusu: son konuma yaslayın, gecikmeyi en fazla 60-80 ms tıklatın.
İskelet/yük: parıltı 1200-1600 ms, parlaklık genliği ≤ %20, keskin flaşlar olmadan.

6) İçerik durumları

Yükleme - Başarı/Boş/Hata: Hareketin bir "kanalı"; Farklı yönleri karıştırmayın.
Tost/Uyarılar: olayın kaynak tarafından gelir (örn. Kullanıcı eylemleri için sağ alt).
Yenilemek için çekin: elastik yay gerginliği; Geri dönüş süresi ≤ 250 ms.

7) Erişilebilirlik (A11y) ve güvenlik

Support 'prefers-reduced-motion: reduce': Hareketleri solma/ölçekleme ≤ %1 veya statik geçişle değiştirin.
Saniyede> 3 flaş ve büyük kontrastlı flaşlardan (ışığa duyarlı epilepsi) kaçının.
Hareket hastalığı öyküsü olan kullanıcılarda güçlü paralaks/zoom kullanmayın; Bağlantıyı kes seçeneğini kullanın.
Odak stilleri animasyon olmadan her zaman görülebilir (sadece renk/hareket değil).

8) Performans (hedef olarak 60 FPS)

Yalnızca opaklığa animasyon uygulayın ve dönüştürün (çevir/ölçeklendir/döndür); 'üst/sol/genişlik/yükseklik'den kaçının.
Birleştirmeyi dahil edin: 'transform: translateZ (0)' veya 'will-change: transform, opacity'.
Büyük bulanıklaştırma gölgelerini ve filtrelerini birden çok öğe üzerinde canlandırmayarak yeniden boyamayı en aza indirin.
Büyük geçişleri gruplara ayırın; requestAnimationFrame kullanın.
Listeler için ekran dışı sanallaştırma/yeniden mizanpaj.

9) Tasarım sistemindeki hareket belirteçleri

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) Uygulama (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: açıklayıcı boş durumlar ve onboarding için kullanın; Kritik kontroller için değil. Optimize ve önbellek.

11) Yükleme desenleri

İçerik yapısının bilindiği bir spinner yerine iskelet.
İlerleme: ilerleme biliniyorsa deterministik çubuk; belirsiz - tek tip bir tempo ile, "gerizekalı" olmadan.
Yeniden inşa ederken "yüzen" iskeletten kaçının - boyutları kilitleyin.

12) Sayfa/ekran geçişleri

Dikkat noktasını tutun (paylaşılan eleman geçişleri) - kart parçaya "genişletilir".
Navigasyon "derin" ileri/sağ/yukarı, "geri" - geri gider; Platform için de aynı şey geçerli.
Arka plan substratı bindirmelerde %40-60 oranında koyulaşır.

13) iGaming'in özellikleri

Spin/Reveal: bir kısa hızlanma (≤ 200 ms) + düzgün dönme + yumuşak zayıflama; Eylemsiz sonsuz döngülerin yasaklanması.
Kazan/Jackpot: 500 ms ≤ hafif sıçrama, flaş yok; Düşük ses seviyesinde çift ses; Zafer metni okunabilir (aksine AAA).
Turnuvalar/derecelendirmeler: hesap artışı - tablo numaraları ve 40-60 ms/birim (toplu) ışık adımı ile sayaç, "atlar" düzeni olmadan.
Sorumlu oyun: dikkat dağıtıcı etkiler olmadan bildirimler ve limitler; Animasyon minimal, okunabilirliğe vurgu.

14) Anti-desenler

Yanıtı tıklamak için gecikme> 120ms.
Opaklık + ölçek 0'dan "Asansör". 9→1. 05→1. Her küçük şey için aşma ile 0.
Kaydırma ile çakışan arka plan paralaksı.
Sonsuz titreşimler/titreşimler.
Bir öğe kümesi üzerinde mizanpaj/boyama özelliklerini ('height','sol ',' filter: blur () ') hareketlendirin.
Aynı eylemler için sabit olmayan eğriler ve süreler.

15) Süreç ve QA

• Zamanlamaları/eğrileri olan prototipler; Çerçeve düzeyinde koreografi.
• Hareket belirteçleri kataloğu ve bileşenler için örnekler.

• Birim görünürlüğü/durum testleri (geçişler beklendiği gibi sona erer).
• Görsel testler (animasyonların sonunun anlık görüntüleri).
• Maksimum yüke sahip sahnelerde Performans/Zaman Çizelgesi.

• 'prefers-reduced-motion' desteklenir.
• Yalnızca dönüştür/opaklık.
• Süreler ve eğriler belirteçlere karşılık gelir.
• Yanıp sönme yok> 3/sn ve güçlü flaş.
• Mümkünse spinner yerine iskelet.
• Geçişler geri dönüşümlü ve öngörülebilir.

16) Tasarım sistemindeki belgeler

Hareket belirteçleri: süre/hareket hızı/örneklerle stagger.
"Geçiş kalıpları": modaller, listeler, sekmeler, sayfalar.
"A11y ve Performans": Hareketi azaltma ve birleştirme için kılavuz.
"Do/Don't": iyi/kötü örnekleri olan kısa klipler.

Kısa Özet

Hareket tasarımı neden ve sonuç dilidir. Zamanlamaları kısa, eğrileri tutarlı ve özellikleri işlemek için ucuz tutun. Kullanılabilirliğe, belge belirteçlerine saygı gösterin ve performansı kontrol edin. Daha sonra animasyon UX'i güçlendirecek ve arayüzün hızını ve netliğini engellemeyecektir.