Kako koristiti slike za izradu glatke petlje animacije u iOS-u

Kako natjerati oblake da se kreću zauvijek: Jednostavna animacija u petlji u iOS-u

U iOS razvoju, animacije mogu doista oživjeti aplikaciju, dodajući dinamičan i privlačan element koji korisnici vole. 🌥️ Jedna uobičajena animacija koju biste možda željeli izraditi je efekt glatke petlje, poput pomicanja oblaka preko zaslona. Ova jednostavna, ali vizualno privlačna animacija često se koristi u igrama, vremenskim aplikacijama, pa čak iu osobnim projektima za stvaranje umirujuće atmosfere. Ako ste novi u animaciji u iOS-u, možda se pitate kako je učiniti besprijekornom i izbjeći greške.

Zamislite da otvorite aplikaciju i odmah ugledate oblake koji nježno lebde preko zaslona, ​​stvarajući savršenu mirnu pozadinu. Ovakav učinak moguće je postići korištenjem `UIImageView` i `UIView` animacija u Swiftu. Osnovna ideja je animirati istu sliku (u ovom slučaju oblak) više puta tako da izgleda kao da se neprestano kreće. Međutim, nije uvijek tako lako kao što se čini. Postoji nekoliko zamki s kojima se programeri često susreću kada pokušavaju učiniti animaciju glatkom, posebno kada se bave ponovljenim slikama.

Ako ste pokušali postaviti ovaj efekt i naišli ste na probleme kao što su oblaci koji se kreću u krivom smjeru ili nestaju, niste jedini. Ovo su uobičajeni problemi koji proizlaze iz netočnog rukovanja okvirom ili konfiguracije animacije. Ali ne brinite - ovaj će vas vodič provesti kroz korake za rješavanje ovih problema, osiguravajući da vaša animacija radi besprijekorno. Kao i kod mog prvog pokušaja animiranja oblaka, možda ćete morati prilagoditi nekoliko stvari prije nego što dobijete savršen rezultat. 😅

Uronimo sada u rješenje kako bi se ti oblaci kretali u savršenoj petlji. Upotrebom dva prikaza slike i malo magije animacije, stvorit ćete beskrajno, fluidno kretanje koje će vašu aplikaciju učiniti glatkim i uglađenim. Jeste li spremni popraviti animaciju i natjerati te oblake da lebde kako treba? Idemo!

Kako Cloud Animation Script radi u iOS-u

U gore navedenom primjeru skripte, cilj je stvoriti glatku, kontinuiranu animaciju u oblaku koja se beskonačno ponavlja u iOS aplikaciji. Glavna ideja je animirati dvoje UIImageView instance s istom slikom oblaka, pomičući ih vodoravno preko zaslona. To se postiže podešavanjem njihovih položaja pomoću okvira porijeklo.x svojstva i primjenom animacije na te položaje. Dva prikaza slike koriste se tako da kada se jedan pomakne izvan zaslona, ​​drugi je spreman zauzeti njegovo mjesto, stvarajući učinak bešavne petlje. Animiranjem kretanja prikaza slike možete stvoriti iluziju da oblaci neprestano plutaju nebom. 🚀

Razdvojimo glavne komponente koda. Prvi korak je stvaranje dva prikaza slike, od kojih svaki sadrži istu sliku oblaka. Ovi prikazi slike postavljeni su jedan pored drugog na zaslonu, pri čemu drugi prikaz slike počinje tamo gdje prvi završava, stvarajući kontinuirani horizont. Ova postavka je ključna kako bi se osiguralo da kada prvi prikaz slike dosegne rub zaslona, ​​drugi prikaz slike bude spreman preuzeti. Položaji prikaza slike kontroliraju se pomoću okvir svojstvo, koje definira i veličinu i položaj pogleda unutar nadređenog pogleda. Svaki prikaz slike počinje od različitog x-položaja: jedan počinje od 0, a drugi od širine zaslona.

