AnimatedIcon

Kontrol AnimatedIcon memutar gambar animasi sebagai respons terhadap interaksi pengguna dan perubahan status visual.

Ikon animasi dapat menarik perhatian ke komponen UI, seperti tombol berikutnya dalam tutorial, atau hanya mencerminkan tindakan yang terkait dengan ikon dengan cara yang menghibur dan menarik.

Animasi kustom dapat dibuat dengan Adobe AfterEffects dan dirender dengan pustaka Lottie-Windows untuk digunakan sebagai ikon animasi di aplikasi WinUI Anda. Untuk detail selengkapnya, lihat Menggunakan Lottie untuk membuat konten animasi untuk AnimatedIcon nanti di artikel ini.

Contoh berikut menunjukkan ikon pencarian animasi dasar yang dibuat di Adobe AfterEffects dan dirender melalui Lottie.

Apakah ini kontrol yang tepat?

Gunakan kontrol AnimatedIcon saat ikon kontrol perlu menganimasikan sebagai respons terhadap interaksi pengguna dengan kontrol, seperti ketika pengguna mengarahkan kuarter ke tombol atau mengkliknya.

Jangan gunakan AnimatedIcon jika animasi tidak dipicu oleh transisi status visual, dan diputar dalam perulangan, memutar satu kali saja, atau dapat dijeda. Gunakan AnimatedVisualPlayer sebagai gantinya.

Jangan gunakan AnimatedIcon untuk apa pun selain ikon, atau di mana kontrol tidak mendukung properti IconElement atau IconElementSource. Gunakan AnimatedVisualPlayer sebagai gantinya.

Ketika ikon animasi tidak diperlukan, gunakan FontIcon, SymbolIcon, atau BitmapIcon sebagai gantinya.

Perbedaan antara AnimatedIcon dan AnimatedVisualPlayer

AnimatedIcon adalah IconElement, yang dapat digunakan di mana saja elemen atau IconElement diperlukan (seperti NavigationViewItem.Icon), dan dikontrol melalui properti Status.

AnimatedVisualPlayer adalah pemutar animasi yang lebih umum, yang dikontrol melalui metode seperti Putar dan Jeda, dan dapat digunakan di mana saja dalam aplikasi.

Menggunakan Lottie untuk membuat konten animasi untuk AnimatedIcon

Menentukan animasi untuk AnimatedIcon dimulai sama dengan proses untuk menentukan animasi untuk AnimatedVisualPlayer. Anda harus membuat, atau mendapatkan, file Lottie untuk ikon yang ingin Anda tambahkan dan jalankan file tersebut melalui LottieGen. LottieGen menghasilkan kode untuk kelas C++/WinRT yang kemudian dapat Anda buat dan gunakan dengan AnimatedIcon.

Catatan

Kontrol AutoSuggestBox menggunakan kelas AnimatedVisuals.AnimatedFindVisualSource , yang dihasilkan menggunakan alat LottieGen.

Anda juga dapat menentukan penanda dalam definisi animasi untuk menunjukkan posisi waktu pemutaran. Anda kemudian dapat mengatur status AnimatedIcon ke penanda ini. Misalnya, jika Anda memiliki posisi pemutaran dalam file Lottie bertanda "PointerOver", Anda dapat mengatur status AnimatedIcon ke "PointerOver" dan memindahkan animasi ke posisi pemutaran tersebut.

Menentukan properti warna di animasi Lottie Anda bernama "Latar Depan" memungkinkan Anda mengatur warna menggunakan properti AnimatedIcon.Foreground.

Rekomendasi

• Lihat panduan UX untuk Ikon untuk Aplikasi Windows untuk memastikan ikon Anda sesuai dengan prinsip desain.
• Batasi jumlah ikon animasi pada satu layar atau tampilan. Hanya animasikan ikon untuk menarik perhatian pengguna ke tempat mereka perlu mengambil tindakan atau ketika mereka melakukan tindakan.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

AnimatedIcon untuk aplikasi UWP memerlukan WinUI 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat WinUI 2. API untuk kontrol ini ada di namespace Microsoft.UI.Xaml.Controls .

• WinUI 2 Apis: Kelas AnimatedIcon
• Buka aplikasi Galeri WinUI 2 dan lihat AnimatedIcon beraksi. Aplikasi Galeri WinUI 2 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 2. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub.

Untuk menggunakan kode dalam artikel ini dengan WinUI 2, gunakan alias di XAML (kami menggunakan muxc) untuk mewakili API Pustaka Windows UI yang disertakan dalam proyek Anda. Lihat Mulai menggunakan WinUI 2 untuk informasi selengkapnya.

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

<muxc:AnimatedIcon />

Membuat ikon animasi

• API Penting: Kelas AnimatedIcon

Buka aplikasi Galeri WinUI 3 untuk melihat AnimatedIcon beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Menambahkan AnimatedIcon ke Tombol

Contoh berikut menunjukkan tombol kembali yang menampilkan ikon animasi kembali pada peristiwa PointerEntered .

• AnimatedBackVisualSource adalah kelas yang dibuat dengan alat baris perintah LottieGen.
• FallbackIconSource digunakan ketika animasi tidak dapat diputar, seperti pada versi Windows yang lebih lama yang tidak mendukung animasi Lottie.
• Jika pengguna menonaktifkan animasi dalam pengaturan sistem mereka, AnimatedIcon menampilkan bingkai akhir transisi status tempat kontrol berada.

