Animasi dasar

Kelas animasi .NET Multi-platform App UI (.NET MAUI) menargetkan properti elemen visual yang berbeda, dengan animasi dasar umum secara progresif mengubah properti dari satu nilai ke nilai lainnya selama periode waktu tertentu.

Animasi dasar dapat dibuat dengan metode ekstensi yang disediakan oleh kelas ViewExtensions, yang beroperasi pada objek VisualElement:

• CancelAnimations membatalkan animasi apa pun.
• FadeTo menganimasikan properti Opacity dari VisualElement.
• RelScaleTo menerapkan animasi peningkatan atau penurunan bertahap pada properti Scale dari VisualElement.
• RotateTo menganimasikan properti Rotation dari VisualElement.
• RelRotateTo menerapkan peningkatan atau penurunan bertahap yang dianimasikan pada properti Rotation dari VisualElement.
• RotateXTo menganimasikan properti RotationX dari VisualElement.
• RotateYTo menganimasikan properti RotationY pada VisualElement.
• ScaleTo menganimasikan properti Scale dari VisualElement.
• ScaleXTo menganimasikan properti ScaleX dari VisualElement.
• ScaleYTo menganimasikan properti ScaleY dari VisualElement.
• TranslateTo menganimasikan properti TranslationX dan TranslationY dari VisualElement.

Secara default, setiap animasi akan memakan waktu 250 milidetik. Namun, durasi untuk setiap animasi dapat ditentukan saat membuat animasi.

Metode ekstensi animasi di kelas ViewExtensions semuanya asinkron dan mengembalikan objek Task<bool>. Nilai pengembalian false jika animasi selesai, dan true jika animasi dibatalkan. Oleh karena itu, ketika operasi animasi dikombinasikan dengan operator await, menjadi mungkin untuk membuat animasi berurutan dengan metode animasi berikutnya yang dijalankan setelah metode sebelumnya selesai. Untuk informasi selengkapnya, lihat Animasi gabungan.

Jika ada persyaratan untuk membiarkan animasi selesai di latar belakang, maka operator await dapat dihilangkan. Dalam skenario ini, metode ekstensi animasi akan segera kembali setelah memulai animasi, sementara animasi terjadi di latar belakang. Operasi ini dapat dimanfaatkan saat membuat animasi komposit. Untuk informasi selengkapnya, lihat animasi komposit .

Di Android, animasi menghormati pengaturan animasi sistem:

• Jika animasi sistem dinonaktifkan (baik oleh fitur aksesibilitas atau fitur pengembang), animasi baru akan langsung melompat ke status selesai.
• Jika mode penghematan daya perangkat diaktifkan saat animasi sedang berlangsung, animasi akan segera melompat ke status selesai.
• Jika durasi animasi perangkat diatur ke nol (dinonaktifkan) saat animasi sedang berlangsung dan versi API adalah 33 atau lebih besar, animasi akan segera melompat ke status selesai.

Animasi tunggal

Setiap metode ekstensi di kelas ViewExtensions mengimplementasikan satu operasi animasi yang secara progresif mengubah properti dari satu nilai ke nilai lain selama periode waktu tertentu.

Rotasi

Rotasi dilakukan dengan metode RotateTo, yang secara progresif mengubah properti Rotation elemen:

await image.RotateTo(360, 2000);
image.Rotation = 0;

Dalam contoh ini, instans Image diputar hingga 360 derajat lebih dari 2 detik (2000 milidetik). Metode RotateTo memperoleh nilai properti Rotation saat ini dari elemen untuk awal animasi, lalu memutar dari nilai tersebut ke argumen pertamanya (360). Setelah animasi selesai, properti Rotation gambar diatur ulang ke 0. Ini memastikan bahwa properti Rotation tidak tetap pada 360 setelah animasi berakhir, sehingga mencegah rotasi lebih lanjut.

Rotasi relatif

Rotasi relatif dilakukan dengan metode RelRotateTo, yang secara progresif mengubah properti Rotation elemen:

await image.RelRotateTo(360, 2000);

