Bagaimana CAAnimation Membantu Saya Mengalahkan Ketakutan Saya Membuat Animasi

Artikel ini memfokuskan pada penggunaan CA Animations di iOS untuk membuat animasi yang lancar.

Semasa hari-hari awal saya bekerja dengan iOS, saya akan berasa sangat gugup setiap kali seorang pereka menghampiri saya dan meminta beberapa animasi dalam aplikasi yang mereka kerjakan.

Dulu saya rasa senang membuat reka bentuk animasi - tetapi sebaliknya, melaksanakannya adalah tugas yang sangat sukar.

Saya akan mendapatkan bantuan daripada Google, StackOverflow, dan rakan sejawat saya untuk pelaksanaannya.

Semasa proses itu saya mengembangkan fobia animasi dan selalu berusaha menghindarinya. Tetapi itu semua berubah satu hari.

Mencari CAAnimation

Suatu ketika, saya harus menghidupkan urutan gambar dalam pandangan. Jadi apa langkah pertama saya? Jelas, StackOverflow!

Pautan pertama mendapat kod.

let image_1 = UIImage(named: "image-1")! let image_2 = UIImage(named: "image-2")! let image_3 = UIImage(named: "image-3")! let images = [image_1, image_2, image_3] let animatedImage = UIImage.animatedImage(with: images, duration: 2.0) imageView.image = animatedImage

Nampaknya cukup mudah bukan? Sekiranya semudah itu saya tidak akan menulis artikel ini.

Inilah animasi yang diperlukan:

Dan seperti yang telah menjadi jelas, saya tidak berada dekat dengannya. Saya tersekat. Bagaimana saya seharusnya melakukan begitu banyak penyesuaian dalam animasi itu dan menyegerakkan semuanya?

Kemudian rakan sekerja saya memberitahu saya untuk mencuba CAAnimation. Saya membacanya dan mencubanya pada projek sampel. Yang mengejutkan saya, ia sangat hebat dan mudah digunakan.

Apa itu Animasi Teras?

Core Animation membantu anda melaksanakan pelbagai animasi dengan penggunaan CPU hampir sifar.

Ini memberi anda kadar bingkai tinggi dan banyak penyesuaian yang dapat anda gunakan dengan kod yang sangat sedikit.

Anda boleh mendapatkan maklumat lebih lanjut dalam dokumen di sini: //developer.apple.com/documentation/quartzcore

Saya dapat melakukan pelaksanaan asas dalam beberapa jam:

func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) { let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition) firstImageView.layer.add(basicAnimation1, forKey: "position") let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition) secondImageView.layer.add(basicAnimation2, forKey: "position") self.addNextImage(forImageView: firstImageView) } func getBasicAnimation(withInitialPostion initialPos: CGPoint, finalPos: CGPoint) -> CABasicAnimation { let basicAnimation = CABasicAnimation(keyPath: "position") basicAnimation.fromValue = NSValue(cgPoint: initialPos) basicAnimation.toValue = NSValue(cgPoint: finalPos) basicAnimation.duration = 1 basicAnimation.isRemovedOnCompletion = false basicAnimation.fillMode = CAMediaTimingFillMode.forwards basicAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut) return basicAnimation }

Untuk pelaksanaan ini, saya menggunakan CABasicAnimation .

The CABasicAnimation kelas membantu anda bernyawa yang terletak di lapisan (yang boleh menjadi warna latar belakang, kelegapan, kedudukan, skala) antara dua nilai. Anda hanya perlu memberikan nilai awal dan akhir, dan selebihnya akan dijaga. Animasi dimulakan dengan segera di gelung larian seterusnya seperti yang dijelaskan lebih lengkap di sini.

Sekarang, kembali kepada masalah kita.

Untuk melaksanakannya, saya mengambil dua paparan gambar dan menambahkan dua gambar berasingan kepada mereka. Kemudian saya terus menganimasikannya satu demi satu menggunakan CAAnimation.