<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");
}

Menambahkan AnimatedIcon ke NavigationViewItem

Kontrol NavigationViewItem secara otomatis mengatur status umum pada AnimatedIcon berdasarkan status kontrol, jika penanda tersebut ditentukan dalam animasi Lottie.

Misalnya, contoh berikut menunjukkan cara mengatur animasi kustom (GameSettingsIcon) yang dihasilkan oleh alat LottieGen:

<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 secara otomatis mengatur status berikut pada AnimatedIcon:

• Normal
• PointerOver
• Ditekan
• Dipilih
• DitekanPilih
• PointerOverSelected

Jika GameSettingsIcon memiliki penanda yang ditentukan untuk "NormalToPointerOver", ikon akan dianimasikan hingga penunjuk bergerak di atas NavigationViewItem. Lihat bagian berikut untuk informasi selengkapnya tentang membuat penanda.

Tentukan penanda AnimatedIcon

Untuk membuat kustom GameSettingsIcon dalam contoh sebelumnya, jalankan file JSON Lottie (dengan penanda) melalui alat Windows LottieGen untuk menghasilkan kode animasi sebagai kelas C#.

Setelah menjalankan file Lottie melalui LottieGen, Anda dapat menambahkan kelas output CodeGen ke proyek Anda. Lihat tutorial LottieGen untuk informasi selengkapnya.

Mengatur status AnimatedIcon ke nilai baru juga mengatur posisi pemutaran di animasi Lottie untuk transisi dari status lama ke status baru. Posisi pemutaran ini juga diidentifikasi dengan penanda dalam file Lottie. Penanda tertentu untuk awal transisi atau akhir transisi juga dapat ditentukan.

Misalnya, kontrol AutoSuggestBox menggunakan AnimatedIcon yang menganimasikan dengan status berikut:

• Normal
• PointerOver
• Ditekan

Anda dapat menentukan penanda dalam file Lottie Anda dengan nama status tersebut. Anda juga dapat menentukan penanda sebagai berikut:

• Sisipkan "Ke" di antara nama status. Misalnya, jika Anda menentukan penanda "NormalToPointerOver", mengubah status AnimatedIcon dari "Normal" menjadi "PointerOver" akan menyebabkannya berpindah ke posisi pemutaran penanda ini.
• Tambahkan "_Start" atau "_End" ke nama penanda. Misalnya menentukan penanda "NormalToPointerOver_Start" dan "NormalToPointerOver_End" dan mengubah status AnimatedIcon dari "Normal" menjadi "PointerOver" akan menyebabkannya melompat ke posisi pemutaran penanda _Start dan kemudian menganimasikan ke posisi pemutaran _End.

Algoritma yang tepat digunakan untuk memetakan perubahan Status AnimatedIcon ke posisi pemutaran penanda:

• Periksa penanda file yang disediakan untuk penanda "[PreviousState]To[NewState]_Start" dan "[PreviousState]To[NewState]_End". Jika keduanya ditemukan memutar animasi dari "[PreviousState]To[NewState]_Start" ke "[PreviousState]To[NewState]_End".
• Jika "[PreviousState]To[NewState]_Start" tidak ditemukan tetapi "[PreviousState]To[NewState]_End" ditemukan, maka hard cut ke posisi pemutaran "[PreviousState]To[NewState]_End".
• Jika "[PreviousState]To[NewState]_End" tidak ditemukan tetapi "[PreviousState]To[NewState]_Start" ditemukan, maka hard cut ke posisi pemutaran "[PreviousState]To[NewState]_Start".
• Periksa apakah penanda IAnimatedVisualSource2 yang disediakan untuk penanda "[PreviousState]To[NewState]". Jika ditemukan, potong keras ke posisi pemutaran "[PreviousState]To[NewState]".
• Periksa apakah penanda IAnimatedVisualSource2 yang disediakan untuk penanda "[NewState]". Jika ditemukan, maka potong keras ke posisi pemutaran "[NewState]".
• Periksa apakah penanda IAnimatedVisualSource2 yang disediakan memiliki penanda yang diakhiri dengan "To[NewState]_End". Jika ada penanda yang memiliki akhiran tersebut, potong keras ke penanda pertama yang ditemukan dengan posisi pemutaran akhir yang sesuai.
• Periksa apakah "[NewState]" mengurai ke float. Jika ya, dianimasikan dari posisi saat ini ke float yang diurai.
• Pemotongan keras ke posisi pemutaran 0.0.

Contoh berikut menunjukkan format penanda dalam file JSON Lottie. Lihat panduan AnimatedIcon untuk detail selengkapnya.

"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}]

Menambahkan AnimatedIcon Mandiri

Contoh berikut adalah tombol yang diklik pengguna untuk Menerima perintah.

Kelas MyAcceptAnimation dibuat dengan alat LottieGen .

FallbackIconSource akan digunakan daripada animasi ketika animasi tidak dapat diputar, seperti pada versi Windows yang lebih lama yang tidak mendukung animasi Lottie.

Jika pengguna akhir menonaktifkan animasi dalam pengaturan sistem mereka, AnimatedIcon akan menampilkan bingkai akhir transisi status tempat kontrol berada.

<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");
}

Artikel terkait

• Ikon di aplikasi Windows
• Gerakan untuk aplikasi Windows