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.
Nota
Kelas ViewExtensions juga menyediakan metode ekstensi LayoutTo. Namun, metode ini dimaksudkan untuk digunakan oleh tata letak untuk menganimasikan transisi antara status tata letak yang berisi perubahan ukuran dan posisi.
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.
Nota
Selain metode RotateTo, ada juga metode RotateXTo dan RotateYTo yang masing-masing menganimasikan properti RotationX
dan RotationY
.
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.
Nota
Selain metode ScaleTo, ada juga metode ScaleXTo dan ScaleYTo yang masing-masing menganimasikan properti ScaleX
dan ScaleY
.
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.
Penting
Jika elemen awalnya diletakkan di luar layar dan kemudian diterjemahkan ke layar, setelah terjemahan tata letak input elemen tetap di luar layar dan pengguna tidak dapat berinteraksi dengannya. Oleh karena itu, disarankan agar tampilan ditata pada posisi akhirnya, dan kemudian lakukan terjemahan yang diperlukan.
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.