Bagikan melalui

Ringkasan Bab 22. Animasi

  • Artikel

Catatan

Buku ini diterbitkan pada musim semi 2016, dan belum diperbarui sejak saat itu. Ada banyak dalam buku yang tetap berharga, tetapi beberapa materi sudah kedaluarsa, dan beberapa topik tidak lagi sepenuhnya benar atau lengkap.

Anda telah melihat bahwa Anda dapat membuat animasi Anda sendiri menggunakan timer Xamarin.Forms atau Task.Delay, tetapi umumnya lebih mudah menggunakan fasilitas animasi yang disediakan oleh Xamarin.Forms. Tiga kelas mengimplementasikan animasi ini:

Umumnya, animasi menargetkan properti yang didukung oleh properti yang dapat diikat. Ini bukan persyaratan tetapi ini adalah satu-satunya properti yang secara dinamis bereaksi terhadap perubahan.

Tidak ada antarmuka XAML untuk animasi ini, tetapi Anda dapat mengintegrasikan animasi ke dalam XAML menggunakan teknik yang dibahas dalam Bab 23. Pemicu dan Perilaku.

Menjelajahi animasi dasar

Fungsi animasi dasar adalah metode ekstensi yang ditemukan di ViewExtensions kelas . Metode ini berlaku untuk objek apa pun yang berasal dari VisualElement. Animasi paling sederhana menargetkan properti transformasi yang dibahas di Chapter 21. Transforms.

AnimationTryout menunjukkan bagaimana Clicked penanganan aktivitas untuk Button dapat memanggil RotateTo metode ekstensi untuk memutar tombol dalam lingkaran.

Metode ini RotateTo mengubah Rotation properti Button dari 0 menjadi 360 selama seperempat detik (secara default). Button Namun, jika diketuk lagi, itu tidak melakukan apa-apa karena Rotation properti sudah 360 derajat.

Mengatur durasi animasi

Argumen kedua ke RotateTo adalah durasi dalam milidetik. Jika diatur ke nilai besar, mengetuk Button selama animasi memulai animasi baru yang dimulai pada sudut saat ini.

Animasi relatif

Metode melakukan RelRotateTo rotasi relatif dengan menambahkan nilai tertentu ke nilai yang ada. Metode ini memungkinkan Button untuk diketuk beberapa kali, dan setiap kali meningkatkan Rotation properti sebesar 360 derajat.

Menunggu animasi

Semua metode animasi dalam ViewExtensions objek pengembalian Task<bool> . Ini berarti Anda dapat menentukan serangkaian animasi berurutan menggunakan ContinueWith atau await. Nilai bool pengembalian penyelesaian adalah false jika animasi selesai tanpa gangguan atau true jika dibatalkan oleh CancelAnimation metode , yang membatalkan semua animasi yang dimulai oleh metode lain dalam ViewExtensions yang diatur pada elemen yang sama.

Animasi komposit

Anda dapat mencampur animasi yang ditunggu dan tidak ditunggu untuk membuat animasi komposit. Ini adalah animasi dalam ViewExtensions target itu TranslationXproperti , , TranslationYdan Scale transformasi:

Perhatikan bahwa TranslateTo berpotensi mempengaruhi TranslationX properti dan TranslationY .

Task.WhenAll dan Task.WhenAny

Dimungkinkan juga untuk mengelola animasi simultan menggunakan Task.WhenAll, yang memberi sinyal ketika beberapa tugas semuanya telah disimpulkan, dan Task.WhenAny, yang memberi sinyal ketika tugas pertama dari beberapa tugas telah disimpulkan.

Rotasi dan jangkar

Saat memanggil ScaleTometode , RelScaleTo, RotateTo, dan RelRotateTo , Anda dapat mengatur AnchorX properti dan AnchorY untuk menunjukkan pusat penskalaan dan rotasi.

CircleButton menunjukkan teknik ini dengan berputar Button di sekitar pusat halaman.

Fungsi penguraian

Umumnya animasi linier dari nilai awal ke nilai akhir. Fungsi pelingan dapat menyebabkan animasi mempercepat atau memperlambat kursus mereka. Argumen opsional terakhir ke metode animasi adalah jenis Easing, kelas yang menentukan 11 bidang jenis Easingbaca-saja statis :

Akhiran In menunjukkan bahwa efeknya ada di awal animasi, Out berarti di akhir, dan InOut berarti bahwa itu ada di awal dan akhir animasi.

