Bagikan melalui

Menganimasikan elemen XAML dengan animasi komposisi

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 harus mendapatkan Visual komposisi yang mendasar.

Nota

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 yang adaptif terhadap versi.

Contoh

Galeri WinUI 2
Galeri WinUI

Jika Aplikasi Galeri WinUI 2 terinstal, klik di sini untuk membuka aplikasi dan lihat Interop animasi dalam tindakan.

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.

Harta benda Tipe Deskripsi
Opasitas Dobel Tingkat keburaman objek
Terjemahan Vektor3 Geser posisi X/Y/Z elemen
TransformMatrix Matriks4x4 Matriks transformasi yang akan diterapkan ke elemen
Skala Vektor3 Mengubah skala elemen, berpusat pada titik pusat
Rotasi Mengapung Memutar elemen di sekitar RotationAxis dan CenterPoint
SumbuRotasi 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 Mengukur/Menyusun pass baru.

Properti ini memiliki tujuan dan perilaku yang sama dengan properti yang bernama sama dengan pada komposisi kelas Visual (kecuali Translasi 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

Nota

Properti Opacity tidak memberlakukan sifat saling eksklusif 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.

Memungkinkan untuk beralih dari satu set properti dengan menghapusnya; namun, demi menjaga kesederhanaan, hal ini 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 olehExpressionAnimation .

Gunakan metode StartAnimation dan StopAnimation pada UIElement untuk mengubah 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 dianimasikan menjadi dua kali lebih besar (melalui skala) daripada 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);