Windows uygulamasında animasyonlar

Zamanlama, kolaylaştırma, yönsellik ve yerçekimi, Fluent hareketinin temelini oluşturmak için birlikte çalışır. Her birinin diğerlerinin bağlamında dikkate alınması ve uygulamanızın bağlamında uygun şekilde uygulanması gerekir.

İşte uygulamanızda Fluent hareket temellerini uygulamanın 3 yolu.

• Örtük animasyon
  Standartlaştırılmış değerleri kullanarak çok basit bir akıcı hareket elde etmek için parametre değişikliğindeki değerler arasında otomatik geçiş ve zamanlama.
• Yerleşik animasyon
  Ortak denetimler ve paylaşılan hareket gibi sistem bileşenleri "Varsayılan olarak akıcıdır". Temel bilgiler, zımni kullanımlarıyla tutarlı bir şekilde uygulanmıştır.
• Kılavuz önerilerini takip eden özel animasyon
  Sistemin senaryonuz için tam bir hareket çözümü sağlamadığı zamanlar olabilir. Bu gibi durumlarda, deneyimleriniz için başlangıç noktası olarak temel temel önerileri kullanın.

Geçiş örneği

İletim Yönü Dışarı:
Kararma: 150m; Geçiş: Varsayılan Hızlanma Yön: İleri In:
150 piksel yukarı kaydır: 300ms; Kolaylaştırma: Varsayılan Yavaşlatma

Yönü Geriye Doğru:
150 piksel aşağı kaydır: 150ms; Hafifletme: Varsayılan Hızlandırma Yön Geriye: İçeri
Belirme: 300ms; Yumuşatma: Varsayılan Yavaşlatma

Nesne örneği

Yön Genişletme:
Büyüme: 300ms; Kolaylaştırma: Standart

Yön Sözleşmesi:
Büyüme: 150ms; Geçiş Hızı: Varsayılan Hızlandırma

Örtük Animasyonlar

Örtük animasyonlar, parametre değişikliği sırasında eski ve yeni değerler arasında otomatik olarak ilişkilendirme yaparak Fluent hareketi elde etmenin basit bir yoludur.

• Önemli API'ler:Microsoft. UI. Xaml.Media.Animation Ad Alanı, Microsoft. UI. Xaml.Controls ad alanı

WinUI 3 Galeri uygulamasını açın ve Gizli Geçişler'in işlevini izleyin

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.

Aşağıdaki özelliklerde yapılan değişikliklere örtük olarak animasyon uygulayabilirsiniz:

• Kullanıcı Arayüzü Öğesi

  • Opaklık
  • Döndürme
  • Scale
  • Çeviri

• Kenarlık, ContentPresenterveya Panel

  • Background

Örtük olarak animasyonlu olabilecek her değişiklik özelliğinin, bu özelliğe karşılık gelen bir geçiş özelliği vardır. Özelliğe animasyon eklemek için ilgili geçiş özelliğine bir geçiş türü atarsınız. Bu tablo , geçiş özelliklerini ve her biri için kullanılacak geçiş türünü gösterir.

Animasyonlu özellik	Geçiş özelliği	Örtük geçiş türü
UIElement.Opacity	Opaklık Geçişi	Skaler Geçiş
UIElement.Rotation	DöndürmeGeçişi	Skaler Geçiş
UIElement.Scale	Scale Transition	Vector3Transition
UIElement.Translation	ÇeviriGeçiş	Vector3Transition
Kenarlık.Arkaplan	Arka Plan Geçişi	Fırça Geçişi
ContentPresenter.Arka Plan	Arka Plan Geçişi	Fırça Geçişi
Panel.Arka Plan	Arka Plan Geçişi	Fırça Geçişi

Bu örnekte, denetim etkinleştirildiğinde düğmenin belirmesi ve devre dışı bırakıldığında solması için Opacity özelliğinin nasıl kullanılacağı gösterilmektedir.

<Button x:Name="SubmitButton"
        Content="Submit"
        Opacity="{x:Bind OpaqueIfEnabled(SubmitButton.IsEnabled), Mode=OneWay}">
    <Button.OpacityTransition>
        <ScalarTransition />
    </Button.OpacityTransition>
</Button>

public double OpaqueIfEnabled(bool IsEnabled)
{
    return IsEnabled ? 1.0 : 0.2;
}

İlgili makaleler

• Harekete genel bakış
• Zamanlama ve Yumuşatma
• yön ve yerçekimi