Sampel BounceButton menunjukkan penggunaan fungsi pelunasan.

Fungsi kemudahan Anda sendiri

Anda juga dapat menentukan anda sendiri fungsi pelingan dengan meneruskan Func<double, double> ke Easing konstruktor. Easing juga mendefinisikan konversi implisit dari Func<double, double> ke Easing. Argumen untuk fungsi pengurangan selalu dalam kisaran 0 hingga 1 saat animasi berlanjut secara linier dari awal hingga akhir. Fungsi ini biasanya mengembalikan nilai dalam rentang 0 hingga 1, tetapi bisa secara singkat negatif atau lebih besar dari 1 (seperti halnya dengan SpringIn fungsi dan SpringOut ) atau dapat melanggar aturan jika Anda tahu apa yang Anda lakukan.

Sampel UneasyScale menunjukkan fungsi pelonggaran kustom, dan CustomCubicEase menunjukkan fungsi lain.

Sampel SwingButton juga menunjukkan fungsi pelingan kustom, dan juga teknik mengubah AnchorX properti dan AnchorY dalam urutan animasi rotasi.

Pustaka Xamarin.FormsBook.Toolkit memiliki JiggleButton kelas yang menggunakan fungsi pelingan kustom untuk menggelitik tombol saat diklik. Sampel JiggleButtonDemo menunjukkannya.

Animasi masuk

Satu jenis animasi populer terjadi ketika halaman pertama kali muncul. Animasi seperti itu dapat dimulai dalam OnAppearing penimpaan halaman. Untuk animasi ini, yang terbaik adalah menyiapkan XAML untuk bagaimana Anda ingin halaman muncul setelah animasi, lalu menginisialisasi dan menganimasikan tata letak dari kode.

Sampel FadingEntrance menggunakan FadeTo metode ekstensi untuk memudar dalam konten halaman.

Sampel SlidingEntrance menggunakan metode ekstensi untuk menggeser TranslateTo konten halaman dari sisi.

Sampel SwingingEntrance menggunakan RotateYTo metode ekstensi untuk menganimasikan RotationY properti. Metode RotateXTo juga tersedia.

Animasi selamanya

Pada ekstrim lainnya, animasi "selamanya" berjalan sampai program dihentikan. Ini umumnya ditujukan untuk tujuan demonstrasi.

Sampel FadingTextAnimation menggunakan FadeTo animasi untuk memudarkan dua bagian teks masuk dan keluar.

PalindromeAnimation menampilkan palindrome, dan kemudian secara berurutan memutar huruf individu sebesar 180 derajat sehingga semuanya terbalik. Kemudian seluruh string dibalik 180 derajat untuk membaca yang sama dengan string asli.

Sampel CopterAnimation memutar helikopter sederhana BoxView sambil menyelesaikannya di sekitar tengah layar.

RotatingSpokes berputar BoxView spoke di sekitar tengah layar, lalu memutar setiap spoke itu sendiri untuk membuat pola yang menarik:

Cuplikan layar tiga kali dari Rotating Spokes

Namun, secara progresif meningkatkan Rotation properti elemen mungkin tidak berfungsi dalam jangka panjang, seperti yang ditunjukkan oleh sampel RotationBreakdown.

Sampel SpinningImage menggunakan RotateTo, , RotateXTodan RotateYTo untuk membuatnya tampak seolah-olah bitmap berputar dalam ruang 3D.

Menganimasikan properti batas

Satu-satunya metode ekstensi dalam belum ditunjukkan ViewExtensions adalah LayoutTo, yang secara efektif menganimasikan properti baca-saja Bounds dengan memanggil Layout metode . Metode ini biasanya disebut dengan Layout turunan seperti yang akan dibahas dalam Bab 26. CustomLayouts.

Metode LayoutTo harus dibatasi untuk tujuan khusus. Program BouncingBox menggunakannya untuk mengompresi dan memperluas BoxView saat memantul dari sisi halaman.

Sampel XamagonXuzzle menggunakan LayoutTo untuk memindahkan petak peta dalam implementasi teka-teki klasik 15-16 yang menampilkan gambar orak-arik daripada petak peta bernomor:

Cuplikan layar tiga Xamarin Xuzzle

Animasi Anda sendiri yang dapat ditunggu

Sampel TryAwaitableAnimation membuat animasi yang dapat ditunggu. Kelas penting yang dapat mengembalikan Task objek dari metode dan sinyal ketika animasi selesai adalah TaskCompletionSource.

