Bagikan melalui

Menganimasikan elemen XAML dengan animasi komposisi

  • Artikel

Artikel ini memperkenalkan properti baru yang memungkinkan Anda menganimasikan XAML UIElement dengan performa animasi komposisi dan kemudahan pengaturan properti XAML.

Sebelum Windows 10, versi 1809, Anda memiliki 2 pilihan untuk membangun animasi di aplikasi UWP Anda:

Menggunakan lapisan visual memberikan performa yang lebih baik daripada menggunakan konstruksi XAML. Tetapi menggunakan ElementCompositionPreview untuk mendapatkan objek Visual komposisi dasar elemen, dan kemudian menganimasikan Visual dengan animasi komposisi, lebih kompleks untuk digunakan.

Mulai dari Windows 10, versi 1809, Anda dapat menganimasikan properti pada UIElement secara langsung menggunakan animasi komposisi tanpa persyaratan untuk mendapatkan komposisi visual yang mendasar.

Catatan

Untuk menggunakan properti ini pada UIElement, versi target proyek UWP Anda harus 1809 atau yang lebih baru. Untuk informasi selengkapnya tentang mengonfigurasi versi proyek Anda, lihat Aplikasi adaptif versi.

Contoh

Galeri WinUI 2
Galeri WinUI

Jika Aplikasi Galeri WinUI 2 terinstal, klik di sini untuk membuka aplikasi dan lihat Interop Animasi sedang beraksi.

Properti penyajian baru menggantikan properti penyajian lama

Tabel ini memperlihatkan properti yang dapat Anda gunakan untuk memodifikasi penyajian UIElement, yang juga dapat dianimasikan dengan CompositionAnimation.

Properti Tipe Deskripsi
Keburaman Laju Tingkat keburaman objek
Terjemahan Vektor3 Geser posisi X/Y/Z elemen
TransformMatrix Matriks4x4 Matriks transformasi yang akan diterapkan ke elemen
Sisik Vektor3 Menskalakan elemen, berpusat di CenterPoint
Rotasi Float Memutar elemen di sekitar RotationAxis dan CenterPoint
RotationAxis Vektor3 Sumbu rotasi
Titik Tengah Vektor3 Titik tengah skala dan rotasi

Nilai properti TransformMatrix dikombinasikan dengan properti Skala, Rotasi, dan Terjemahan dalam urutan berikut: TransformMatrix, Scale, Rotation, Translation.

Properti ini tidak memengaruhi tata letak elemen, sehingga memodifikasi properti ini tidak menyebabkan pass Measure/Arrange baru.

Properti ini memiliki tujuan dan perilaku yang sama dengan properti bernama seperti pada kelas Visual komposisi (kecuali untuk Terjemahan, yang tidak ada di Visual).

Contoh: Mengatur properti Skala

Contoh ini menunjukkan cara mengatur properti Skala pada Tombol.

<Button Scale="2,2,1" Content="I am a large button" />

var button = new Button();
button.Content = "I am a large button";
button.Scale = new Vector3(2.0f,2.0f,1.0f);

Eksklusivitas timbal balik antara properti baru dan lama

Catatan

Properti Opacity tidak memberlakukan eksklusivitas timbal balik yang dijelaskan di bagian ini. Anda menggunakan properti Opacity yang sama apakah Anda menggunakan XAML atau animasi komposisi.

Properti yang dapat dianimasikan dengan CompositionAnimation adalah pengganti untuk beberapa properti UIElement yang ada:

Saat Anda mengatur (atau menganimasikan) salah satu properti baru, Anda tidak dapat menggunakan properti lama. Sebaliknya, jika Anda mengatur (atau menganimasikan) salah satu properti lama, Anda tidak dapat menggunakan properti baru.

Anda juga tidak dapat menggunakan properti baru jika Anda menggunakan ElementCompositionPreview untuk mendapatkan dan mengelola Visual sendiri menggunakan metode ini:

Penting

Mencoba mencampur penggunaan dua set properti akan menyebabkan panggilan API gagal dan menghasilkan pesan kesalahan.

Dimungkinkan untuk beralih dari satu set properti dengan menghapusnya, meskipun untuk kesederhanaan, tidak disarankan. Jika properti didukung oleh DependencyProperty (misalnya, UIElement.Projection didukung oleh UIElement.ProjectionProperty), maka panggil ClearValue untuk memulihkannya ke status "tidak digunakan". Jika tidak (misalnya, properti Skala), atur properti ke nilai defaultnya.

Menganimasikan properti UIElement dengan CompositionAnimation

Anda dapat menganimasikan properti penyajian yang tercantum dalam tabel dengan CompositionAnimation. Properti ini juga dapat direferensikan oleh ExpressionAnimation.

Gunakan metode StartAnimation dan StopAnimation pada UIElement untuk menganimasikan properti UIElement.

Contoh: Menganimasikan properti Skala dengan Vector3KeyFrameAnimation

Contoh ini menunjukkan cara menganimasikan skala Tombol.

var compositor = Window.Current.Compositor;
var animation = compositor.CreateVector3KeyFrameAnimation();

animation.InsertKeyFrame(1.0f, new Vector3(2.0f,2.0f,1.0f));
animation.Duration = TimeSpan.FromSeconds(1);
animation.Target = "Scale";

button.StartAnimation(animation);

Contoh: Menganimasikan properti Skala dengan ExpressionAnimation

Halaman memiliki dua tombol. Tombol kedua menganimasikan menjadi dua kali lebih besar (melalui skala) sebagai tombol pertama.

<Button x:Name="sourceButton" Content="Source"/>
<Button x:Name="destinationButton" Content="Destination"/>

var compositor = Window.Current.Compositor;
var animation = compositor.CreateExpressionAnimation("sourceButton.Scale*2");
animation.SetExpressionReferenceParameter("sourceButton", sourceButton);
animation.Target = "Scale";
destinationButton.StartAnimation(animation);