Hareket
Ason Motion, hareketin ortak sözlüğüdür: kısa süreler, sakin eğriler, aşmayan yaylar. Rutin iş ekranında hareket dikkat çekmez, yalnız neyin nereden geldiğini gösterir.
Süre
En uzun süre üst sınırdır. Çıkış her zaman girişten kısadır.
--ason-motion-duration-instant | 0 ms | Durum değişimi, animasyon yok |
--ason-motion-duration-quick | 70 ms | Basış geri bildirimi, anahtar |
--ason-motion-duration-fast | 110 ms | Solma, çıkış, azaltılmış harekette opaklık |
--ason-motion-duration-base | 150 ms | Küçük öğe girişi, üzerine gelme rengi |
--ason-motion-duration-relaxed | 240 ms | Açılır panel girişi, örtü, bildirim |
--ason-motion-duration-slow | 400 ms | Büyük yüzey, sayfa — üst sınır |
Eğri
Tek ortak eğri standart eğridir; giriş ve çıkış onun ikizleridir. Vurgulu eğri yalnız ender anlar içindir.
Hareketi azaltma tercihiniz açıksa örnekler kurala uygun olarak anında biter.
standard
cubic-bezier(0.2, 0, 0.38, 0.9)Yerinde değişim: üzerine gelme, durum, yeniden dizilim
entrance
cubic-bezier(0, 0, 0.38, 0.9)Ekrana giren öğe, yavaşlayarak durur
exit
cubic-bezier(0.2, 0, 1, 0.9)Ekrandan çıkan öğe, hızlanarak gider
emphasized
cubic-bezier(0.4, 0.14, 0.3, 1)Ender, vurgulu an — rutin işte kullanılmaz
Yay
Yay yalnız konum ve ölçekte kullanılır; opaklık ve renk yaylanmaz. Sekme değeri sıfırdır: hareket hedefini aşmaz.
smooth
duration 0.4s · bounce 0Telefonda alttan açılan sayfa
snappy
duration 0.25s · bounce 0Sekme göstergesi, küçük yer değiştirme
Mesafe ve ölçek
Kayma mesafesi küçük tutulur; tam yükseklikte alttan açılan sayfa tek istisnadır.
--ason-motion-distance-xs | 4px |
--ason-motion-distance-sm | 8px |
--ason-motion-distance-md | 16px |
--ason-motion-distance-lg | 24px |
--ason-motion-travel-sheet | 100% |
--ason-motion-scale-pop | 0.96 |
--ason-motion-stagger | 25 ms |
Azaltılmış hareket
- İşletim sisteminde “hareketi azalt” açıksa konum ve ölçek hareketi yapılmaz: mesafe sıfır, ölçek bir olur.
- Opaklık geçişi kısa süreyle kalır; böylece öğenin geldiği yine anlaşılır.
- Diğer tüm geçişler neredeyse sıfır süreye iner (sıfır değil: geçişin bitiş olayı yine gelir ve ona bağlı akış takılmaz).
Hangi özellik hareket eder
Hareket eden yüzeyler (panel, örtü, menü)
opacitytransformtranslatescalerotate
Küçük denetimler (ek olarak renk ailesi)
colorbackground-colorborder-coloroutline-colortext-decoration-colorfillstroke
Hiçbir yerde
allbox-shadowfilterbackdrop-filter-webkit-backdrop-filterwidthheighttopleftrightbottommarginpaddingfont-sizeborder-radius
Süre ölçeği ve eğri değerleri IBM Carbon Design System hareket yönergesindeki “productive / expressive” yaklaşımından esinlenmiştir (Apache-2.0); kod kopyalanmamıştır. Yay modeli Apple’ın WWDC 2023 “Animate with springs” oturumundaki matematiğe dayanır.