Animasi di XAML

  • Artikel

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 di mana 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 yang cepat dan cairan antara UI menyatakan bahwa menginformasikan 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, memberi ruang untuk item yang ditambahkan. Perilaku transisi di sini membuat interaksi kontrol lebih jelas kepada pengguna.

Windows 10, versi 1607 memperkenalkan ConnectedAnimationService API baru untuk mengimplementasikan 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 beberapa 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 interoperaksi Lapisan Visual untuk mengimplementasikan animasi kustom. Lihat Lapisan Visual untuk informasi selengkapnya.

Tipe animasi

Sistem animasi Windows Runtime dan pustaka animasi melayani tujuan yang lebih besar untuk memungkinkan 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 XAML Windows Runtime yang telah ditentukan sebelumnya. Ini disebut transisi tema 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 dari jenis UI XAML Windows Runtime 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 XAML Windows Runtime 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 Begin , 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 biasanya itu adalah waktu yang singkat, paling lama beberapa detik. Untuk informasi selengkapnya, lihat bagian "VisualTransition" dari animasi Storyboarded untuk status visual.
  • Animasi papan cerita 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 tampak 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 selengkapnya tentang skenario penggunaan utama mereka, cara menentukannya, dan untuk melihat contoh animasi.

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 sepotong atau sekumpulan konten ke dalam atau ke luar 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 diterapkan ke konten saat halaman atau bagian besar UI pertama kali dimuat. Dengan demikian tampilan pertama konten 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 animasi pudar masuk dan memudar 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 memudar 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 merefresh 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 kepada pengguna agar berhasil mengetuk atau mengklik petak peta. Misalnya, saat pengguna mengklik atau mengetuk petak peta, animasi penunjuk ke bawah diputar. Setelah klik atau ketuk dirilis, animasi penunjuk ke atas diputar.

Reposisi

Gunakan animasi reposisi (RepositionThemeAnimation atau RepositionThemeTransition) untuk memindahkan elemen ke posisi baru. Misalnya, memindahkan header dalam kontrol item menggunakan animasi reposisi.

Perlihatkan/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 mematikan popup.

Perlihatkan/sembunyikan antarmuka pengguna tepi

Gunakan animasi EdgeUIThemeTransition untuk menggeser antarmuka pengguna kecil berbasis tepi ke dalam dan ke 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 meletakkan item.

Saat aktif, animasi memperlihatkan kepada pengguna bahwa daftar dapat disusun 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 sedang diseret dapat dihilangkan di antara dua item lain dalam daftar dan 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 berubah, animasi menarik perhatian pengguna ke perubahan. Misalnya, tombol Anda mungkin memudar dengan cepat 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 menunjukkan 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, kami 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 anak dari 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 panjang satu per satu.

Berikut adalah demonstrasi animasi ini:

Animasi memperlihatkan persegi panjang turunan beralih ke tampilan

Objek anak dari kontainer juga dapat mengalir kembali ketika satu atau beberapa anak tersebut berubah 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 berubah 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, disusun ulang, dan sebagainya. Nama-nama API ini semuanya berisi "ThemeTransition":

API Deskripsi
NavigationThemeTransition Menyediakan animasi kepribadian Windows untuk navigasi halaman dalam Bingkai.
AddDeleteThemeTransition 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 kontrol pop-in (misalnya, UI seperti tipsalat pada objek) saat muncul.
Urus UlangTransisi Tema 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.
RepositionThemeTransition 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 pengaturan waktu dan urutan efek animasi Anda. Anda dapat menggunakan animasi tema untuk mengaktifkan lebih banyak kontrol sambil tetap menggunakan tema yang konsisten tentang perilaku animasi Anda. Animasi tema juga memerlukan lebih sedikit markup daripada animasi kustom. Di sini, kita menggunakan FadeOutThemeAnimation untuk membuat persegi 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 Papan Cerita untuk memuat animasi tema saat Anda menentukannya di XAML. Anda juga dapat mengubah perilaku default animasi. Misalnya, Anda dapat memperlambat pudar 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 LanjutkanPapan 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. Tapi 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 potensial drop.
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 saat 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 pop-in kontrol saat muncul. Animasi ini menggabungkan tingkat keburaman dan terjemahan.
PopOutThemeAnimation Animasi yang telah dikonfigurasi sebelumnya yang berlaku untuk komponen pop-in kontrol saat ditutup atau dihapus. Animasi ini menggabungkan tingkat keburaman dan terjemahan.
RepositionThemeAnimation 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 menyebutnya tipe animasi kustom ini sebagai animasi papan cerita, untuk membedakannya dari animasi pustaka yang sudah disediakan Windows Runtime sebagai tipe 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 Papan Cerita 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 papan cerita kustom, termasuk cara menargetkan dan mengontrolnya, lihat Animasi papan cerita.

Area terbesar definisi UI aplikasi di XAML tempat Anda akan menentukan animasi papan cerita 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 storyboard untuk status visual.