Lebih dalam ke animasi

Sistem Xamarin.Forms animasi bisa sedikit membingungkan. Selain Easing kelas , sistem animasi terdiri dari ViewExtensionskelas , , Animationdan AnimationExtension .

Kelas ViewExtensions

Anda sudah melihat ViewExtensions. Ini mendefinisikan sembilan metode yang mengembalikan Task<bool> dan CancelAnimations. Tujuh dari sembilan metode menargetkan properti transformasi. Dua lainnya adalah FadeTo, yang menargetkan Opacity properti, dan LayoutTo, yang memanggil Layout metode .

Kelas animasi

Kelas Animation memiliki konstruktor dengan lima argumen untuk menentukan metode panggilan balik dan selesai, dan parameter animasi.

Animasi anak dapat ditambahkan dengan Add, , InsertWithConcurrent, dan kelebihan beban WithConcurrent.

Objek animasi kemudian dimulai dengan panggilan ke Commit metode .

Kelas AnimationExtensions

Kelas ini AnimationExtensions sebagian besar berisi metode ekstensi. Ada beberapa versi Animate metode dan metode generik Animate sangat serbaguna sehingga benar-benar satu-satunya fungsi animasi yang Anda butuhkan.

Bekerja dengan kelas Animasi

Sampel ConcurrentAnimations menunjukkan Animation kelas dengan beberapa animasi yang berbeda.

Animasi anak

Sampel ConcurrentAnimations juga menunjukkan animasi anak, yang menggunakan metode dan Insert (sangat mirip). Add

Di luar metode animasi tingkat tinggi

Sampel ConcurrentAnimations juga menunjukkan cara melakukan animasi yang melampaui properti yang ditargetkan oleh ViewExtensions metode . Dalam satu contoh, serangkaian periode menjadi lebih lama; dalam contoh lain, BackgroundColor properti dianimasikan.

Lebih banyak metode anda sendiri yang dapat ditunggu

Metode TranslateToViewExtensions tidak berfungsi dengan Easing.SpringOut fungsi . Ini berhenti ketika output yang meringankan berada di atas 1.

Pustaka Xamarin.FormsBook.Toolkit berisi MoreViewExtensions kelas dengan TranslateXTo metode ekstensi dan TranslateYTo yang tidak memiliki masalah ini, serta CancelTranslateXTo metode dan CancelTranslateYTo untuk membatalkan animasi tersebut.

SpringSlidingEntrance menunjukkan metode .TranslateXTo

Kelas ini MoreExtensions juga berisi TranslateXYTo metode ekstensi yang menggabungkan terjemahan X dan Y, dan CancelTranslateXYTo metode .

Menerapkan animasi Bezier

Dimungkinkan juga untuk mengembangkan animasi yang memindahkan elemen di sepanjang jalur spline Bezier. Pustaka Xamarin.FormsBook.Toolkit berisi BezierSpline struktur yang merangkum spline Bezier dan BezierTangent enumerasi untuk mengontrol orientasi.

Kelas MoreViewExtensions berisi BezierPathTo metode ekstensi dan CancelBezierPathTo metode .

Sampel BezierLoop menunjukkan animasi elemen di sepanjang jalur Beizer.

Bekerja dengan AnimationExtensions

Salah satu jenis animasi yang hilang dari koleksi standar adalah animasi warna. Masalahnya adalah bahwa tidak ada cara yang tepat untuk menginterpolasi antara dua Color nilai. Dimungkinkan untuk menginterpolasi nilai RGB individual, tetapi sama seperti valid adalah menginterpolasi nilai HSL.

Untuk alasan ini, MoreViewExtensions kelas di Xamarin.Formspustaka Book.Toolkit berisi dua Color metode animasi: RgbColorAnimation dan .HslColorAnimation (Ada juga dua metode pembatalan: CancelRgbColorAnimation dan CancelHslColorAnimation).

Kedua metode menggunakan ColorAnimation, yang melakukan animasi dengan memanggil metode generik Animate yang luas di AnimationExtensions.

Sampel ColorAnimations menunjukkan penggunaan dua jenis animasi warna ini.

Menyusun animasi Anda

Terkadang berguna untuk mengekspresikan animasi di XAML dan menggunakannya bersama dengan MVVM. Ini tercakup dalam bab berikutnya, Bab 23. Pemicu dan Perilaku.