Dalam contoh ini, instans Image diputar 360 derajat dari posisi awalnya selama 2 detik (2000 milidetik). Metode RelRotateTo mendapatkan nilai properti Rotation saat ini dari elemen untuk awal animasi, lalu memutar dari nilai tersebut ke nilai ditambah argumen pertamanya (360). Ini memastikan bahwa setiap animasi akan selalu menjadi rotasi 360 derajat dari posisi awal. Oleh karena itu, jika animasi baru dipanggil saat animasi sudah berlangsung, animasi akan dimulai dari posisi saat ini dan dapat berakhir pada posisi yang bukan kenaikan 360 derajat.

Pensakalan

Penskalaan dilakukan dengan metode ScaleTo, yang secara progresif mengubah properti Scale elemen:

await image.ScaleTo(2, 2000);

Dalam contoh ini, instans Image diskalakan hingga dua kali ukurannya selama 2 detik (2000 milidetik). Metode ScaleTo memperoleh nilai properti Scale saat ini dari elemen untuk awal animasi, lalu menskalakan dari nilai tersebut ke argumen pertamanya. Ini memiliki efek memperluas ukuran gambar menjadi dua kali ukurannya.

Penskalakan relatif

Penskalaan relatif dilakukan dengan metode RelScaleTo, yang secara progresif mengubah properti Scale elemen:

await image.RelScaleTo(2, 2000);

Dalam contoh ini, instans Image diskalakan menjadi dua kali ukuran aslinya selama 2 detik (2000 milidetik). Metode RelScaleTo mendapatkan nilai properti Scale saat ini dari elemen untuk awal animasi, lalu menskalakan dari nilai tersebut ke nilai ditambah argumen pertamanya. Ini memastikan bahwa setiap animasi akan selalu menjadi penskalaan 2 kali dari posisi awal.

Penskalaan dan rotasi dengan jangkar

Properti AnchorX dan AnchorY elemen visual mengatur pusat penskalaan atau rotasi untuk properti Rotation dan Scale. Oleh karena itu, nilainya juga memengaruhi metode RotateTo dan ScaleTo.

Dengan asumsi bahwa ada Image yang telah ditempatkan di pusat tata letak, contoh kode berikut menunjukkan cara memutar gambar mengelilingi pusat tata letak dengan menetapkan propertinya pada AnchorY.

double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateTo(360, 2000);

Untuk memutar instans Image di sekitar tengah tata letak, properti AnchorX dan AnchorY harus diatur ke nilai yang relatif terhadap lebar dan tinggi Image. Dalam contoh ini, pusat Image didefinisikan berada di tengah tata letak, sehingga nilai AnchorX default 0,5 tidak memerlukan perubahan. Namun, properti AnchorY ditentukan ulang menjadi nilai dari bagian atas Image ke titik tengah tata letak. Ini memastikan bahwa Image membuat rotasi penuh 360 derajat di sekitar titik tengah tata letak.

Terjemahan

Terjemahan dilakukan dengan metode TranslateTo, yang secara progresif mengubah properti TranslationX dan TranslationY elemen:

await image.TranslateTo(-100, -100, 1000);

Dalam contoh ini, instans Image diterjemahkan secara horizontal dan vertikal selama 1 detik (1000 milidetik). Metode TranslateTo secara bersamaan menerjemahkan gambar 100 unit independen perangkat ke kiri, dan 100 unit independen perangkat ke atas. Ini karena argumen pertama dan kedua adalah angka negatif. Memberikan angka positif akan menerjemahkan gambar ke kanan, dan ke bawah.

Memudar

Fading dilakukan dengan metode FadeTo, yang secara progresif mengubah properti Opacity elemen:

image.Opacity = 0;
await image.FadeTo(1, 4000);

Dalam contoh ini, instans Image memudar dalam lebih dari 4 detik (4000 milidetik). Metode FadeTo mendapatkan nilai properti Opacity saat ini dari elemen untuk awal animasi, lalu memudar dari nilai tersebut ke argumen pertamanya.

Animasi majemuk

Animasi majemuk adalah kombinasi animasi berurutan, dan dapat dibuat dengan operator await:

