Kako uporabiti slike za ustvarjanje gladke zanke v sistemu iOS

Kako narediti, da se oblaki večno premikajo: preprosta zankasta animacija v sistemu iOS

Pri razvoju iOS-a lahko animacije resnično oživijo aplikacijo ter dodajo dinamičen in privlačen element, ki je uporabnikom všeč. 🌥️ Ena pogosta animacija, ki bi jo morda želeli ustvariti, je gladek učinek zanke, kot so premikajoči se oblaki po zaslonu. Ta preprosta, a vizualno privlačna animacija se pogosto uporablja v igrah, vremenskih aplikacijah in celo v osebnih projektih za ustvarjanje pomirjujočega vzdušja. Če še niste spoznali animacije v sistemu iOS, se morda sprašujete, kako jo narediti brezhibno in se izogniti napakam.

Predstavljajte si, da odprete aplikacijo in takoj vidite oblake, ki se nežno premikajo po zaslonu in ustvarjajo popolno spokojno ozadje. Tovrsten učinek je mogoče doseči z uporabo animacij `UIImageView` in `UIView` v Swiftu. Osnovna ideja je večkrat animirati isto sliko (v tem primeru oblak), tako da je videti, kot da se neprekinjeno premika. Vendar ni vedno tako enostavno, kot se zdi. Obstaja nekaj pasti, s katerimi se razvijalci pogosto srečujejo, ko poskušajo narediti animacijo gladko, zlasti ko imajo opravka s ponavljajočimi se slikami.

Če ste poskusili nastaviti ta učinek in ste naleteli na težave, kot je premikanje oblakov v napačno smer ali izginjanje, niste sami. To so pogoste težave, ki izhajajo iz nepravilnega ravnanja z okvirjem ali konfiguracije animacije. Vendar ne skrbite – ta vodnik vas bo vodil skozi korake za odpravo teh težav in zagotovil, da vaša animacija deluje brezhibno. Tako kot pri mojem prvem poskusu animiranja oblakov boste morda morali prilagoditi nekaj stvari, preden boste dobili popoln rezultat. 😅

Zdaj pa se poglobimo v rešitev, da se ti oblaki premikajo v popolni zanki. Z uporabo dveh pogledov slike in malo čarovnije animacije boste ustvarili neskončno, tekoče gibanje, zaradi katerega bo vaša aplikacija videti gladka in uglajena. Ali ste pripravljeni popraviti animacijo in spraviti te oblake v pravo smer? Gremo!

Kako deluje skript za animacijo v oblaku v sistemu iOS

V zgornjem primeru skripta je cilj ustvariti gladko, neprekinjeno animacijo v oblaku, ki se neskončno ponavlja v aplikaciji za iOS. Glavna ideja je animirati dva UIImageView primerke z isto sliko v oblaku in jih premikate vodoravno po zaslonu. To naredite tako, da prilagodite njihove položaje z uporabo okvirja poreklo.x lastnosti in uporabo animacije na teh položajih. Dva pogleda slike se uporabljata tako, da ko se eden premakne izven zaslona, ​​je drugi pripravljen prevzeti njegovo mesto, kar ustvari učinek brezhibne zanke. Z animiranjem gibanja pogledov slike lahko ustvarite iluzijo, da se oblaki nenehno premikajo po nebu. 🚀

Razčlenimo glavne komponente kode. Prvi korak je ustvariti dva pogleda slike, od katerih ima vsak enako sliko oblakov. Ti pogledi slike so postavljeni drug ob drugem na zaslonu, pri čemer se drugi pogled slike začne tam, kjer se prvi konča, kar ustvarja neprekinjen horizont. Ta nastavitev je ključnega pomena za zagotovitev, da ko prvi pogled slike doseže rob zaslona, ​​je drugi pogled pripravljen za prevzem. Položaji pogledov slik se nadzorujejo z uporabo okvir lastnost, ki določa tako velikost kot položaj pogledov znotraj nadrejenega pogleda. Vsak pogled slike se začne z drugačnega položaja x: eden se začne pri 0, drugi pa pri širini zaslona.

