Animasi tersambung untuk aplikasi Windows

Animasi terhubung memungkinkan Anda membuat pengalaman navigasi yang dinamis dan menarik dengan menjiwai transisi elemen di antara dua tampilan yang berbeda. Ini membantu pengguna mempertahankan konteks mereka dan memberikan kontinuitas antara tampilan.

Dalam animasi yang tersambung, elemen tampak "melanjutkan" di antara dua tampilan selama perubahan konten UI, terbang melintasi layar dari lokasinya dalam tampilan sumber ke tujuannya dalam tampilan baru. Ini menekankan konten umum antara tampilan dan menciptakan efek yang indah dan dinamis sebagai bagian dari transisi.

API penting: Kelas ConnectedAnimation, kelas ConnectedAnimationService

Contoh

Galeri WinUI 2
	Jika Anda memiliki aplikasi Galeri WinUI 2 yang terinstal , klik di sini untuk membuka aplikasi dan lihat Animasi Tersambung beraksi. Mendapatkan aplikasi WinUI 2 Gallery (Microsoft Store) Dapatkan kode sumber (GitHub)

Dalam video singkat ini, aplikasi menggunakan animasi yang terhubung untuk menganimasikan gambar item saat "berlanjut" untuk menjadi bagian dari header halaman berikutnya. Efeknya membantu mempertahankan konteks pengguna di seluruh transisi.

Animasi tersambung dan Sistem Fluent Design

Sistem Fluent Design membantu Anda membuat UI modern dan tebal yang menggabungkan cahaya, kedalaman, gerakan, bahan, dan skala. Animasi yang tersambung adalah komponen Sistem Fluent Design yang menambahkan gerakan ke aplikasi Anda. Untuk mempelajari lebih lanjut, lihat gambaran umum Desain Fasih.

Mengapa animasi tersambung?

Saat menavigasi antar halaman, penting bagi pengguna untuk memahami konten baru apa yang disajikan setelah navigasi dan bagaimana hubungannya dengan niat mereka saat menavigasi. Animasi yang tersambung menyediakan metafora visual yang kuat yang menekankan hubungan antara dua tampilan dengan menggambar fokus pengguna ke konten yang dibagikan di antara mereka. Selain itu, animasi yang terhubung menambahkan minat visual dan memoles navigasi halaman yang dapat membantu membedakan desain gerakan aplikasi Anda.

Kapan menggunakan animasi tersambung

Animasi tersambung umumnya digunakan saat mengubah halaman, meskipun dapat diterapkan ke pengalaman apa pun di mana Anda mengubah konten di UI dan ingin pengguna mempertahankan konteks. Anda harus mempertimbangkan untuk menggunakan animasi yang tersambung alih-alih latihan dalam transisi navigasi setiap kali ada gambar atau bagian lain dari UI yang dibagikan antara tampilan sumber dan tujuan.

Mengonfigurasi animasi yang tersambung

Penting

Fitur ini mengharuskan versi Target aplikasi Anda Windows 10, versi 1809 (SDK 17763) atau yang lebih baru. Properti Konfigurasi tidak tersedia di SDK sebelumnya. Anda dapat menargetkan Versi minimum yang lebih rendah dari SDK 17763 menggunakan kode adaptif atau XAML bersyar. Untuk informasi selengkapnya, lihat Aplikasi adaptif versi.

Mulai Windows 10, versi 1809, animasi yang terhubung semakin mewujudkan desain Fluent dengan menyediakan konfigurasi animasi yang disesuaikan khusus untuk navigasi halaman maju dan mundur.

Anda menentukan konfigurasi animasi dengan mengatur properti Konfigurasi pada ConnectedAnimation. (Kami akan menampilkan contoh ini di bagian berikutnya.)

Tabel ini menjelaskan konfigurasi yang tersedia. Untuk informasi selengkapnya tentang prinsip gerakan yang diterapkan dalam animasi ini, lihat Arah dan gravitasi.

