0

Materyal Tasarımı Standart Hareket Eğrisi

İki kontrol noktasını sürükleyerek özel bir CSS kübik-bezier() zamanlama işlevi tasarlayın, doğrusal bir referansa göre canlı olarak önizleyin ve ardından hazır değeri kopyalayın.

Eğriyi yeniden şekillendirmek için turuncu tutamacı (P1) ve kırmızı tutamacı (P2) sürükleyin; ok tuşları da işe yarar. X, CSS'nin gerektirdiği gibi 0 ile 1 arasında sabit kalır; Aşma ve sıçrama efektleri için y'yi o aralığın ötesine göndermek üzere kutunun üstüne veya altına bir tutamacı sürükleyin.

Eğriniz

Doğrusal (karşılaştırma için)

İşleniyor... 0%

Sonuç

Bu sayfa, oluşturucuyu x1=0,4, y1=0, x2=0,2, y2=1 zaten yüklenmiş olarak açar - Google'ın Materyal Tasarımı hareket yönergelerinde yayınlanan standart hareket hızı eğrisi. Sayıları, eğriyi, canlı önizlemeyi ve kopyalanabilir CSS güncellemesini birlikte sürükleyin veya düzenleyin.

Materyal Tasarımı bu eğriyi "standart hareket hızı" olarak adlandırır ve bunu ekrandaki çoğu geçiş için (zaten görünür olan ve aynı ekranda kolayca hareket eden, yeniden boyutlandıran veya solan öğeler) önerir. Şekli hızlı bir şekilde hızlanır, sonra yavaşça yavaşlayarak yerine oturur; bu nedenle pek çok Android uygulaması ve Materyal tarzı web kullanıcı arayüzü, aynı dört sayıyı kullandıklarını kimse fark etmeden aynı geçiş hissini paylaşır.

Malzemeyle tutarlı bir his için onu doğrudan geçiş zamanlaması işlevine veya animasyon zamanlaması işlevine bırakın veya bir referans noktası olarak kullanın: Malzemenin yönergeleri ayrıca ekrana giren veya ekrana giren öğeler için ayrı "yavaşlama" ve "hızlanma" eğrileri tanımlar; bu tek standart eğrinin yerini alması amaçlanmamıştır.