Bagikan melalui

Membawanya bersama-sama

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.
  • Animasi bawaan
    Komponen sistem, 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

Petunjuk Keluar Maju:
Menghilang: 150m; Penghalusan: Percepatan Bawaan Arah Maju Pada Bawaan:
Geser ke atas 150px: 300ms; Pelingan: Default Decelerate

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

Contoh objek

300ms gerakan

Arah Perluasan:
Tumbuh: 300ms; Kemudahan: Standar

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

Contoh

Buka aplikasi Galeri WinUI 3 dan lihat Transisi Implisit beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Animasi Implisit

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 secara implisit dapat dianimasikan 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 transisi.

Properti animasi Properti transisi Jenis transisi implisit
UIElement.Opacity OpacityTransition ScalarTransition
UIElement.Rotation Rotasi Transisi ScalarTransition
UIElement.Scale Transisi Skala Vektor3Transisi
UIElement.Translation Transisi Terjemahan Vektor3Transisi
Perbatasan.Latar Belakang Latar BelakangTransisi Transisi Kuas
KontenPresenter.LatarBelakang Latar BelakangTransisi Transisi Kuas
Panel.Latar Belakang Latar BelakangTransisi Transisi Kuas

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;
}

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan Windows App SDK dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

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