GravityConnectedAnimationConfiguration
Ini adalah konfigurasi default, dan direkomendasikan untuk navigasi penerusan.
Saat pengguna menavigasi ke depan di aplikasi (A ke B), elemen yang terhubung tampaknya secara fisik "menarik halaman". Dengan demikian, elemen tampaknya bergerak maju dalam z-space dan turun sedikit sebagai efek gravitasi yang menahan. Untuk mengatasi efek gravitasi, elemen mendapatkan kecepatan dan mempercepat ke posisi akhir. Hasilnya adalah animasi "skala dan turun".

DirectConnectedAnimationConfiguration
Saat pengguna menavigasi mundur di aplikasi (B ke A), animasi lebih langsung. Elemen yang terhubung secara linier diterjemahkan dari B ke A menggunakan fungsi pelinggihan Cubic Bezier yang menurun. Keterbalikkan visual mengembalikan pengguna ke status sebelumnya secepat mungkin sambil tetap mempertahankan konteks alur navigasi.

BasicConnectedAnimationConfiguration
Ini adalah animasi default (dan hanya) yang digunakan dalam versi sebelum Windows 10, versi 1809 (SDK 17763).

Konfigurasi ConnectedAnimationService

Kelas ConnectedAnimationService memiliki dua properti yang berlaku untuk animasi individual daripada layanan keseluruhan.

• DefaultDuration
• DefaultEasingFunction

Untuk mencapai berbagai efek, beberapa konfigurasi mengabaikan properti ini pada ConnectedAnimationService dan menggunakan nilainya sendiri sebagai gantinya, seperti yang dijelaskan dalam tabel ini.

Konfigurasi	Menghormati DefaultDuration?	Menghormati DefaultEasingFunction?
Gravitasi	Ya	Ya* *Terjemahan dasar dari A ke B menggunakan fungsi peredaman ini, tetapi "gravitasi dip" memiliki fungsi kemudahannya sendiri.
Langsung	Tidak Animasikan lebih dari 150ms.	Tidak Menggunakan fungsi penghapusan Decelerate.
Dasar	Ya	Ya

Cara mengimplementasikan animasi yang tersambung

Menyiapkan animasi yang tersambung melibatkan dua langkah:

1. Siapkan objek animasi pada halaman sumber, yang menunjukkan kepada sistem bahwa elemen sumber akan berpartisipasi dalam animasi yang tersambung.
2. Mulai animasi pada halaman tujuan, meneruskan referensi ke elemen tujuan.

Saat menavigasi dari halaman sumber, panggil ConnectedAnimationService.GetForCurrentView untuk mendapatkan instans ConnectedAnimationService. Untuk menyiapkan animasi, panggil PrepareToAnimate pada instans ini, dan berikan kunci unik dan elemen UI yang ingin Anda gunakan dalam transisi. Kunci unik memungkinkan Anda mengambil animasi nanti di halaman tujuan.

ConnectedAnimationService.GetForCurrentView()
    .PrepareToAnimate("forwardAnimation", SourceImage);

Saat navigasi terjadi, mulai animasi di halaman tujuan. Untuk memulai animasi, panggil ConnectedAnimation.TryStart. Anda dapat mengambil instans animasi yang tepat dengan memanggil ConnectedAnimationService.GetAnimation dengan kunci unik yang Anda berikan saat membuat animasi.

ConnectedAnimation animation =
    ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
if (animation != null)
{
    animation.TryStart(DestinationImage);
}

Navigasi teruskan

Contoh ini memperlihatkan cara menggunakan ConnectedAnimationService untuk membuat transisi untuk navigasi maju antara dua halaman (Page_A ke Page_B).

Konfigurasi animasi yang direkomendasikan untuk navigasi penerusan adalah GravityConnectedAnimationConfiguration. Ini adalah default, jadi Anda tidak perlu mengatur properti Konfigurasi kecuali Anda ingin menentukan konfigurasi yang berbeda.

Siapkan animasi di halaman sumber.

