Zamanlama ve kolaylaştırma

Hareket gerçek dünyada temel alınsa da, hız ve performans beklentisiyle birlikte gelen dijital bir ortamız.

Örnekler

WinUI 3 Galeri simgesi WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Standart animasyon süresi değerleri

WinUI 3, platform denetimleri boyunca kullanılan bir dizi standart animasyon süresi sağlar. Özel Görsel Taslak animasyonları oluştururken de bu adlandırılmış kaynakları kullanabilirsiniz.

ThemeResource Adı Değer
** KontrolNormalAnimasyonSüresi 250ms
Hızlı Animasyon Süresini Kontrol Et 167ms
DahaHızlıAnimasyonSüresiniKontrolEt 83ms

Akıcı harekette kolaylaştırma

Hareket halindeki bir nesnenin hızını ayarlamanın bir yolu, easing yapmaktır. Fluent hareket deneyimlerini birbirine bağlayan tutkaldır. Aşırı olsa da, sistemde kullanılan kolaylaştırma, sistem genelinde hareket eden nesnelerin fiziksel hissini birleştirmeye yardımcı olur. Bu, gerçek dünyayı taklit etmenin ve hareket halindeki nesnelerin ortamlarına ait gibi hissetmesini sağlamanın bir yoludur.

Çerçevenin sağ alt köşesinden bir dairenin gösterildiği ve çerçevenin sol üst köşesi yakınında durduğunu gösteren kısa bir video.

Harekete yumuşatma uygulama

Bu kolaylaştırmalar, daha doğal bir his elde etmenizi sağlar ve Fluent hareketi için kullandığımız temeldir.

Hızlı Çıkış, Yavaş Giriş

cubic-bezier(0, 0, 0, 1)

Görünüme giren nesneler veya kullanıcı arabiriminde gezinme veya oluşturma için kullanın.

Olay yerine geldikten sonra nesne, nesneyi durma noktasına kadar yavaşlatan aşırı sürtünmeyle karşılaşır. Ortaya çıkan his, nesnenin uzak bir mesafeden gelip aşırı hızda girdiği ya da hızla durma durumuna geri döndüğüdür.

Başlangıçta kısa bir süre tepkisiz olsa da, gelen nesnenin hızı hızlı ve duyarlı hissettirir.

yavaşlat

Dışarı Yavaş, İçeri Hızlı

cubic-bezier(1 , 0 , 1 , 1)

Kullanıcı arabirimi veya sahneden çıkan nesneler için kullanın.

Nesneler güç kazanır ve kaçış hızına ulaşana kadar ivme kazanır. Sonuçta elde edilen his, nesnenin kullanıcının yolundan çıkmak ve yeni içeriğin gelmesi için yer açmak için en zorunu denediğini gösterir.

kolaylaştırmayı hızlandırmak