Cara Menggunakan Imej untuk Membuat Animasi Gelung Lancar dalam iOS

Cara Membuat Awan Bergerak Selamanya: Animasi Gelung Mudah dalam iOS

Dalam pembangunan iOS, animasi benar-benar boleh menghidupkan aplikasi, menambahkan elemen dinamik dan menarik yang disukai pengguna. 🌥️ Satu animasi biasa yang mungkin anda ingin buat ialah kesan gelung yang lancar, seperti menggerakkan awan merentasi skrin. Animasi yang ringkas tetapi menarik secara visual ini sering digunakan dalam permainan, aplikasi cuaca dan juga dalam projek peribadi untuk mencipta suasana yang menenangkan. Jika anda baru mengenali animasi dalam iOS, anda mungkin tertanya-tanya bagaimana untuk menjadikannya lancar dan mengelakkan gangguan.

Bayangkan membuka aplikasi dan serta-merta melihat awan hanyut perlahan-lahan merentasi skrin, mencipta latar belakang tenang yang sempurna. Kesan jenis ini boleh dicapai menggunakan animasi `UIImageView` dan `UIView` dalam Swift. Idea asas adalah untuk menghidupkan imej yang sama (awan dalam kes ini) beberapa kali supaya ia kelihatan bergerak secara berterusan. Walau bagaimanapun, ia tidak selalunya semudah yang disangka. Terdapat beberapa perangkap yang sering dihadapi oleh pembangun apabila cuba membuat animasi lancar, terutamanya apabila berurusan dengan imej berulang.

Jika anda telah mencuba menyediakan kesan ini dan menghadapi masalah seperti awan bergerak ke arah yang salah atau hilang, anda tidak bersendirian. Ini adalah masalah biasa yang berpunca daripada pengendalian bingkai atau konfigurasi animasi yang salah. Tetapi jangan risau—panduan ini akan membimbing anda melalui langkah-langkah untuk menyelesaikan isu ini, memastikan animasi anda berfungsi dengan lancar. Sama seperti percubaan pertama saya untuk menghidupkan awan, anda mungkin perlu melaraskan beberapa perkara sebelum anda mendapat hasil yang sempurna. 😅

Sekarang, mari kita menyelami penyelesaian untuk membuat awan tersebut bergerak dalam gelung yang sempurna. Dengan menggunakan dua paparan imej dan sedikit keajaiban animasi, anda akan mencipta gerakan cecair yang tidak berkesudahan yang akan memastikan apl anda kelihatan lancar dan digilap. Bersedia untuk membetulkan animasi dan membuat awan itu hanyut dengan betul? Jom pergi!

Cara Skrip Animasi Awan Berfungsi dalam iOS

Dalam contoh skrip yang disediakan di atas, matlamatnya ialah untuk mencipta animasi awan yang lancar dan berterusan yang bergelung tanpa had dalam apl iOS. Idea utama adalah untuk menghidupkan dua UIImageView kejadian dengan imej awan yang sama, menggerakkannya secara mendatar merentasi skrin. Ini dilakukan dengan melaraskan kedudukan mereka menggunakan bingkai asal.x harta dan menggunakan animasi pada kedudukan ini. Kedua-dua paparan imej digunakan supaya apabila satu bergerak keluar dari skrin, yang lain bersedia untuk mengambil tempatnya, mewujudkan kesan gelung yang lancar. Dengan menghidupkan pergerakan paparan imej, anda boleh memberikan ilusi bahawa awan sentiasa hanyut merentasi langit. 🚀

Mari pecahkan komponen utama kod. Langkah pertama ialah mencipta dua paparan imej, masing-masing memegang imej awan yang sama. Paparan imej ini diletakkan sebelah menyebelah pada skrin, dengan paparan imej kedua bermula di mana yang pertama berakhir, mewujudkan ufuk berterusan. Persediaan ini penting untuk memastikan bahawa apabila paparan imej pertama mencapai tepi skrin, paparan imej kedua sedia untuk mengambil alih. Kedudukan paparan imej dikawal menggunakan bingkai harta, yang mentakrifkan kedua-dua saiz dan kedudukan pandangan dalam pandangan induk. Setiap paparan imej bermula dari kedudukan x yang berbeza: satu bermula pada 0, dan satu lagi bermula pada lebar skrin.

Setelah paparan imej disediakan, langkah seterusnya ialah menghidupkannya. Ini dilakukan dengan UIView.animate fungsi, yang bertanggungjawab untuk menghidupkan pandangan dari semasa ke semasa. The UIView.animate fungsi mengambil beberapa parameter: tempoh animasi, sebarang kelewatan sebelum animasi bermula, pilihan animasi (seperti mengulang animasi) dan blok animasi yang akan digunakan. Dalam kes ini, tempoh animasi ditetapkan kepada 20 saat, dan animasi ditetapkan untuk berulang selama-lamanya menggunakan .ulang pilihan. The .curviLinear pilihan memastikan bahawa animasi berjalan pada kelajuan tetap, mewujudkan pergerakan yang licin dan linear. Imej digerakkan secara mendatar dengan mengimbangi imejnya asal.x mengikut lebar skrin.

