Animasyonlu Simge

AnimatedIcon denetimi, kullanıcı etkileşimi ve görsel durum değişikliklerine yanıt olarak animasyonlu görüntüler oynatmaktadır.

Animasyonlu simgeler, öğreticideki bir sonraki düğme gibi bir kullanıcı arabirimi bileşenine dikkat çekebilir veya simgeyle ilişkili eylemi eğlenceli ve ilginç bir şekilde yansıtabilir.

Adobe AfterEffects ile özel animasyonlar oluşturulabilir ve WinUI uygulamanızda animasyonlu simge olarak kullanmak üzere Lottie-Windows kitaplığıyla işlenebilir. Daha fazla ayrıntı için bu makalenin devamında Bir AnimatedIcon için animasyonlu içerik oluşturmak için Lottie kullanma bölümüne bakın.

Aşağıdaki örnekte, Adobe AfterEffects'te oluşturulmuş ve Lottie aracılığıyla işlenen temel bir animasyonlu arama simgesi gösterilmektedir.

Doğru kontrol bu mu?

Bir denetimin simgesinin denetimle kullanıcı etkileşimine yanıt olarak animasyon eklemesi gerektiğinde (örneğin, bir kullanıcı bir düğmenin üzerine geldiğinde veya tıkladığında) AnimatedIcon denetimini kullanın.

Animasyon görsel durum geçişi tarafından tetiklenmiyorsa ve bir döngüde oynatılıyorsa, yalnızca bir kez oynatılıyorsa veya duraklatılabiliyorsa AnimatedIcon kullanmayın. Bunun yerine AnimatedVisualPlayer kullanın.

AnimatedIcon'ı simge dışında veya denetimin iconElement veya IconElementSource özelliğini desteklemediği herhangi bir şey için kullanmayın. Bunun yerine AnimatedVisualPlayer kullanın.

Animasyonlu simge gerekli olmadığında, bunun yerine FontIcon, SymbolIconveya BitmapIcon kullanın.

AnimatedIcon ile AnimatedVisualPlayer arasındaki farklar

AnimatedIcon, bir öğenin veya IconElement'in gerekli olduğu her yerde (NavigationViewItem.Icon) kullanılabilecek bir IconElementve State özelliği aracılığıyla denetlenebilir.

AnimatedVisualPlayer, Yürütme ve Duraklat gibi yöntemlerle denetlenen ve bir uygulamanın herhangi bir yerinde kullanılabilen, daha genel bir animasyon oynatıcıdır.

Bir AnimatedIcon için animasyonlu içerik oluşturmak için Lottie kullanma

AnimatedIcon için animasyon tanımlama işlemi, AnimatedVisualPlayer için animasyon tanımlama işlemiyle aynı şekilde başlar. Eklemek istediğiniz simge için Lottie dosyasını oluşturmanız veya edinmeniz ve bu dosyayı LottieGenaracılığıyla çalıştırmanız gerekir. LottieGen, bir C++/WinRT sınıfı için kod oluşturur ve bu kodun örneğini oluşturup bir AnimatedIcon ile kullanabilirsiniz.

Uyarı

AutoSuggestBox denetimi, LottieGen aracı kullanılarak oluşturulan AnimatedVisuals.AnimatedFindVisualSource sınıfını kullanır.

Animasyon tanımında, kayıttan yürütme süre konumlarını belirtmek için işaretleyiciler de tanımlayabilirsiniz. Ardından AnimatedIcon durumunu bu işaretçilere ayarlayabilirsiniz. Örneğin, Lottie dosyasında "PointerOver" olarak işaretlenmiş bir kayıttan yürütme konumunuz varsa, AnimatedIcon durumunu "PointerOver" olarak ayarlayabilir ve animasyonu bu kayıttan yürütme konumuna taşıyabilirsiniz.

Lottie animasyonunuzda "Ön Plan" adlı bir renk özelliği tanımlamak, AnimatedIcon.Foreground özelliğini kullanarak rengi ayarlamanıza olanak tanır.

Recommendations

• Simgelerinizin tasarım ilkeleriyle eşleştiğinden emin olmak için lütfen Windows Uygulamaları için Simgeleri UX kılavuzunu görüntüleyin.
• Tek bir ekranda veya görünümde animasyonlu simgelerin sayısını sınırlayın. Yalnızca kullanıcının dikkatini eylem yapmaları gereken veya bir eylemi gerçekleştirirken dikkat etmeleri gereken yerde toplamak için simgeleri animasyonlandırın.

Animasyonlu simge oluşturma

• Önemli API'ler:AnimatedIcon sınıfı

AnimatedIcon'un çalıştığını görmek için WinUI 3 Galeri uygulamasını açın

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Düğmeye AnimatedIcon Ekleme

Aşağıdaki örnek, PointerEntered olayında animasyonlu geri simgesini gösteren bir geri düğmesini göstermektedir.