await image.TranslateTo(-100, 0, 1000);    // Move image left
await image.TranslateTo(-100, -100, 1000); // Move image diagonally up and left
await image.TranslateTo(100, 100, 2000);   // Move image diagonally down and right
await image.TranslateTo(0, 100, 1000);     // Move image left
await image.TranslateTo(0, 0, 1000);       // Move image up

Dalam contoh ini, instans Image diterjemahkan selama 6 detik (6000 milidetik). Terjemahan Image menggunakan lima animasi, dengan operator await menunjukkan bahwa setiap animasi dijalankan secara berurutan. Oleh karena itu, metode animasi berikutnya dijalankan setelah metode sebelumnya selesai.

Animasi komposit

Animasi komposit adalah kombinasi animasi di mana dua atau beberapa animasi berjalan secara bersamaan. Animasi komposit dapat dibuat dengan menggabungkan animasi yang ditunggu dan tidak ditunggu:

image.RotateTo(360, 4000);
await image.ScaleTo(2, 2000);
await image.ScaleTo(1, 2000);

Dalam contoh ini, instans Image diskalakan dan diputar secara bersamaan selama 4 detik (4000 milidetik). Penskalaan Image menggunakan dua animasi berurutan yang terjadi pada saat yang sama dengan rotasi. Metode RotateTo dijalankan tanpa operator await dan segera kembali, dengan animasi ScaleTo pertama kemudian dimulai. Operator await pada metode ScaleTo pertama menunda metode ScaleTo kedua hingga metode ScaleTo pertama selesai. Pada titik ini animasi RotateTo setengah selesai dan Image akan diputar 180 derajat. Selama 2 detik terakhir (2000 milidetik), animasi ScaleTo kedua dan animasi RotateTo keduanya selesai.

Menjalankan beberapa animasi secara bersamaan

Metode Task.WhenAny dan Task.WhenAll dapat digunakan untuk menjalankan beberapa metode asinkron secara bersamaan, dan oleh karena itu dapat membuat animasi komposit. Kedua metode mengembalikan objek Task dan menerima kumpulan metode yang masing-masing mengembalikan objek Task. Metode Task.WhenAny selesai ketika metode apa pun dalam koleksinya menyelesaikan eksekusi, seperti yang ditunjukkan dalam contoh kode berikut:

await Task.WhenAny<bool>
(
  image.RotateTo(360, 4000),
  image.ScaleTo(2, 2000)
);
await image.ScaleTo(1, 2000);

Dalam contoh ini, metode Task.WhenAny berisi dua tugas. Tugas pertama memutar instans Image lebih dari 4 detik (4000 milidetik), dan tugas kedua menskalakan gambar lebih dari 2 detik (2000 milidetik). Ketika tugas kedua selesai, panggilan metode Task.WhenAny selesai. Namun, meskipun metode RotateTo masih berjalan, metode ScaleTo kedua dapat dimulai.

Metode Task.WhenAll selesai ketika semua metode dalam koleksinya telah selesai, seperti yang ditunjukkan dalam contoh kode berikut:

// 10 minute animation
uint duration = 10 * 60 * 1000;
await Task.WhenAll
(
  image.RotateTo(307 * 360, duration),
  image.RotateXTo(251 * 360, duration),
  image.RotateYTo(199 * 360, duration)
);

Dalam contoh ini, metode Task.WhenAll berisi tiga tugas, yang masing-masing dijalankan selama 10 menit. Setiap Task melakukan jumlah rotasi 360 derajat yang berbeda – 307 rotasi untuk RotateTo, 251 rotasi untuk RotateXTo, dan 199 rotasi untuk RotateYTo. Nilai-nilai ini adalah angka utama, oleh karena itu memastikan bahwa rotasi tidak disinkronkan dan karenanya tidak akan menghasilkan pola berulang.

Pembatalan animasi

Metode ekstensi CancelAnimations digunakan untuk membatalkan animasi apa pun, seperti rotasi, penskalaan, terjemahan, dan pemudaran, yang berjalan pada VisualElementtertentu.

image.CancelAnimations();

Dalam contoh ini, semua animasi yang berjalan pada instans Image segera dibatalkan.