Bagikan melalui

Animasi dalam Windows app

Waktu, kemudahan, arah, dan gravitasi berkolaborasi untuk membentuk dasar gerakan Fluent. 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 Fluent di dalam aplikasi Anda.

  • Animasi implisit
    Proses tween otomatis dan pengaturan waktu antar nilai dalam perubahan parameter untuk mencapai gerakan yang sangat lancar dan sederhana menggunakan nilai-nilai yang telah distandarisasi.
  • 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; Pelembutan: 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:
Durasi: 300ms; Penghalusan: Standar

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

Animasi Implisit

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

Buka aplikasi Galeri WinUI 3 dan lihat Transisi Implisit beraksi

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

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 yang dianimasikan Properti transisi Jenis transisi implisit
UIElement.Opacity OpacityTransition ScalarTransition
UIElement.Rotation Rotation Transition ScalarTransition
UIElement.Scale Transisi Skala Vector3Transisi
UIElement.Translation Transisi Terjemahan Vector3Transisi
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 Opacity dan transisi untuk membuat tombol memudar masuk saat kontrol diaktifkan dan memudar keluar saat kontrol 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;
}
  • Last updated on