Animasi di XAML
Animasi dapat meningkatkan aplikasi Anda dengan menambahkan gerakan dan interaktivitas. Dengan menggunakan animasi dari pustaka animasi Windows Runtime, Anda dapat mengintegrasikan tampilan dan nuansa Windows ke dalam aplikasi Anda. Topik ini menyediakan ringkasan animasi dan contoh skenario umum tempat masing-masing digunakan.
Tip
Kontrol Windows Runtime untuk XAML menyertakan jenis animasi tertentu sebagai perilaku bawaan yang berasal dari pustaka animasi. Dengan menggunakan kontrol ini di aplikasi, Anda bisa mendapatkan tampilan dan nuansa animasi tanpa harus memprogramnya sendiri.
Animasi dari pustaka animasi Windows Runtime memberikan manfaat berikut:
- Gerakan yang selaras dengan Pedoman untuk animasi
- Transisi cepat dan cairan antara UI menyatakan bahwa informasi tetapi tidak mengalihkan perhatian pengguna
- Perilaku visual yang menunjukkan transisi dalam aplikasi ke pengguna
Misalnya, saat pengguna menambahkan item ke daftar, alih-alih item baru langsung muncul dalam daftar, item baru dianimasikan ke tempatnya. Item lain dalam daftar beranimasi ke posisi baru mereka dalam waktu singkat, memberikan ruang untuk item yang ditambahkan. Perilaku transisi di sini membuat interaksi kontrol lebih jelas untuk pengguna.
Windows 10, versi 1607 memperkenalkan ConnectedAnimationService API baru untuk menerapkan animasi di mana elemen tampaknya menganimasikan antara tampilan selama navigasi. API ini memiliki pola penggunaan yang berbeda dari API pustaka animasi lainnya. Penggunaan ConnectedAnimationService tercakup dalam halaman referensi.
Pustaka animasi tidak menyediakan animasi untuk setiap skenario yang mungkin. Ada kasus di mana Anda mungkin ingin membuat animasi kustom di XAML. Untuk informasi selengkapnya, lihat Animasi storyboarded.
Selain itu, untuk skenario lanjutan tertentu seperti menganimasikan item berdasarkan posisi gulir ScrollViewer, pengembang mungkin ingin menggunakan interoperatasi Lapisan Visual untuk mengimplementasikan animasi kustom. Lihat Lapisan Visual untuk informasi selengkapnya.
Jenis animasi
Sistem animasi Windows Runtime dan pustaka animasi melayani tujuan yang lebih besar untuk mengaktifkan kontrol dan bagian lain dari UI untuk memiliki perilaku animasi. Ada beberapa jenis animasi yang berbeda.
- Transisi tema diterapkan secara otomatis ketika kondisi tertentu berubah di UI, melibatkan kontrol atau elemen dari jenis UI Windows Runtime XAML yang telah ditentukan sebelumnya. Ini adalah transisi tema istilah karena animasi mendukung tampilan dan nuansa Windows, dan menentukan apa yang dilakukan semua aplikasi untuk skenario UI tertentu ketika mereka berubah dari satu mode interaksi ke mode interaksi lainnya. Transisi tema adalah bagian dari pustaka animasi.
- Animasi tema adalah animasi ke satu atau beberapa properti jenis UI Windows Runtime XAML yang telah ditentukan sebelumnya. Animasi tema berbeda dari transisi tema karena animasi tema menargetkan satu elemen tertentu dan ada dalam status visual tertentu dalam kontrol, sedangkan transisi tema ditetapkan ke properti kontrol yang ada di luar status visual dan memengaruhi transisi antara status tersebut. Banyak kontrol Windows Runtime XAML menyertakan animasi tema dalam papan cerita yang merupakan bagian dari templat kontrolnya, dengan animasi yang dipicu oleh status visual. Selama Anda tidak memodifikasi templat, Anda akan memiliki animasi tema bawaan yang tersedia untuk kontrol di UI Anda. Namun, jika Anda mengganti templat, maka Anda juga akan menghapus animasi tema kontrol bawaan. Untuk mendapatkannya kembali, Anda harus menentukan papan cerita yang menyertakan animasi tema dalam kumpulan status visual kontrol. Anda juga dapat menjalankan animasi tema dari papan cerita yang tidak berada dalam status visual dan memulainya dengan metode Mulai , tetapi itu kurang umum. Animasi tema adalah bagian dari pustaka animasi.
- Transisi visual diterapkan saat kontrol beralih dari salah satu status visual yang ditentukan ke status lain. Ini adalah animasi kustom yang Anda tulis, dan biasanya terkait dengan templat kustom yang Anda tulis untuk kontrol dan definisi status visual dalam templat tersebut. Animasi hanya berjalan selama waktu antara status, dan itu biasanya waktu yang singkat, paling lama beberapa detik. Untuk informasi selengkapnya, lihat bagian "VisualTransition" dari animasi Storyboarded untuk status visual.
- Animasi storyboarded menganimasikan nilai properti dependensi Windows Runtime dari waktu ke waktu. Papan cerita dapat didefinisikan sebagai bagian dari transisi visual, atau dipicu pada runtime oleh aplikasi. Untuk informasi selengkapnya, lihat Animasi storyboarded. Untuk informasi selengkapnya tentang properti dependensi dan di mana properti tersebut ada, lihat Gambaran umum properti Dependensi.
- Animasi terhubung yang disediakan oleh ConnectedAnimationService API baru memungkinkan pengembang untuk dengan mudah membuat efek di mana elemen muncul untuk menganimasikan antara tampilan selama navigasi. API ini tersedia mulai dari Windows 10, versi 1607. Lihat ConnectedAnimationService untuk informasi selengkapnya.
Animasi tersedia di pustaka
Animasi berikut disediakan di pustaka animasi. Klik nama animasi untuk mempelajari lebih lanjut tentang skenario penggunaan utama mereka, cara menentukannya, dan untuk melihat contoh animasi.
- Transisi halaman: Menganimasikan transisi halaman dalam Bingkai.
- Transisi konten dan pintu masuk: Menganimasikan satu bagian atau set konten ke dalam atau di luar tampilan.
- Memudar masuk/keluar, dan crossfade: Menampilkan elemen atau kontrol sementara, atau me-refresh area konten.
- Penunjuk ke atas/bawah: Memberikan umpan balik visual ketukan atau klik pada petak peta.
- Reposisi: Memindahkan elemen ke posisi baru.
- Tampilkan/sembunyikan popup: Menampilkan UI kontekstual di atas tampilan.
- Perlihatkan/sembunyikan antarmuka pengguna tepi: UI berbasis tepi slide, termasuk UI besar seperti panel, ke dalam atau di luar tampilan.
- Perubahan item daftar: Menambahkan atau menghapus item dari daftar, atau menyusun ulang item.
- Seret/letakkan: Memberikan umpan balik visual selama operasi seret dan letakkan.
Transisi halaman
Gunakan transisi halaman untuk menganimasikan navigasi dalam aplikasi. Karena hampir semua aplikasi menggunakan semacam navigasi, animasi transisi halaman adalah jenis animasi tema yang paling umum digunakan oleh aplikasi. Lihat NavigationThemeTransition untuk informasi selengkapnya tentang API transisi halaman.
Transisi konten dan transisi masuk
Gunakan animasi transisi konten (ContentThemeTransition) untuk memindahkan bagian atau sekumpulan konten ke dalam atau keluar dari tampilan saat ini. Misalnya, animasi transisi konten memperlihatkan konten yang belum siap ditampilkan saat halaman pertama kali dimuat, atau ketika konten berubah pada bagian halaman.
EntranceThemeTransition mewakili gerakan yang dapat berlaku untuk konten ketika halaman atau bagian besar UI pertama kali dimuat. Dengan demikian tampilan konten pertama dapat menawarkan umpan balik yang berbeda dari perubahan pada konten. EntranceThemeTransition setara dengan NavigationThemeTransition dengan parameter default, tetapi dapat digunakan di luar Bingkai.
Memudar masuk/keluar, dan crossfade
Gunakan memudar masuk dan memudarkan animasi untuk menampilkan atau menyembunyikan UI atau kontrol sementara. Dalam XAML ini direpresentasikan sebagai FadeInThemeAnimation dan FadeOutThemeAnimation. Salah satu contohnya adalah di bilah aplikasi tempat kontrol baru dapat muncul karena interaksi pengguna. Contoh lain adalah bilah gulir sementara atau indikator panning yang memudar setelah tidak ada input pengguna yang terdeteksi selama beberapa waktu. Aplikasi juga harus menggunakan pudar dalam animasi saat beralih dari item tempat penampung ke item akhir saat konten dimuat secara dinamis.
Gunakan animasi crossfade untuk menghaluskan transisi saat status item berubah; misalnya, saat aplikasi me-refresh konten tampilan saat ini. Pustaka animasi XAML tidak menyediakan animasi crossfade khusus (tidak setara untuk crossFade), tetapi Anda dapat mencapai hasil yang sama menggunakan FadeInThemeAnimation dan FadeOutThemeAnimation dengan waktu yang tumpang tindih.
Penunjuk ke atas/bawah
Gunakan animasi PointerUpThemeAnimation dan PointerDownThemeAnimation untuk memberikan umpan balik pengguna agar berhasil mengetuk atau mengklik petak peta. Misalnya, saat pengguna mengklik atau mengetuk petak peta, animasi pointer down diputar. Setelah klik atau ketuk dirilis, animasi pointer up diputar.
Reposisi
Gunakan animasi reposisi (ReposisiThemeAnimation atau RepositionThemeTransition) untuk memindahkan elemen ke posisi baru. Misalnya, memindahkan header dalam kontrol item menggunakan animasi reposisi.
Tampilkan/sembunyikan popup
Gunakan PopInThemeAnimation dan PopOutThemeAnimation saat Anda menampilkan dan menyembunyikan Popup atau antarmuka pengguna kontekstual serupa di atas tampilan saat ini. PopupThemeTransition adalah transisi tema yang merupakan umpan balik yang berguna jika Anda ingin menyalakan popup.
Tampilkan/sembunyikan antarmuka pengguna tepi
Gunakan animasi EdgeUIThemeTransition untuk menggeser antarmuka pengguna kecil berbasis tepi ke dalam dan di luar tampilan. Misalnya, gunakan animasi ini saat Anda menampilkan bilah aplikasi kustom di bagian atas atau bawah layar atau permukaan UI untuk kesalahan dan peringatan di bagian atas layar.
Gunakan animasi PaneThemeTransition untuk memperlihatkan dan menyembunyikan panel atau panel. Ini untuk UI berbasis tepi besar seperti keyboard kustom atau panel tugas.
Perubahan item daftar
Gunakan animasi AddDeleteThemeTransition untuk menambahkan perilaku animasi saat Anda menambahkan atau menghapus item di daftar yang sudah ada. Untuk menambahkan, transisi akan terlebih dahulu memposisikan ulang item yang ada dalam daftar untuk memberi ruang untuk item baru, lalu menambahkan item baru. Untuk menghapus, transisi menghapus item dari daftar dan, jika perlu, memposisikan ulang item daftar yang tersisa setelah item yang dihapus dihapus.
Ada juga ReorderThemeTransition terpisah yang Anda terapkan jika item mengubah posisi dalam daftar. Ini dianimasikan secara berbeda dari menghapus item dan menambahkannya di tempat baru dengan animasi hapus/tambahkan terkait.
Perhatikan bahwa animasi ini disertakan dalam templat ListView dan GridView default sehingga Anda tidak perlu menambahkan animasi ini secara manual jika Anda sudah menggunakan kontrol ini.
Seret/letakkan
Gunakan animasi seret (DragItemThemeAnimation, DragOverThemeAnimation) dan jatuhkan animasi (DropTargetItemThemeAnimation) untuk memberikan umpan balik visual saat pengguna menyeret atau menghilangkan item.
Saat aktif, animasi menunjukkan kepada pengguna bahwa daftar dapat diatur ulang di sekitar item yang dihilangkan. Sangat membantu bagi pengguna untuk mengetahui di mana item akan ditempatkan dalam daftar jika dihilangkan di lokasi saat ini. Animasi memberikan umpan balik visual bahwa item yang diseret dapat dihilangkan di antara dua item lain dalam daftar dan bahwa item tersebut akan bergerak keluar dari jalan.
Menggunakan animasi dengan kontrol kustom
Tabel berikut ini meringkas rekomendasi kami untuk animasi mana yang harus Anda gunakan saat membuat versi kustom kontrol Windows Runtime ini:
| Jenis UI | Animasi yang direkomendasikan |
|---|---|
| Kotak dialog | FadeInThemeAnimation dan FadeOutThemeAnimation |
| Flyout | PopInThemeAnimation dan PopOutThemeAnimation |
| Tipsalat | FadeInThemeAnimation dan FadeOutThemeAnimation |
| Menu Konteks | PopInThemeAnimation dan PopOutThemeAnimation |
| Bilah perintah | EdgeUIThemeTransition |
| Panel tugas atau panel berbasis tepi | PaneThemeTransition |
| Konten kontainer UI apa pun | ContentThemeTransition |
| Untuk kontrol atau jika tidak ada animasi lain yang berlaku | FadeInThemeAnimation dan FadeOutThemeAnimation |
Contoh animasi transisi
Idealnya, aplikasi Anda menggunakan animasi untuk meningkatkan antarmuka pengguna atau membuatnya lebih menarik tanpa mengganggu pengguna Anda. Salah satu cara anda dapat melakukan ini adalah dengan menerapkan transisi animasi ke UI sehingga ketika sesuatu masuk atau meninggalkan layar atau sebaliknya berubah, animasi menarik perhatian pengguna untuk perubahan. Misalnya, tombol Anda dapat dengan cepat memudar masuk dan keluar dari tampilan daripada hanya muncul dan menghilang. Kami membuat sejumlah API yang dapat digunakan untuk membuat transisi animasi yang direkomendasikan atau khas yang konsisten. Contoh di sini memperlihatkan cara menerapkan animasi ke tombol sehingga dengan cepat meluncur ke tampilan.
<Button Content="Transitioning Button">
<Button.Transitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Button.Transitions>
</Button>
Dalam kode ini, kita menambahkan objek EntranceThemeTransition ke koleksi transisi tombol. Sekarang, ketika tombol pertama kali dirender, tombol dengan cepat meluncur ke tampilan daripada hanya muncul. Anda dapat mengatur beberapa properti pada objek animasi untuk menyesuaikan seberapa jauh slide dan dari arah mana, tetapi itu benar-benar dimaksudkan untuk menjadi API sederhana untuk skenario tertentu, yaitu, untuk membuat pintu masuk yang menarik.
Anda juga dapat menentukan tema animasi transisi di sumber daya gaya aplikasi Anda, memungkinkan Anda menerapkan efek secara seragam. Contoh ini setara dengan yang sebelumnya, hanya diterapkan menggunakan Gaya:
<UserControl.Resources>
<Style x:Key="DefaultButtonStyle" TargetType="Button">
<Setter Property="Transitions">
<Setter.Value>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<StackPanel x:Name="LayoutRoot">
<Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>
Contoh sebelumnya menerapkan transisi tema ke kontrol individu, namun, transisi tema bahkan lebih menarik ketika Anda menerapkannya ke kontainer objek. Ketika Anda melakukan ini, semua objek turunan kontainer mengambil bagian dalam transisi. Dalam contoh berikut, EntranceThemeTransition diterapkan ke Kisi persegi panjang.
<!-- If you set an EntranceThemeTransition animation on a panel, the
children of the panel will automatically offset when they animate
into view to create a visually appealing entrance. -->
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Height="400"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- The sequence children appear depends on their order in
the panel's children, not necessarily on where they render
on the screen. Be sure to arrange your child elements in
the order you want them to transition into view. -->
<ItemsControl.Items>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
</ItemsControl.Items>
</ItemsControl>
Persegi panjang anak dari transisi Grid ke tampilan satu demi satu dengan cara yang menyenangkan secara visual daripada semua sekaligus seperti halnya jika Anda menerapkan animasi ini ke persegi satu per satu.
Berikut adalah demonstrasi animasi ini:
Objek anak dari kontainer juga dapat mengalir kembali ketika satu atau beberapa anak tersebut mengubah posisi. Dalam contoh berikut, kami menerapkan RepositionThemeTransition ke kisi persegi panjang. Saat Anda menghapus salah satu persegi panjang, semua persegi panjang lainnya mengalir kembali ke posisi barunya.
<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<!-- Without this, there would be no animation when items
are removed. -->
<RepositionThemeTransition/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Height="400"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- All these rectangles are just to demonstrate how the items
in the grid re-flow into position when one of the child items
are removed. -->
<ItemsControl.Items>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
<Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
</ItemsControl.Items>
</ItemsControl>
private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
if (rectangleItems.Items.Count > 0)
{
rectangleItems.Items.RemoveAt(0);
}
}
// .h
private:
void RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
//.cpp
void BlankPage::RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
if (rectangleItems->Items->Size > 0)
{
rectangleItems->Items->RemoveAt(0);
}
}
Anda dapat menerapkan beberapa animasi transisi ke satu objek atau kontainer objek. Misalnya, jika Anda ingin daftar persegi panjang dianimasikan ke dalam tampilan dan juga menganimasikan ketika mereka mengubah posisi, Anda dapat menerapkan RepositionThemeTransition dan EntranceThemeTransition seperti ini:
...
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
<RepositionThemeTransition/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...
Ada beberapa efek transisi untuk membuat animasi pada elemen UI Anda saat ditambahkan, dihapus, diurutkan ulang, dan sebagainya. Nama-nama API ini semuanya berisi "ThemeTransition":
| API | Deskripsi |
|---|---|
| NavigationThemeTransition | Menyediakan animasi kepribadian Windows untuk navigasi halaman dalam Bingkai. |
| TambahkanDeleteThemeTransition | Menyediakan perilaku transisi animasi saat kontrol menambahkan atau menghapus anak atau konten. Biasanya kontrol adalah kontainer item. |
| ContentThemeTransition | Menyediakan perilaku transisi animasi saat konten kontrol berubah. Anda dapat menerapkan ini selain AddDeleteThemeTransition. |
| EdgeUIThemeTransition | Menyediakan perilaku transisi animasi untuk transisi antarmuka pengguna tepi (kecil). |
| EntranceThemeTransition | Menyediakan perilaku transisi animasi saat kontrol pertama kali muncul. |
| PaneThemeTransition | Menyediakan perilaku transisi animasi untuk transisi antarmuka pengguna panel (antarmuka pengguna tepi besar). |
| PopupThemeTransition | Menyediakan perilaku transisi animasi yang berlaku untuk komponen pop-in kontrol (misalnya, UI seperti tipsalat pada objek) saat muncul. |
| Menyusun UlangTransisiMe | Menyediakan perilaku transisi animasi saat tampilan daftar mengontrol urutan perubahan item. Biasanya ini terjadi sebagai akibat dari operasi seret-letakkan. Kontrol dan tema yang berbeda dapat memiliki berbagai karakteristik untuk animasi. |
| ReposisiThemeTransition | Menyediakan perilaku transisi animasi saat kontrol mengubah posisi. |
Contoh animasi tema
Animasi transisi mudah diterapkan. Tetapi Anda mungkin ingin memiliki sedikit lebih banyak kontrol atas waktu dan urutan efek animasi Anda. Anda dapat menggunakan animasi tema untuk mengaktifkan lebih banyak kontrol saat masih menggunakan tema yang konsisten untuk bagaimana animasi Anda bertingkah. Animasi tema juga memerlukan lebih sedikit markup daripada animasi kustom. Di sini, kita menggunakan FadeOutThemeAnimation untuk membuat persegi panjang memudar dari tampilan.
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="myStoryboard">
<FadeOutThemeAnimation TargetName="myRectangle" />
</Storyboard>
</StackPanel.Resources>
<Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"
Fill="Blue" Width="200" Height="300"/>
</StackPanel>
// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
myStoryboard.Begin();
}
' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As PointerRoutedEventArgs)
myStoryboard.Begin()
End Sub
//.h
void Rectangle_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);
//.cpp
void BlankPage::Rectangle_Tapped(Object^ sender, PointerRoutedEventArgs^ e)
{
myStoryboard->Begin();
}
Tidak seperti animasi transisi, animasi tema tidak memiliki pemicu bawaan (transisi) yang menjalankannya secara otomatis. Anda harus menggunakan Storyboard untuk berisi animasi tema saat menentukannya di XAML. Anda juga dapat mengubah perilaku default animasi. Misalnya, Anda dapat memperlambat pemudaran dengan meningkatkan nilai Waktu durasi pada FadeOutThemeAnimation.
Catatan Untuk tujuan menampilkan teknik animasi dasar, kami menggunakan kode aplikasi untuk memulai animasi dengan memanggil metode Storyboard. Anda dapat mengontrol cara animasi Storyboard berjalan menggunakan metode Mulai, Hentikan, Jeda, dan Lanjutkan Papan Cerita. Namun, itu biasanya bukan cara Anda menyertakan animasi pustaka di aplikasi. Sebaliknya, Anda biasanya mengintegrasikan animasi pustaka ke dalam gaya dan templat XAML yang diterapkan ke kontrol atau elemen. Mempelajari tentang templat dan status visual sedikit lebih terlibat. Tetapi kami membahas bagaimana Anda akan menggunakan animasi pustaka dalam status visual sebagai bagian dari animasi Storyboarded untuk topik status visual.
Anda dapat menerapkan beberapa animasi tema lain ke elemen UI Anda untuk membuat efek animasi. Nama-nama API ini semuanya berisi "ThemeAnimation":
| API | Deskripsi |
|---|---|
| DragItemThemeAnimation | Mewakili animasi yang telah dikonfigurasi sebelumnya yang berlaku untuk elemen item yang sedang diseret. |
| DragOverThemeAnimation | Mewakili animasi yang telah dikonfigurasi sebelumnya yang berlaku untuk elemen di bawah elemen yang diseret. |
| DropTargetItemThemeAnimation | Animasi yang telah dikonfigurasi sebelumnya yang berlaku untuk elemen target penurunan potensial. |
| FadeInThemeAnimation | Animasi opasitas yang telah dikonfigurasi sebelumnya yang berlaku untuk kontrol saat pertama kali muncul. |
| FadeOutThemeAnimation | Animasi opasitas yang telah dikonfigurasi sebelumnya yang berlaku untuk kontrol ketika dihapus dari UI atau tersembunyi. |
| PointerDownThemeAnimation | Animasi yang telah dikonfigurasi sebelumnya untuk tindakan pengguna yang mengetuk atau mengklik item atau elemen. |
| PointerUpThemeAnimation | Animasi yang telah dikonfigurasi sebelumnya untuk tindakan pengguna yang berjalan setelah pengguna mengetuk item atau elemen dan tindakan dirilis. |
| PopInThemeAnimation | Animasi yang telah dikonfigurasi sebelumnya yang berlaku untuk komponen kontrol pop-in saat muncul. Animasi ini menggabungkan keburaman dan terjemahan. |
| PopOutThemeAnimation | Animasi yang telah dikonfigurasi sebelumnya yang berlaku untuk komponen kontrol pop-in saat ditutup atau dihapus. Animasi ini menggabungkan keburaman dan terjemahan. |
| ReposisiThemeAnimation | Animasi yang telah dikonfigurasi sebelumnya untuk objek saat diposisikan ulang. |
| SplitCloseThemeAnimation | Animasi yang telah dikonfigurasi sebelumnya yang menyembunyikan UI target menggunakan animasi dalam gaya pembukaan dan penutupan ComboBox . |
| SplitOpenThemeAnimation | Animasi yang telah dikonfigurasi sebelumnya yang mengungkapkan UI target menggunakan animasi dalam gaya pembukaan dan penutupan ComboBox . |
| DrillInThemeAnimation | Mewakili animasi yang telah dikonfigurasi sebelumnya yang berjalan saat pengguna menavigasi ke depan dalam hierarki logis, seperti dari halaman daftar ke halaman detail. |
| DrillOutThemeAnimation | Mewakili animasi yang telah dikonfigurasi sebelumnya yang berjalan saat pengguna menavigasi mundur dalam hierarki logis, seperti dari halaman detail ke halaman daftar. |
Membuat animasi Anda sendiri
Ketika animasi tema tidak cukup untuk kebutuhan Anda, Anda dapat membuat animasi Anda sendiri. Anda menganimasikan objek dengan menganimasikan satu atau beberapa nilai propertinya. Misalnya, Anda dapat menganimasikan lebar persegi panjang, sudut RotateTransform, atau nilai warna tombol. Kami menyebut jenis animasi kustom ini sebagai animasi papan cerita, untuk membedakannya dari animasi pustaka yang sudah disediakan Windows Runtime sebagai jenis animasi yang telah dikonfigurasi sebelumnya. Untuk animasi papan cerita, Anda menggunakan animasi yang dapat mengubah nilai jenis tertentu (misalnya DoubleAnimation untuk menganimasikan Double) dan menempatkan animasi tersebut dalam Storyboard untuk mengontrolnya.
Agar dapat dianimasikan, properti yang Anda animasikan harus merupakan properti dependensi. Untuk informasi selengkapnya tentang properti dependensi, lihat Gambaran umum properti Dependensi. Untuk informasi selengkapnya tentang membuat animasi storyboard kustom, termasuk cara menargetkan dan mengontrolnya, lihat Animasi storyboard.
Area terbesar definisi UI aplikasi di XAML tempat Anda akan menentukan animasi storyboard kustom adalah jika Anda menentukan status visual untuk kontrol di XAML. Anda akan melakukan ini baik karena Anda membuat kelas kontrol baru, atau karena Anda membuat templat ulang kontrol yang ada yang memiliki status visual dalam templat kontrolnya. Untuk informasi selengkapnya, lihat Animasi storyboarded untuk status visual.
Windows developer