<!-- Page_A.xaml -->

<Image x:Name="SourceImage"
       HorizontalAlignment="Left" VerticalAlignment="Top"
       Width="200" Height="200"
       Stretch="Fill"
       Source="Assets/StoreLogo.png"
       PointerPressed="SourceImage_PointerPressed"/>

// Page_A.xaml.cs

private void SourceImage_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    // Navigate to detail page.
    // Suppress the default animation to avoid conflict with the connected animation.
    Frame.Navigate(typeof(Page_B), null, new SuppressNavigationTransitionInfo());
}

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    ConnectedAnimationService.GetForCurrentView()
        .PrepareToAnimate("forwardAnimation", SourceImage);
    // You don't need to explicitly set the Configuration property because
    // the recommended Gravity configuration is default.
    // For custom animation, use:
    // animation.Configuration = new BasicConnectedAnimationConfiguration();
}

Mulai animasi di halaman tujuan.

<!-- Page_B.xaml -->

<Image x:Name="DestinationImage"
       Width="400" Height="400"
       Stretch="Fill"
       Source="Assets/StoreLogo.png" />

// Page_B.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ConnectedAnimation animation =
        ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
    if (animation != null)
    {
        animation.TryStart(DestinationImage);
    }
}

Navigasi belakang

Untuk navigasi belakang (Page_B ke Page_A), Anda mengikuti langkah yang sama, tetapi halaman sumber dan tujuan dibalik.

Saat pengguna menavigasi kembali, mereka mengharapkan aplikasi dikembalikan ke status sebelumnya sesegera mungkin. Oleh karena itu, konfigurasi yang direkomendasikan adalah DirectConnectedAnimationConfiguration. Animasi ini lebih cepat, lebih langsung, dan menggunakan pelebaran yang dipercepat.

Siapkan animasi di halaman sumber.

// Page_B.xaml.cs

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (e.NavigationMode == NavigationMode.Back)
    {
        ConnectedAnimation animation = 
            ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("backAnimation", DestinationImage);

        // Use the recommended configuration for back animation.
        animation.Configuration = new DirectConnectedAnimationConfiguration();
    }
}

Mulai animasi di halaman tujuan.

// Page_A.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ConnectedAnimation animation =
        ConnectedAnimationService.GetForCurrentView().GetAnimation("backAnimation");
    if (animation != null)
    {
        animation.TryStart(SourceImage);
    }
}

Antara waktu animasi disiapkan dan saat dimulai, elemen sumber tampak membeku di atas UI lain di aplikasi. Ini memungkinkan Anda melakukan animasi transisi lainnya secara bersamaan. Untuk alasan ini, Anda tidak boleh menunggu lebih dari ~250 milidetik di antara dua langkah karena keberadaan elemen sumber mungkin menjadi mengganggu. Jika Anda menyiapkan animasi dan tidak memulainya dalam waktu tiga detik, sistem akan membuang animasi dan panggilan berikutnya ke TryStart akan gagal.

Animasi tersambung dalam pengalaman daftar dan kisi

Sering kali, Anda ingin membuat animasi yang tersambung dari atau ke kontrol daftar atau kisi. Anda dapat menggunakan dua metode pada ListView dan GridView, PrepareConnectedAnimation dan TryStartConnectedAnimationAsync, untuk menyederhanakan proses ini.

Misalnya, Anda memiliki ListView yang berisi elemen dengan nama "PortraitEllipse" dalam templat datanya.

<ListView x:Name="ContactsListView" Loaded="ContactsListView_Loaded">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="vm:ContactsItem">
            <Grid>
                …
                <Ellipse x:Name="PortraitEllipse" … />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Untuk menyiapkan animasi yang tersambung dengan elips yang sesuai dengan item daftar tertentu, panggil metode PrepareConnectedAnimation dengan kunci unik, item, dan nama "PortraitEllipse".

