Bagikan melalui

Animasi Sederhana di Xamarin.Forms

  • Artikel

Kelas ViewExtensions menyediakan metode ekstensi yang dapat digunakan untuk membangun animasi sederhana. Artikel ini menunjukkan pembuatan dan pembatalan animasi menggunakan kelas ViewExtensions.

Kelas ini ViewExtensions menyediakan metode ekstensi berikut yang dapat digunakan untuk membuat animasi sederhana:

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

Catatan

Kelas ini ViewExtensions menyediakan LayoutTo metode ekstensi. Namun, metode ini dimaksudkan untuk digunakan oleh tata letak untuk menganimasikan transisi antara status tata letak yang berisi perubahan ukuran dan posisi. Oleh karena itu, itu hanya boleh digunakan oleh Layout subkelas.

Metode ekstensi animasi di ViewExtensions kelas semuanya asinkron dan mengembalikan Task<bool> objek. Nilai yang dikembalikan adalah false jika animasi selesai, dan true jika animasi dibatalkan. Oleh karena itu, metode animasi biasanya harus digunakan dengan await operator, yang memungkinkan untuk dengan mudah menentukan kapan animasi telah selesai. Selain itu, kemudian menjadi mungkin untuk membuat animasi berurutan dengan metode animasi berikutnya yang dijalankan setelah metode sebelumnya selesai. Untuk informasi selengkapnya, lihat Animasi Majemuk.

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

Untuk informasi selengkapnya tentang await operator, lihat Gambaran Umum Dukungan Asinkron.

Animasi Tunggal

Setiap metode ekstensi dalam ViewExtensions mengimplementasikan satu operasi animasi yang secara progresif mengubah properti dari satu nilai ke nilai lain selama periode waktu tertentu. Bagian ini menjelajahi setiap operasi animasi.

Rotasi

Contoh kode berikut menunjukkan menggunakan RotateTo metode untuk menganimasikan Rotation properti dari Image:

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

Kode ini menganimasikan instans Image dengan memutar hingga 360 derajat lebih dari 2 detik (2000 milidetik). Metode ini RotateTo memperoleh nilai properti saat ini Rotation untuk awal animasi, lalu memutar dari nilai tersebut ke argumen pertamanya (360). Setelah animasi selesai, properti gambar Rotation diatur ulang ke 0. Ini memastikan bahwa Rotation properti tidak tetap di 360 setelah animasi menyimpulkan, yang akan mencegah rotasi tambahan.

Cuplikan layar berikut menunjukkan rotasi yang sedang berlangsung di setiap platform:

Animasi Rotasi

Catatan

Selain metode , RotateTo ada juga RotateXTo metode dan RotateYTo yang menganimasikan RotationX properti dan RotationY , masing-masing.

Rotasi Relatif

Contoh kode berikut menunjukkan penggunaan RelRotateTo metode untuk meningkatkan atau mengurangi Rotation properti secara bertahap dari Image:

await image.RelRotateTo (360, 2000);

Kode ini menganimasikan instans Image dengan memutar 360 derajat dari posisi awalnya selama 2 detik (2000 milidetik). Metode ini RelRotateTo memperoleh nilai properti saat ini Rotation 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.

Cuplikan layar berikut menunjukkan rotasi relatif yang sedang berlangsung di setiap platform:

Animasi Rotasi Relatif

Penskalaan

Contoh kode berikut menunjukkan menggunakan ScaleTo metode untuk menganimasikan Scale properti dari Image:

await image.ScaleTo (2, 2000);

Kode ini menganimasikan instans dengan menskalakan Image hingga dua kali ukurannya lebih dari 2 detik (2000 milidetik). Metode ini ScaleTo memperoleh nilai properti saat ini Scale (nilai default 1) untuk awal animasi, lalu menskalakan dari nilai tersebut ke argumen pertamanya (2). Ini memiliki efek memperluas ukuran gambar menjadi dua kali ukurannya.

Cuplikan layar berikut menunjukkan skala yang sedang berlangsung di setiap platform:

Menskalakan Animasi

Catatan

Selain metode , ScaleTo ada juga ScaleXTo metode dan ScaleYTo yang menganimasikan ScaleX properti dan ScaleY , masing-masing.

Penskalakan Relatif

Contoh kode berikut menunjukkan menggunakan RelScaleTo metode untuk menganimasikan Scale properti dari Image:

await image.RelScaleTo (2, 2000);

Kode ini menganimasikan instans dengan menskalakan Image hingga dua kali ukurannya lebih dari 2 detik (2000 milidetik). Metode ini RelScaleTo memperoleh nilai properti saat ini Scale untuk awal animasi, lalu menskalakan dari nilai tersebut ke nilai ditambah argumen pertamanya (2). Ini memastikan bahwa setiap animasi akan selalu menjadi penskalaan 2 dari posisi awal.