• AnimatedBackVisualSource, LottieGen komut satırı aracıyla oluşturulmuş bir sınıftır.
• FallbackIconSource, Windows'un Lottie animasyonlarını desteklemeyen eski sürümlerinde olduğu gibi animasyonlar oynatılmadığında kullanılır.
• Kullanıcı sistem ayarlarında animasyonları kapatırsa, AnimatedIcon denetimlerin içinde olduğu durum geçişinin son çerçevesini görüntüler.

<Button PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited">
    <AnimatedIcon x:Name='BackAnimatedIcon'>
        <AnimatedIcon.Source>
            <animatedvisuals:AnimatedBackVisualSource/>
        </AnimatedIcon.Source>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Back'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "Normal");
}

NavigationViewItem'a AnimatedIcon ekleme

Kontrol AnimatedIcon'daki yaygın durumları, Lottie animasyonunda bu işaretçiler tanımlandığında, denetimin durumuna göre otomatik olarak ayarlar.

Örneğin, aşağıdaki örnekte LottieGen aracı tarafından oluşturulan bir özel animasyon (GameSettingsIcon) nasıl ayarlanacağı gösterilmektedir:

<NavigationView.MenuItems>
    <NavigationViewItem Content = "Game Settings">
        <NavigationViewItem.Icon>
            <AnimatedIcon x:Name='GameSettingsIcon'>
                <AnimatedIcon.Source>
                    <animatedvisuals:AnimatedSettingsVisualSource/>
                </AnimatedIcon.Source>
                <AnimatedIcon.FallbackIconSource>
                    <FontIconSource FontFamily="Segoe MDL2 Assets" Glyph="&#xE713;"/>
                </AnimatedIcon.FallbackIconSource>
            </AnimatedIcon>
        </NavigationViewItem.Icon>
    </NavigationViewItem>
</NavigationView.MenuItems>

NavigationViewItem, AnimatedIcon'da otomatik olarak aşağıdaki durumları ayarlar:

• Sıradan
• İşaretçi Üzerinden
• Basıldı
• Seçilmiş
• Basıldı ve Seçildi
• İşaretçiÜzerindeSeçili

GameSettingsIcon "NormalToPointerOver" için tanımlanmış bir işaretçisi varsa, işaretçi NavigationViewItem'ın üzerine gelene kadar simge animasyonlu olur. İşaretçi oluşturma hakkında daha fazla bilgi için aşağıdaki bölüme bakın.

AnimatedIcon işaretçilerini tanımlama

Önceki örnekte özel GameSettingsIcon'u oluşturmak için işaretçileri olan bir Lottie JSON dosyasını Windows LottieGen aracı aracılığıyla çalıştırarak animasyon kodunu C# sınıfı olarak oluşturun.

Lottie dosyanızı LottieGen aracılığıyla çalıştırdıktan sonra CodeGen çıkış sınıfını projenize ekleyebilirsiniz. Daha fazla bilgi için LottieGen eğitimine bakın.

AnimatedIcon durumunu yeni bir değerle ayarlamak, Lottie animasyonunda kaynak durumdan yeni duruma geçiş için oynatma konumunu da ayarlar. Bu oynatma konumları, Lottie dosyasındaki işaretçilerle de tanımlanır. Geçişin başlangıcı veya geçişin sonu için belirli işaretçiler de tanımlanabilir.

Örneğin, AutoSuggestBox denetimi aşağıdaki durumlarla animasyon oluşturan bir AnimatedIcon kullanır:

• Sıradan
• İşaretçi Üzerinden
• Basıldı

Lottie dosyanızda bu durum adlarıyla işaretçiler tanımlayabilirsiniz. İşaretçileri aşağıdaki gibi de tanımlayabilirsiniz:

• Durum adları arasına "To" kelimesini ekleyin. Örneğin, bir "NormalToPointerOver" işaretçisi tanımlarsanız, AnimatedIcon durumunu "Normal" yerine "PointerOver" olarak değiştirmek, işaretçinin kayıttan yürütme konumuna taşınmasına neden olur.
• İşaretçi adına "_Start" veya "_End" ekleyin. Örneğin, "NormalToPointerOver_Start" ve "NormalToPointerOver_End" işaretleyicileri tanımlamak ve AnimatedIcon durumunu "Normal" yerine "PointerOver" olarak değiştirmek, _Start işaretçinin kayıttan yürütme konumuna atlayıp _End kayıttan yürütme konumuna animasyon eklemesine neden olur.

"Animasyonlu Simge Durumu değişikliklerini işaretleme kayıttan yürütme konumlarına eşlemek için kullanılan kesin algoritma:"

