Bagikan melalui

Membawanya bersama-sama

  • Artikel

Waktu, kemudahan, arah, dan gravitasi bekerja sama untuk membentuk fondasi gerakan Fasih. Masing-masing harus dipertimbangkan dalam konteks yang lain, dan diterapkan dengan tepat dalam konteks aplikasi Anda.

Berikut adalah 3 cara untuk menerapkan dasar-dasar gerakan Fasih di aplikasi Anda.

Animasi implisit Tween otomatis dan waktu antara nilai dalam perubahan parameter untuk mencapai gerakan Fluent yang sangat sederhana menggunakan nilai standar.

Komponen Sistem animasi bawaan, seperti kontrol umum dan gerakan bersama, adalah "Fasih secara default". Dasar-dasar telah diterapkan dengan cara yang konsisten dengan penggunaan tersiratnya.

Animasi kustom mengikuti rekomendasi panduan Mungkin ada kalanya sistem belum memberikan solusi gerakan yang tepat untuk skenario Anda. Dalam kasus tersebut, gunakan rekomendasi dasar garis besar sebagai titik awal untuk pengalaman Anda.

Contoh transisi

animasi fungsi

Arah Maju Keluar:
Pudar keluar: 150m; Pelonggaran: Percepat Arah Maju Default Dalam:
Geser ke atas 150px: 300ms; Pelingan: Default Decelerate

Arah Mundur:
Geser ke bawah 150px: 150ms; Pelingan: Default Mempercepat Arah Mundur Dalam:
Pudar dalam: 300ms; Pelingan: Default Decelerate

Contoh objek

Gerakan 300ms

Perluas Arah:
Tumbuh: 300ms; Kemudahan: Standar

Kontrak Arah:
Tumbuh: 150ms; Pelingan: Akselerasi Default

Contoh

Galeri WinUI

Jika Anda telah menginstal aplikasi Galeri WinUI 2, klik di sini untuk membuka aplikasi dan lihat Transisi Implisit yang sedang berjalan.

Animasi Implisit

Animasi implisit memerlukan Windows 10, versi 1809 (SDK 17763) atau yang lebih baru.

Animasi implisit adalah cara sederhana untuk mencapai gerakan Fasih dengan secara otomatis menginterpolasi antara nilai lama dan baru selama perubahan parameter.

Anda dapat secara implisit menganimasikan perubahan pada properti berikut:

Setiap properti yang dapat memiliki perubahan yang dianimasikan secara implisit memiliki properti transisi yang sesuai. Untuk menganimasikan properti, Anda menetapkan jenis transisi ke properti transisi yang sesuai. Tabel ini memperlihatkan properti transisi dan jenis transisi yang akan digunakan untuk masing-masing properti.

Properti animasi Properti transisi Jenis transisi implisit
UIElement.Opacity OpacityTransition ScalarTransition
UIElement.Rotation RotationTransition ScalarTransition
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Translation TranslationTransition Vector3Transition
Border.Background BackgroundTransition BrushTransition
ContentPresenter.Background BackgroundTransition BrushTransition
Panel.Latar Belakang BackgroundTransition BrushTransition

Contoh ini menunjukkan cara menggunakan properti dan transisi Opacity untuk membuat tombol memudar saat kontrol diaktifkan dan memudar saat dinonaktifkan.

<Button x:Name="SubmitButton"
        Content="Submit"
        Opacity="{x:Bind OpaqueIfEnabled(SubmitButton.IsEnabled), Mode=OneWay}">
    <Button.OpacityTransition>
        <ScalarTransition />
    </Button.OpacityTransition>
</Button>

public double OpaqueIfEnabled(bool IsEnabled)
{
    return IsEnabled ? 1.0 : 0.2;
}