Animasi berbasis waktu

Ketika komponen masuk, atau seluruh pengalaman pengguna berubah, pengguna akhir sering mengamatinya dengan dua cara: dari waktu ke waktu atau secara instan. Pada platform Windows, yang pertama lebih disukai daripada yang terakhir - pengalaman pengguna yang langsung berubah sering membingungkan dan mengejutkan pengguna akhir karena mereka tidak dapat mengikuti apa yang terjadi. Pengguna akhir kemudian merasakan pengalaman sebagai jarring dan tidak wajar.

Sebagai gantinya, Anda dapat mengubah UI dari waktu ke waktu untuk memandu pengguna akhir melalui, atau memberi tahu mereka tentang perubahan pada pengalaman. Pada platform Windows, ini dilakukan dengan menggunakan animasi berbasis waktu, juga dikenal sebagai KeyFrameAnimations. KeyFrameAnimations memungkinkan Anda mengubah UI dari waktu ke waktu dan mengontrol setiap aspek animasi, termasuk bagaimana dan kapan dimulai, dan bagaimana ia mencapai status akhir. Misalnya, menganimasikan objek ke posisi baru lebih dari 300 milidetik lebih menyenangkan daripada langsung "teleportasi" di sana. Saat menggunakan animasi alih-alih perubahan seketika, hasil bersih adalah pengalaman yang lebih menyenangkan dan menarik.

Jenis Animasi berbasis waktu

Ada dua kategori animasi berbasis waktu yang dapat Anda gunakan untuk membangun pengalaman pengguna yang indah di Windows:

Animasi Eksplisit – seperti namanya menandakan, Anda secara eksplisit memulai animasi untuk membuat pembaruan. Animasi Implisit – animasi ini dimulai oleh sistem atas nama Anda ketika suatu kondisi terpenuhi.

Untuk artikel ini, kita akan membahas cara membuat dan menggunakan animasi berbasis waktu eksplisit dengan KeyFrameAnimations.

Untuk animasi berbasis waktu eksplisit dan implisit, ada berbagai jenis, yang sesuai dengan berbagai jenis properti CompositionObjects yang dapat Anda animasikan.

• ColorKeyFrameAnimation
• QuaternionKeyFrameAnimation
• ScalarKeyFrameAnimation
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

Membuat animasi berbasis waktu dengan KeyFrameAnimations

Sebelum menjelaskan cara membuat animasi berbasis waktu eksplisit dengan KeyFrameAnimations, mari kita membahas beberapa konsep.

• KeyFrames – Ini adalah "rekam jepret" individu yang akan dianimasikan oleh animasi.
  • Didefinisikan sebagai pasangan kunci & nilai. Kunci mewakili kemajuan antara 0 dan 1, alias di mana dalam masa animasi "rekam jepret" ini terjadi. Parameter lain mewakili nilai properti saat ini.
• Properti KeyFrameAnimation – opsi kustomisasi yang dapat Anda terapkan untuk memenuhi kebutuhan UI.
  • DelayTime – waktu sebelum animasi dimulai setelah StartAnimation dipanggil.
  • Durasi – durasi animasi.
  • IterationBehavior – menghitung atau mengulangi perilaku tak terbatas untuk animasi.
  • IterationCount – berapa kali KeyFrame Animation akan diulang.
  • Jumlah KeyFrame – baca berapa banyak KeyFrame dalam Animasi KeyFrame tertentu.
  • StopBehavior – menentukan perilaku nilai properti animasi saat StopAnimation dipanggil.
  • Arah – menentukan arah animasi untuk pemutaran.
• Grup Animasi – memulai beberapa animasi secara bersamaan.
  • Sering digunakan saat ingin menganimasikan beberapa properti secara bersamaan.

Untuk informasi selengkapnya, lihat KomposisiAnimationGroup.

Dengan mengingat konsep-konsep ini, mari kita bicara melalui rumus umum untuk membangun KeyFrameAnimation:

1. Identifikasi CompositionObject dan properti masing-masing yang perlu Anda animasikan.
2. Buat templat Jenis KeyFrameAnimation dari kompositori yang cocok dengan jenis properti yang ingin Anda animasikan.
3. Dengan menggunakan templat animasi, mulai tambahkan KeyFrames dan tentukan properti animasi.
   • Setidaknya satu KeyFrame diperlukan (keyframe 100% atau 1f).
   • Disarankan untuk menentukan durasi juga.
4. Setelah Anda siap untuk menjalankan animasi ini, panggil StartAnimation(...) pada CompositionObject, yang menargetkan properti yang ingin Anda animasikan. Khusus:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Jika Anda memiliki animasi yang sedang berjalan dan ingin menghentikan Animasi atau Grup Animasi, Anda bisa menggunakan API ini:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Mari kita lihat contoh untuk melihat rumus ini dalam tindakan.

Contoh

Dalam contoh ini, Anda ingin menganimasikan offset visual dari <0,0,0> hingga <200,0,0> selama 1 detik. Selain itu, Anda ingin melihat animasi visual antara posisi ini 10 kali.

Anda pertama kali mulai dengan mengidentifikasi CompositionObject dan properti yang ingin Anda animasikan. Dalam hal ini, kotak merah diwakili oleh Visual Komposisi bernama redVisual. Anda memulai animasi dari objek ini.

Selanjutnya, karena Anda ingin menganimasikan properti Offset, Anda perlu membuat Vector3KeyFrameAnimation (Offset berjenis Vector3). Anda juga menentukan KeyFrames yang sesuai untuk KeyFrameAnimation.

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

Kemudian Anda menentukan properti KeyFrameAnimation untuk menggambarkan durasinya bersama dengan perilaku untuk menganimasikan antara dua posisi (saat ini dan <200.0,0>) 10 kali.

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

Terakhir, untuk menjalankan animasi, Anda perlu memulainya pada properti CompositionObject.

redVisual.StartAnimation("Offset", animation);

Berikut kode lengkapnya.

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}