• Sağlanan dosyada, "[PreviousState]To[NewState]_Start" ve "[PreviousState]To[NewState]_End" işaretçilerini kontrol edin. Her ikisi de bulunursa, animasyonu "[PreviousState]To[NewState]_Start" ile "[PreviousState]To[NewState]_End" arasında oynatın.
• "[PreviousState]To[NewState]_Start" bulunamazsa ancak "[PreviousState]To[NewState]_End" bulunursa, "[PreviousState]To[NewState]_End" kayıttan yürütme konumuna sert bir geçiş yapın."
• "[PreviousState]To[NewState]_End" bulunmuyorsa ancak "[PreviousState]To[NewState]_Start" bulunuyorsa, "[PreviousState]To[NewState]_Start" oynatma konumuna kesin geçiş yapın."
• Sağlanan IAnimatedVisualSource2'nin "[PreviousState]To[NewState]" işaretçisi için işaretleyicilerinin olup olmadığını denetleyin. Bulunursa "[PreviousState]To[NewState]" oynatma konumuna keskin geçiş yapın.
• Sağlanan IAnimatedVisualSource2'nin "[NewState]" işaretçisi için işaretleyicilerinin olup olmadığını denetleyin. Bulunursa, "[NewState]" oynatma konumuna aniden geçiş yapın.
• Sağlanan IAnimatedVisualSource2 işaretçilerinde "To[NewState]_End" ile biten bir işaretçi olup olmadığını denetleyin. Bu sonla biten herhangi bir işaretleyici bulunursa, uygun sonun kayıttan yürütme konumuyla eşleşen ilk işaretleyiciye sabit şekilde kes.
• "[NewState]"'in bir float'a dönüştürülüp dönüştürülmediğini kontrol edin. Geçerli konumdan ayrıştırılmış kayan nokta değere animasyonlanırsa.
• Yürütme konumu 0,0'a ani geçiş.

Aşağıdaki örnekte, lottie JSON dosyasındaki işaretçi biçimi gösterilmektedir. Daha fazla ayrıntı için AnimatedIcon kılavuzuna bakın.

"markers":[{"tm":0,"cm":"NormalToPointerOver_Start","dr":0},{"tm":9,"cm":"NormalToPointerOver_End","dr":0},

{"tm":10,"cm":"NormalToPressed_Start","dr":0},{"tm":19,"cm":"NormalToPressed_End","dr":0},

{"tm":20,"cm":"PointerOverToNormal_Start","dr":0},{"tm":29,"cm":"PointerOverToNormal_End","dr":0},

{"tm":30,"cm":"PointerOverToPressed_Start","dr":0},{"tm":39,"cm":"PointerOverToPressed_End","dr":0},

{"tm":40,"cm":"PressedToNormal_Start","dr":0},{"tm":49,"cm":"PressedToNormal_End","dr":0},

{"tm":50,"cm":"PressedToPointerOver_Start","dr":0},{"tm":69,"cm":"PressedToPointerOver_End","dr":0},

{"tm":90,"cm":"PressedToNormal_Start","dr":0},{"tm":99,"cm":"PressedToNormal_End","dr":0},

{"tm":100,"cm":"PressedToPointerOver_Start","dr":0},{"tm":101,"cm":"PressedToPointerOver_End","dr":0}]

Tek Başına AnimatedIcon Ekleme

Aşağıdaki örnek, kullanıcının İstemi kabul et'e tıkladığını gösteren bir düğmedir.

MyAcceptAnimation sınıfı, LottieGen aracıyla oluşturulur.

FallbackIconSource, Windows'un Lottie animasyonlarını desteklemeyen eski sürümlerinde olduğu gibi animasyonlar oynatılmadığında animasyon yerine kullanılır.

Son kullanıcı sistem ayarlarında animasyonları kapatırsa, AnimatedIcon denetimlerin içinde olduğu durum geçişinin son karesini görüntüler.

<Button PointerEntered="HandlePointerEntered" PointerExited="HandlePointerExited">
    <AnimatedIcon x:Name='AnimatedIcon1'>
        <local:MyAcceptAnimation/>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Accept'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.AnimatedIcon1, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.StackPaAnimatedIcon1nel1, "Normal");
}

UWP ve WinUI 2

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

UWP uygulamaları için AnimatedIcon, WinUI 2 gerektirir. Yükleme yönergeleri de dahil olmak üzere daha fazla bilgi için bkz. WinUI 2. Bu denetimin API'leri Microsoft.UI.Xaml.Controls ad alanında bulunur.

• WinUI 2 API'leri:AnimatedIcon sınıfı
• WinUI 2 Gallery uygulamasını açın veAnimatedIcon'un nasıl çalıştığını görün. WinUI 2 Galeri uygulaması çoğu WinUI 2 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın.

Bu makaledeki kodu WinUI 2 ile kullanmak için, projenize dahil edilen Windows UI Kitaplığı API'lerini temsil etmek için XAML'de bir diğer ad kullanın (muxckullanıyoruz). Daha fazla bilgi için WinUI 2'yi kullanmaya başlama hakkında bölümüne bakın.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:AnimatedIcon />

İlgili makaleler

• Windows uygulamalarında Simgeleri
• Windows uygulamaları için hareket