Anda boleh mendapatkan kod sumber di sini.

Sekiranya anda memeriksa gif terakhir, anda akan melihat bahawa ada sesuatu yang tidak berfungsi. Sebelum gambar pertama kotak hadiah tidak kelihatan, fon kepala berkelip sebentar dan kemudian gambar bergerak ke atas.

Kenapa ini terjadi?

Ini kerana sebaik sahaja kita menambahkan animasi ke paparan gambar, kita akan menambahkan gambar seterusnya ke paparan itu (baris nombor 5 dan 6):

private func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) { let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition) firstImageView.layer.add(basicAnimation1, forKey: "position") let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition) secondImageView.layer.add(basicAnimation2, forKey: "position") self.addNextImage(forImageView: firstImageView) }

Di sini kita sedang menghadapi masalah bagaimana menyegerakkan kedua-dua gambar dalam animasi. Tetapi selalu ada penyelesaian dengan CAAnimation.

Transaksi CA

Transaksi CA membantu kami menyegerakkan pelbagai animasi bersama. Ini memastikan bahawa semua animasi yang telah kita gabungkan bersama-sama bermula pada masa yang sama.

Anda juga boleh memberikan blok penyelesaian untuk animasi anda, yang akan dilaksanakan ketika semua animasi anda dalam satu bundel selesai.

Anda boleh membaca lebih lanjut mengenainya di sini.

private func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) { CATransaction.begin() CATransaction.setCompletionBlock { self.addNextImage(forImageView: firstImageView) } let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition) firstImageView.layer.add(basicAnimation1, forKey: "position") CATransaction.commit() let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition) secondImageView.layer.add(basicAnimation2, forKey: "position") }

Anda mulakan dengan menulis CATransaction.begin(). Kemudian, tulis semua animasi anda yang anda mahu lakukan segerak. Akhirnya, panggil CATransaction.commit()yang akan memulakan animasi di blok.

Mari lihat bagaimana animasi kita sekarang:

Satu perkara terakhir yang perlu saya lakukan ialah menambahkan kesan Spring pada animasi. Syukurlah, CAAnimation ada penyelesaian untuk ini

CA Spring Animasi

CA Spring Animation, ketika ditambahkan ke lapisan, memberikan efek seperti mata air, sehingga tampak ditarik ke arah sasaran dengan mata air.

Semakin jauh lapisan dari sasaran, semakin besar pecutan ke arahnya.

Ia membolehkan kawalan terhadap atribut berdasarkan fizikal seperti redaman dan kekakuan musim bunga. - Dokumen

Anda boleh membaca lebih lanjut mengenainya dari dokumentasi Apple: //developer.apple.com/documentation/quartzcore/caspringanimation

Mari kita laksanakan ke kod yang ada:

private func getSpringAnimation(withInitialPostion initialPos: CGPoint, finalPos: CGPoint) -> CASpringAnimation { let basicAnimation = CASpringAnimation(keyPath: "position") basicAnimation.fromValue = NSValue(cgPoint: initialPos) basicAnimation.toValue = NSValue(cgPoint: finalPos) basicAnimation.duration = basicAnimation.settlingDuration basicAnimation.damping = 14 basicAnimation.initialVelocity = 5 basicAnimation.isRemovedOnCompletion = false basicAnimation.fillMode = CAMediaTimingFillMode.forwards return basicAnimation }

Kerja saya selesai di sini.

Ringkasnya, berikut adalah beberapa kelebihan menggunakan CA Animations:

  • Mereka mudah digunakan dan dilaksanakan
  • Terdapat banyak penyesuaian yang ada
  • Ada kemungkinan untuk menyegerakkan pelbagai animasi
  • Almost zero CPU usage

These the just a few of the advantages. The possibilities are endless.

Now, whenever requirements come for animation, I feel confident designing and implementing them. And I hope you also feel the same way after reading this.

Feel free to leave any suggestions or feedback.