Animasi tersambung untuk aplikasi Windows

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

Dalam animasi yang tersambung, elemen tampaknya "berlanjut" 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

Buka aplikasi Galeri WinUI 3 dan lihat Transisi Implisit beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

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

Animasi Terhubung dan Sistem Desain Fluent

Sistem Fluent Design membantu Anda menciptakan UI modern dan berani yang menggabungkan cahaya, kedalaman, gerakan, material, dan skala. Animasi yang terhubung adalah komponen Sistem Desain Fasih yang menambahkan gerakan ke aplikasi Anda. Untuk mempelajari selengkapnya, lihat Mendesain untuk aplikasi Windows.

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 terhubung 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 terhubung menambahkan ketertarikan visual dan menyempurnakan navigasi halaman yang dapat membantu membedakan desain pergerakan aplikasi Anda.

Kapan menggunakan animasi tersambung

Animasi yang terhubung 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 terhubung alih-alih navigasi transisi drill-in setiap kali ada gambar atau elemen UI lain yang ada di antara tampilan sumber dan tujuan.

Mengonfigurasi animasi yang tersambung

Animasi yang terhubung semakin mewujudkan Fluent design dengan menyediakan konfigurasi animasi yang disesuaikan khusus untuk navigasi halaman ke depan dan ke belakang.

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 Directionality dan gravitasi.

GravityConnectedAnimationConfiguration

Ini adalah konfigurasi default, dan direkomendasikan untuk navigasi ke depan. Saat pengguna menavigasi ke depan di aplikasi (A ke B), elemen yang terhubung tampaknya secara fisik "terlepas dari halaman". Dengan demikian, elemen tampaknya bergerak maju di z-space dan turun sedikit akibat efek gravitasi yang bekerja. Untuk mengatasi efek gravitasi, elemen mendapatkan kecepatan dan mempercepat ke posisi terakhirnya. 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 Bezier kubik yang menurun. Ketersediaan visual mundur 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, seperti yang dijelaskan dalam tabel ini.

Konfigurasi	Mematuhi DefaultDuration?	Menghormati fungsi pelonggaran default?
Gravitasi	Yes	Ya* * Terjemahan dasar dari A ke B menggunakan fungsi peredaman ini, tetapi "gravitasi dip" memiliki fungsi pengurangan sendiri.
Langsung	Tidak Menganimasikan dalam 150ms.	Tidak Menggunakan fungsi pelambatan decelerate.
Dasar	Yes	Yes

Cara mengimplementasikan animasi yang tersambung

Menyiapkan animasi yang tersambung melibatkan dua langkah:

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

Saat bernavigasi dari halaman sumber, panggil ConnectedAnimationService.GetForCurrentView untuk mendapatkan sebuah instans dari 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 maju

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

Konfigurasi animasi yang direkomendasikan untuk navigasi ke depan 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 penhalusan yang melambat.

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 diatur dan ketika dimulai, elemen asal terlihat tetap beku di atas UI lain dalam 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 kehadiran 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

Seringkali, Anda ingin membuat animasi tersambung dari atau ke kontrol dalam bentuk 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 terhubung 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 terkait 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, bergerak secara bersamaan dengan elemen animasi terkait saat bergerak melintasi layar. Animasi terkoordinasi dapat menambahkan lebih banyak minat visual ke transisi dan lebih menarik perhatian pengguna ke konteks yang dibagikan antara tampilan sumber dan tujuan. Dalam gambar-gambar ini, keterangan antarmuka pengguna untuk item dianimasikan menggunakan animasi terkoordinasi.

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

Gunakan kelebihan parameter dua TryStart untuk menambahkan elemen terkoordinasi ke animasi yang tersambung. Contoh ini menunjukkan animasi terkoordinasi dari layout Grid bernama "DescriptionRoot" yang masuk secara bersamaan 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 });
     }
}

Recommendations

• Gunakan animasi tersambung dalam transisi halaman di mana elemen dibagikan antara halaman sumber dan tujuan.
• Gunakan GravityConnectedAnimationConfiguration untuk navigasi maju.
• Gunakan DirectConnectedAnimationConfiguration untuk navigasi belakang.
• Jangan menunggu permintaan jaringan atau operasi asinkron lain yang berjalan lama di antara mempersiapkan dan memulai animasi yang terhubung. Anda mungkin perlu memuat informasi yang diperlukan di awal untuk mempersiapkan transisi, atau menggunakan gambar sementara beresolusi rendah sementara gambar beresolusi tinggi sedang 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