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

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

Perluas Arah:
Tumbuh: 300ms; Kemudahan: Standar

Kontrak Arah:
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:

• UIElement

  • Keburaman
  • Rotasi
  • Sisik
  • Terjemahan

• Batas, ContentPresenter, atau Panel

  • Latar belakang

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

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows 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.

• API UWP: Namespace Windows.UI.Xaml.Media.Animation, Namespace Windows.UI.Xaml.Controls
• WinUI 2 Apis: Namespace Microsoft.UI.Xaml.Controls
• Buka aplikasi Galeri WinUI 2 dan lihat Transisi Implisit beraksi. Aplikasi Galeri WinUI 2 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 2. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub.

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

Artikel terkait

• Gambaran umum gerakan
• Waktu dan kemudahan
• Arah dan gravitasi