Nakon što su postavljeni prikazi slika, sljedeći korak je njihovo animiranje. To se radi s UIView.animate funkcija koja je odgovorna za animiranje pogleda tijekom vremena. The UIView.animate funkcija uzima nekoliko parametara: trajanje animacije, svako kašnjenje prije početka animacije, opcije animacije (kao što je ponavljanje animacije) i blok animacija koje treba primijeniti. U ovom slučaju, trajanje animacije je postavljeno na 20 sekundi, a animacija je postavljena da se stalno ponavlja pomoću .ponoviti opcija. The .curveLinear opcija osigurava da se animacija izvodi konstantnom brzinom, stvarajući glatko, linearno kretanje. Slike se pomiču vodoravno njihovim pomakom porijeklo.x po širini ekrana.

Međutim, kod može proizvesti neželjene rezultate, poput nestajanja slika ili pomicanja u krivom smjeru. To je zato što okvir svojstvo se izravno mijenja bez ponovnog postavljanja slika kada se pomaknu izvan zaslona. Rješenje je korištenje metode poput recycleClouds, koji poništava položaj prikaza slike kada se pomakne izvan granica zaslona. Ovo osigurava da se slike besprijekorno vrte bez nestanka. Ova metoda provjerava x-položaj prikaza slike, a kada se jedan pomakne izvan zaslona, ​​vraća se na drugu stranu, dopuštajući nastavak petlje. Dodatno, koristeći slabo ja unutar bloka završetka osigurava da nema curenja memorije zbog jakih referentnih ciklusa, poboljšavajući izvedbu aplikacije.

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
        }
    }
}

Stvaranje besprijekorne animacije u oblaku u iOS-u

Animiranje slike u petlji, poput oblaka u aplikaciji za iOS, zahtijeva pažljivo razmatranje i vizualnih efekata i izvedbe. Kada pokušavate postići beskrajnu petlju oblaka koji se kreću preko zaslona, ​​postoji nekoliko ključnih elemenata kojima se treba pozabaviti: vrijeme, smjer i način na koji se upravlja prikazima. Jedan od najvažnijih čimbenika kako bi vaša animacija bila glatka jest učinkovito rukovanje prikazima slika kako ne bi jednostavno nestale ili se zaglavile. Korištenje dva UIImageView instance za animaciju pomaže osigurati da se oblaci stalno kreću, čak i kada se jedna slika pomakne izvan zaslona, ​​a druga zauzme njezino mjesto. Bitno je osigurati da se slike ponište nakon što prijeđu rub zaslona. Bez ovog resetiranja, animacija može prekinuti, uzrokujući nestanak oblaka ili ostavljajući praznine u petlji.

Drugi kritični aspekt animacije uključuje okvir.podrijetlo.x svojstvo, koje se koristi za kontrolu položaja slika oblaka. Postavljanjem vodoravnog položaja slika na različite početne točke, možete stvoriti iluziju beskonačnog kretanja. Međutim, čest problem nastaje kada se jedna slika pomakne izvan zaslona i ne vrati se na ispravan položaj. Ispravan pristup je otkriti kada se slika pomakne preko ruba zaslona, ​​zatim je premjestiti tako da počne ponovno s druge strane. Pomoću bloka animacije možete definirati ponavljajuću i kontinuiranu animaciju koja osigurava stalan tijek. Kako biste bili sigurni da je kretanje glatko, upotrijebite UIView.animate metoda s opcijama poput .ponoviti za petlje i .curveLinear za ravnomjernu brzinu.

Konačno, optimiziranje vašeg koda za performanse i glatkoću jednako je važno kao i postizanje vizualnog efekta. Trebali biste smanjiti upotrebu memorije i izbjegavati nepotrebne izračune tijekom animacije. Korištenje weak self reference u animacijama koje se temelje na zatvaranju pomažu spriječiti curenje memorije izbjegavanjem ciklusa zadržavanja. Osim toga, ako je animacija složena ili su vam potrebne naprednije tehnike, razmislite o upotrebi CADisplayLink za ažuriranje okvira u stvarnom vremenu, što nudi veću kontrolu nad vremenom i glatkoćom animacije. Testiranje animacije na različitim veličinama zaslona i orijentacijama također je ključno jer pomaže osigurati da animacija radi kako se očekuje na svim uređajima. 📱