void PrepareAnimationWithItem(ContactsItem item)
{
     ContactsListView.PrepareConnectedAnimation("portrait", item, "PortraitEllipse");
}

Untuk memulai animasi dengan elemen ini sebagai tujuan, seperti saat menavigasi kembali dari tampilan detail, gunakan TryStartConnectedAnimationAsync. Jika Anda baru saja memuat sumber data untuk ListView, TryStartConnectedAnimationAsync akan menunggu untuk memulai animasi hingga kontainer item yang sesuai telah dibuat.

private async void ContactsListView_Loaded(object sender, RoutedEventArgs e)
{
    ContactsItem item = GetPersistedItem(); // Get persisted item
    if (item != null)
    {
        ContactsListView.ScrollIntoView(item);
        ConnectedAnimation animation =
            ConnectedAnimationService.GetForCurrentView().GetAnimation("portrait");
        if (animation != null)
        {
            await ContactsListView.TryStartConnectedAnimationAsync(
                animation, item, "PortraitEllipse");
        }
    }
}

Animasi terkoordinasi

Animasi terkoordinasi adalah jenis animasi masuk khusus di mana elemen muncul bersama dengan target animasi yang terhubung, beranimasi bersama dengan elemen animasi yang terhubung saat bergerak di seluruh layar. Animasi terkoordinasi dapat menambahkan lebih banyak minat visual ke transisi dan menarik perhatian pengguna lebih lanjut ke konteks yang dibagikan antara tampilan sumber dan tujuan. Dalam gambar-gambar ini, antarmuka pengguna caption untuk item beranimasi menggunakan animasi terkoordinasi.

Ketika animasi terkoordinasi menggunakan konfigurasi gravitasi, gravitasi diterapkan ke elemen animasi yang terhubung dan elemen terkoordinasi. Elemen terkoordinasi akan "memuncak" bersama elemen yang terhubung sehingga elemen tetap benar-benar terkoordinasi.

Gunakan kelebihan dua parameter TryStart untuk menambahkan elemen terkoordinasi ke animasi yang tersambung. Contoh ini menunjukkan animasi terkoordinasi dari tata letak Kisi bernama "DescriptionRoot" yang masuk bersama dengan elemen animasi yang terhubung bernama "CoverImage".

<!-- DestinationPage.xaml -->
<Grid>
    <Image x:Name="CoverImage" />
    <Grid x:Name="DescriptionRoot" />
</Grid>

// DestinationPage.xaml.cs
void OnNavigatedTo(NavigationEventArgs e)
{
    var animationService = ConnectedAnimationService.GetForCurrentView();
    var animation = animationService.GetAnimation("coverImage");

    if (animation != null)
    {
        // Don’t need to capture the return value as we are not scheduling any subsequent
        // animations
        animation.TryStart(CoverImage, new UIElement[] { DescriptionRoot });
     }
}

Lakukan dan jangan lakukan

• Gunakan animasi tersambung dalam transisi halaman di mana elemen dibagikan antara halaman sumber dan tujuan.
• Gunakan GravityConnectedAnimationConfiguration untuk navigasi penerusan.
• Gunakan DirectConnectedAnimationConfiguration untuk navigasi belakang.
• Jangan menunggu permintaan jaringan atau operasi asinkron jangka panjang lainnya di antara mempersiapkan dan memulai animasi yang tersambung. Anda mungkin perlu memuat informasi yang diperlukan terlebih dahulu untuk menjalankan transisi sebelumnya, atau menggunakan gambar tempat penampung resolusi rendah saat gambar resolusi tinggi dimuat dalam tampilan tujuan.
• Gunakan SuppressNavigationTransitionInfo untuk mencegah animasi transisi dalam Bingkai jika Anda menggunakan ConnectedAnimationService, karena animasi yang terhubung tidak dimaksudkan untuk digunakan secara bersamaan dengan transisi navigasi default. Lihat NavigationThemeTransition untuk informasi selengkapnya tentang cara menggunakan transisi navigasi.

Artikel terkait

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition