Ikon Animasi

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 3 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 loop, 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 instansiasi dan gunakan dengan AnimatedIcon.

Nota

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.

Recommendations

Lihat panduan UX untuk Icons untuk Windows Apps 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.

Membuat ikon animasi

API Penting:AnimatedIcon Class

Buka aplikasi Galeri WinUI 3 untuk melihat AnimatedIcon beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada 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>

Gigi Pengaturan Animasi

NavigationViewItem secara otomatis mengatur status berikut pada AnimatedIcon:

Biasa
PointerOver
Ditekan
Dipilih
DitekanPilih
PenunjukDiAtasTerpilih

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 GameSettingsIcon kustom 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 project 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:

Biasa
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 negara bagian. 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, putar 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 lakukan potongan langsung ke posisi pemutaran "[PreviousState]To[NewState]_End".
Jika "[PreviousState]To[NewState]_End" tidak ditemukan tetapi "[PreviousState]To[NewState]_Start" ditemukan, maka lakukan pemotongan langsung ke posisi pemutaran "[PreviousState]To[NewState]_Start".
Periksa apakah penanda pada IAnimatedVisualSource2 yang disediakan cocok untuk transisi penanda "[PreviousState]To[NewState]". Jika ditemukan, langsung dipotong ke posisi pemutaran "[PreviousState]To[NewState]".
Periksa apakah penanda "[NewState]" ada dalam IAnimatedVisualSource2 yang disediakan. Jika ditemukan, maka langsung 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]" dapat diubah menjadi tipe data 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");
}

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-03-06