Walau bagaimanapun, kod tersebut boleh menghasilkan hasil yang tidak diingini, seperti imej hilang atau bergerak ke arah yang salah. Ini kerana bingkai harta sedang diubah suai secara langsung tanpa menetapkan semula imej apabila ia bergerak di luar skrin. Penyelesaiannya adalah dengan menggunakan kaedah seperti recycleClouds, yang menetapkan semula kedudukan paparan imej apabila ia bergerak melepasi sempadan skrin. Ini memastikan bahawa imej lancar gelung, tanpa hilang. Kaedah ini menyemak kedudukan x bagi paparan imej, dan apabila seseorang bergerak dari skrin, ia ditetapkan semula ke sisi lain, membenarkan gelung diteruskan. Selain itu, menggunakan diri yang lemah di dalam blok penyiapan memastikan tiada kebocoran memori disebabkan kitaran rujukan yang kukuh, meningkatkan prestasi apl.

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        UIView.animate(withDuration: 20.0, delay: 0.0, options: [.repeat, .curveLinear], animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }, completion: nil)
    }
}

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        let totalDuration = 20.0
        let animationOptions: UIView.AnimationOptions = [.repeat, .curveLinear]
        UIView.animate(withDuration: totalDuration, delay: 0.0, options: animationOptions, animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }) { [weak self] _ in
            self?.recycleClouds()
        }
    }
    func recycleClouds() {
        if cloudsImageView1.frame.origin.x <= -screenSize {
            cloudsImageView1.frame.origin.x = screenSize
        }
        if cloudsImageView2.frame.origin.x <= -screenSize {
            cloudsImageView2.frame.origin.x = screenSize
        }
    }
}

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    var totalDuration = 20.0
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        UIView.animate(withDuration: totalDuration, delay: 0.0, options: [.repeat, .curveLinear], animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }, completion: { [weak self] _ in
            self?.optimizeMemory()
        })
    }
    func optimizeMemory() {
        if cloudsImageView1.frame.origin.x <= -screenSize {
            cloudsImageView1.frame.origin.x = screenSize
        }
        if cloudsImageView2.frame.origin.x <= -screenSize {
            cloudsImageView2.frame.origin.x = screenSize
        }
    }
}

Mencipta Animasi Awan Lancar dalam iOS

Menganimasikan imej gelung, seperti hanyut awan dalam apl iOS, memerlukan pertimbangan yang teliti terhadap kedua-dua kesan visual dan prestasi. Apabila anda cuba mencapai gelung awan bergerak yang tidak berkesudahan merentasi skrin, terdapat beberapa elemen utama untuk ditangani: masa, arah dan cara paparan diurus. Salah satu faktor terpenting dalam menjadikan animasi anda lancar ialah mengendalikan paparan imej dengan cekap supaya ia tidak hilang begitu sahaja atau tersekat. Menggunakan dua UIImageView contoh untuk animasi membantu memastikan awan kelihatan sentiasa bergerak, walaupun apabila satu imej bergerak di luar skrin dan imej lain mengambil tempatnya. Adalah penting untuk memastikan imej ditetapkan semula sebaik sahaja ia bergerak melepasi tepi skrin. Tanpa tetapan semula ini, animasi boleh pecah, menyebabkan awan hilang atau meninggalkan jurang dalam gelung.

Satu lagi aspek kritikal animasi melibatkan bingkai.asal.x hartanah, yang digunakan untuk mengawal kedudukan imej awan. Dengan menetapkan kedudukan mendatar imej pada titik permulaan yang berbeza, anda boleh mencipta ilusi pergerakan tak terhingga. Walau bagaimanapun, isu biasa timbul apabila satu imej bergerak dari skrin dan tidak ditetapkan semula ke kedudukan yang betul. Pendekatan yang betul adalah untuk mengesan apabila imej telah bergerak melepasi tepi skrin, kemudian letakkan semula untuk bermula semula di sisi lain. Menggunakan blok animasi, anda boleh menentukan animasi berulang dan berterusan yang memastikan aliran berterusan. Untuk memastikan pergerakan lancar, gunakan UIView.animate kaedah dengan pilihan seperti .ulang untuk gelung dan .curviLinear untuk kelajuan yang sekata.

Akhir sekali, mengoptimumkan kod anda untuk prestasi dan kelancaran adalah sama pentingnya dengan mencapai kesan visual. Anda harus meminimumkan penggunaan memori dan mengelakkan pengiraan yang tidak perlu semasa animasi. menggunakan weak self rujukan dalam animasi berasaskan penutupan membantu mencegah kebocoran memori dengan mengelakkan kitaran pengekalan. Selain itu, jika animasi itu rumit atau jika anda memerlukan teknik yang lebih maju, pertimbangkan untuk menggunakannya CADisplayLink untuk kemas kini bingkai masa nyata, yang menawarkan kawalan yang lebih besar ke atas masa dan kelancaran animasi. Menguji animasi pada saiz dan orientasi skrin yang berbeza juga penting, kerana ia membantu memastikan animasi berfungsi seperti yang diharapkan merentas semua peranti. 📱