Penskalaan dan Rotasi dengan Jangkar

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

Image Mengingat yang telah ditempatkan di tengah tata letak, contoh kode berikut menunjukkan pemutaran gambar di sekitar pusat tata letak dengan mengatur propertinyaAnchorY:

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

Untuk memutar instans di Image sekitar pusat tata letak, AnchorX properti 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 default AnchorX 0,5 tidak memerlukan perubahan. Namun, AnchorY properti ditentukan ulang menjadi nilai dari bagian Image atas ke titik tengah tata letak. Ini memastikan bahwa membuat rotasi penuh 360 derajat di sekitar titik tengah tata letak, seperti yang Image ditunjukkan pada cuplikan layar berikut:

Animasi Rotasi dengan Jangkar

Terjemahan

Contoh kode berikut menunjukkan menggunakan TranslateTo metode untuk menganimasikan TranslationX properti dan TranslationY dari Image:

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

Kode ini menganimasikan instans Image dengan menerjemahkannya secara horizontal dan vertikal lebih dari 1 detik (1000 milidetik). Metode ini TranslateTo secara bersamaan menerjemahkan gambar 100 piksel ke kiri, dan 100 piksel ke atas. Ini karena argumen pertama dan kedua adalah angka negatif. Memberikan angka positif akan menerjemahkan gambar ke kanan, dan ke bawah.

Cuplikan layar berikut menunjukkan terjemahan yang sedang berlangsung di setiap platform:

Animasi Terjemahan

Catatan

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 harus ditata dalam posisi terakhirnya, dan kemudian terjemahan yang diperlukan dilakukan.

Memudar

Contoh kode berikut menunjukkan menggunakan FadeTo metode untuk menganimasikan Opacity properti dari Image:

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

Kode ini menganimasikan instans Image dengan memudarkannya dalam lebih dari 4 detik (4000 milidetik). Metode ini FadeTo memperoleh nilai properti saat ini Opacity untuk awal animasi, lalu memudar dari nilai tersebut ke argumen pertamanya (1).

Cuplikan layar berikut menunjukkan pudarnya yang sedang berlangsung di setiap platform:

Animasi Memudar

Animasi Majemuk

Animasi majemuk adalah kombinasi animasi berurutan, dan dapat dibuat dengan await operator, seperti yang ditunjukkan dalam contoh kode berikut:

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, diterjemahkan Image lebih dari 6 detik (6000 milidetik). Terjemahan menggunakan Image lima animasi, dengan await operator 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 mencampur animasi yang ditunggu dan tidak ditunggu, seperti yang ditunjukkan dalam contoh kode berikut:

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

Dalam contoh ini, 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 await operator dan segera kembali, dengan animasi pertama ScaleTo kemudian dimulai. Operator await pada panggilan metode pertama ScaleTo menunda panggilan metode kedua ScaleTo hingga panggilan metode pertama ScaleTo selesai. Pada titik RotateTo ini animasi setengah jalan selesai dan Image akan diputar 180 derajat. Selama 2 detik terakhir (2000 milidetik), animasi kedua ScaleTo dan RotateTo animasi keduanya selesai.

Menjalankan Beberapa Metode Asinkron Secara Bersamaan

Metode staticTask.WhenAny dan Task.WhenAll digunakan untuk menjalankan beberapa metode asinkron secara bersamaan, dan oleh karena itu dapat digunakan untuk membuat animasi komposit. Kedua metode mengembalikan Task objek dan menerima kumpulan metode yang masing-masing mengembalikan Task objek. 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, Task.WhenAny panggilan metode berisi dua tugas. Tugas pertama memutar gambar lebih dari 4 detik (4000 milidetik), dan tugas kedua menskalakan gambar lebih dari 2 detik (2000 milidetik). Ketika tugas kedua selesai, Task.WhenAny panggilan metode selesai. Namun, meskipun RotateTo metode masih berjalan, metode kedua ScaleTo dapat dimulai.

Metode Task.WhenAll ini 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, Task.WhenAll panggilan metode berisi tiga tugas, yang masing-masing dijalankan lebih dari 10 menit. Masing-masing Task membuat 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.

Cuplikan layar berikut menunjukkan beberapa rotasi yang sedang berlangsung di setiap platform:

Animasi Komposit

Membatalkan Animasi

Aplikasi dapat membatalkan satu atau beberapa animasi dengan panggilan ke CancelAnimations metode ekstensi, seperti yang ditunjukkan dalam contoh kode berikut:

image.CancelAnimations();

Ini akan segera membatalkan semua animasi yang saat ini berjalan pada Image instans.

Ringkasan

Artikel ini menunjukkan pembuatan dan pembatalan animasi menggunakan ViewExtensions kelas . Kelas ini menyediakan metode ekstensi yang dapat digunakan untuk membuat animasi sederhana yang memutar, menskalakan, menerjemahkan, dan memudarkan VisualElement instans.