Ko so pogledi slik nastavljeni, je naslednji korak njihova animacija. To se naredi z UIView.animate funkcijo, ki je odgovorna za animiranje pogledov skozi čas. The UIView.animate ima več parametrov: trajanje animacije, kakršen koli zamik pred začetkom animacije, možnosti animacije (kot je ponavljanje animacije) in blok animacij, ki jih je treba uporabiti. V tem primeru je trajanje animacije nastavljeno na 20 sekund, animacija pa je nastavljena na večno ponavljanje z uporabo .ponovi možnost. The .curveLinear možnost zagotavlja, da animacija teče s konstantno hitrostjo in ustvarja gladko, linearno gibanje. Slike se premaknejo vodoravno z zamikom poreklo.x po širini zaslona.

Vendar lahko koda povzroči neželene rezultate, kot so slike, ki izginejo ali se premikajo v napačno smer. To je zato, ker okvir lastnost se neposredno spreminja brez ponastavitve slik, ko se premaknejo z zaslona. Rešitev je uporaba metode, kot je recycleClouds, ki ponastavi položaj pogledov slike, ko se premaknejo izven meja zaslona. To zagotavlja, da se slike neopazno vrtijo, ne da bi izginile. Ta metoda preveri x-položaj pogledov slike in ko se eden premakne izven zaslona, ​​se ponastavi na drugo stran, kar omogoča nadaljevanje zanke. Poleg tega z uporabo šibek jaz znotraj zaključnega bloka zagotavlja, da zaradi močnih referenčnih ciklov ni uhajanja pomnilnika, kar izboljšuje delovanje 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
        }
    }
}

Ustvarjanje brezšivne animacije v oblaku v sistemu iOS

Animiranje slike v obliki zanke, kot je odnašanje oblaka v aplikaciji za iOS, zahteva skrbno upoštevanje vizualnih učinkov in zmogljivosti. Ko poskušate doseči neskončno zanko premikajočih se oblakov po zaslonu, morate obravnavati nekaj ključnih elementov: čas, smer in način upravljanja pogledov. Eden najpomembnejših dejavnikov pri zagotavljanju gladke animacije je učinkovito ravnanje s pogledi slik, da ne izginejo ali se zataknejo. Uporaba dveh UIImageView primerki za animacijo pomagajo zagotoviti, da se zdi, da se oblaki nenehno premikajo, tudi ko se ena slika premakne izven zaslona in druga prevzame njeno mesto. Bistveno je zagotoviti, da se slike ponastavijo, ko se premaknejo čez rob zaslona. Brez te ponastavitve se lahko animacija prekine, kar povzroči, da oblaki izginejo ali pustijo vrzeli v zanki.

Drugi kritični vidik animacije vključuje frame.origin.x lastnost, ki se uporablja za nadzor položaja slik v oblaku. Z nastavitvijo vodoravnega položaja slik na različnih začetnih točkah lahko ustvarite iluzijo neskončnega gibanja. Vendar se pogosta težava pojavi, ko se ena slika premakne izven zaslona in ni ponastavljena na pravilen položaj. Pravilen pristop je zaznati, kdaj se je slika premaknila čez rob zaslona, ​​nato pa jo prestaviti, da se začne znova na drugi strani. Z animacijskim blokom lahko določite ponavljajočo se in neprekinjeno animacijo, ki zagotavlja stalen tok. Če želite zagotoviti gladko gibanje, uporabite UIView.animate metoda z možnostmi, kot je .ponovi za zanke in .curveLinear za enakomerno hitrost.

Končno je optimizacija vaše kode za zmogljivost in gladkost prav tako pomembna kot doseganje vizualnega učinka. Zmanjšajte porabo pomnilnika in se izogibajte nepotrebnim izračunom med animacijo. Uporaba weak self reference v animacijah, ki temeljijo na zapiranju, pomagajo preprečiti uhajanje pomnilnika z izogibanjem ciklom ohranjanja. Poleg tega razmislite o uporabi, če je animacija zapletena ali če potrebujete naprednejše tehnike CADisplayLink za posodobitve okvirjev v realnem času, ki ponuja večji nadzor nad časom in gladkostjo animacije. Preizkušanje animacije na različnih velikostih in orientacijah zaslona je prav tako ključnega pomena, saj pomaga zagotoviti, da animacija deluje po pričakovanjih v vseh napravah. 📱