Com utilitzar imatges per fer una animació en bucle suau a iOS

Com fer que els núvols es moguin per sempre: una animació en bucle senzilla a iOS

En el desenvolupament d'iOS, les animacions realment poden donar vida a una aplicació, afegint un element dinàmic i atractiu que els usuaris estimen. 🌥️ Una animació habitual que potser voldreu crear és un efecte de bucle suau, com moure núvols per la pantalla. Aquesta animació senzilla però visualment atractiva s'utilitza sovint en jocs, aplicacions meteorològiques i fins i tot en projectes personals per crear un ambient tranquil. Si sou nou a l'animació a iOS, potser us preguntareu com fer-ho sense problemes i evitar problemes.

Imagineu-vos obrir una aplicació i veure immediatament núvols que passen suaument per la pantalla, creant el fons serè perfecte. Aquest tipus d'efecte es pot aconseguir mitjançant animacions `UIImageView' i `UIView' a Swift. La idea bàsica és animar la mateixa imatge (en aquest cas el núvol) diverses vegades perquè sembli que es mou contínuament. Tanmateix, no sempre és tan fàcil com sembla. Hi ha alguns inconvenients que sovint es troben els desenvolupadors quan intenten que l'animació sigui fluida, especialment quan tracten imatges repetides.

Si heu provat de configurar aquest efecte i heu trobat problemes com els núvols que es mouen en la direcció equivocada o desapareixen, no esteu sols. Aquests són problemes habituals que es deriven d'una manipulació incorrecta de fotogrames o d'una configuració d'animació. Però no us preocupeu: aquesta guia us guiarà a través dels passos per solucionar aquests problemes, assegurant-vos que la vostra animació funcioni perfectament. Igual que el meu primer intent d'animar núvols, potser haureu d'ajustar algunes coses abans d'obtenir el resultat perfecte. 😅

Ara, aprofundim en la solució per aconseguir que aquests núvols es moguin en un bucle perfecte. Si utilitzeu dues vistes d'imatge i una mica de màgia d'animació, creareu un moviment fluid i sense fi que mantindrà la vostra aplicació amb un aspecte suau i polit. Preparat per arreglar l'animació i fer que aquests núvols surtin bé? anem!

Com funciona l'script d'animació al núvol a iOS

A l'exemple de script proporcionat anteriorment, l'objectiu és crear una animació de núvol suau i contínua que s'executi infinitament en una aplicació iOS. La idea principal és animar-ne dos UIImageView instàncies amb la mateixa imatge del núvol, movent-les horitzontalment per la pantalla. Això es fa ajustant les seves posicions mitjançant el marc origen.x propietat i aplicant l'animació a aquestes posicions. Les dues vistes d'imatge s'utilitzen perquè, quan una surti de la pantalla, l'altra estigui a punt per ocupar el seu lloc, creant l'efecte d'un bucle continu. En animar el moviment de les vistes de la imatge, podeu donar la il·lusió que els núvols es desplacen constantment pel cel. 🚀

Desglossem els components principals del codi. El primer pas és crear les dues vistes d'imatge, cadascuna amb la mateixa imatge de núvols. Aquestes vistes d'imatge es col·loquen una al costat de l'altra a la pantalla, amb la segona vista d'imatge començant on acaba la primera, creant un horitzó continu. Aquesta configuració és crucial per garantir que quan la primera visualització d'imatge arribi a la vora de la pantalla, la segona vista d'imatge estigui a punt per ocupar-se. Les posicions de les vistes d'imatge es controlen mitjançant el marc propietat, que defineix tant la mida com la posició de les vistes dins de la vista pare. Cada vista d'imatge comença des d'una posició X diferent: una comença a 0 i l'altra comença a l'amplada de la pantalla.

Un cop configurades les vistes de la imatge, el següent pas és animar-les. Això es fa amb el UIView.animate funció, que s'encarrega d'animar les vistes al llarg del temps. El UIView.animate La funció pren diversos paràmetres: la durada de l'animació, qualsevol retard abans que comenci l'animació, les opcions d'animació (com ara repetir l'animació) i el bloc d'animacions que cal aplicar. En aquest cas, la durada de l'animació s'estableix en 20 segons i l'animació es repeteix per sempre amb el .repetir opció. El .curveLinear L'opció garanteix que l'animació s'executi a una velocitat constant, creant un moviment suau i lineal. Les imatges es mouen horitzontalment compensant-ne origen.x per l'amplada de la pantalla.

Tanmateix, el codi pot produir resultats no desitjats, com ara que les imatges desapareixen o es mouen en la direcció equivocada. Això és perquè el marc La propietat s'està modificant directament sense restablir les imatges quan es mouen fora de la pantalla. La solució és utilitzar un mètode com recycleclouds, que restableix la posició de les vistes de la imatge quan es mouen més enllà dels límits de la pantalla. D'aquesta manera, s'assegura que les imatges es realitzen en bucle sense problemes, sense desaparèixer. Aquest mètode comprova la posició x de les vistes de la imatge i, quan una es mou fora de la pantalla, es restableix a l'altre costat, permetent que el bucle continuï. A més, utilitzant jo feble dins del bloc de finalització assegura que no hi hagi fuites de memòria a causa de cicles de referència forts, millorant el rendiment de l'aplicació.

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

Creació d'animacions al núvol sense interrupcions a iOS

Animar una imatge en bucle, com una deriva del núvol en una aplicació per a iOS, requereix una consideració acurada tant dels efectes visuals com del rendiment. Quan intenteu aconseguir un bucle interminable de núvols en moviment a través de la pantalla, hi ha alguns elements clau per abordar: el temps, la direcció i com es gestionen les vistes. Un dels factors més importants per fer que la vostra animació sigui fluida és gestionar les vistes de la imatge de manera eficient perquè no desapareguin o quedin encallades. Utilitzant dos UIImageView Les instàncies de l'animació ajuden a garantir que els núvols semblen estar en moviment constant, fins i tot quan una imatge es mou fora de la pantalla i l'altra ocupa el seu lloc. És essencial assegurar-se que les imatges es restableixin un cop passen per la vora de la pantalla. Sense aquest restabliment, l'animació es pot trencar, fent que els núvols desapareguin o deixin buits en el bucle.

Un altre aspecte crític de l'animació és el marc.origen.x propietat, que s'utilitza per controlar la posició de les imatges del núvol. En establir la posició horitzontal de les imatges en diferents punts de partida, podeu crear la il·lusió de moviment infinit. Tanmateix, sorgeix un problema comú quan una imatge es mou fora de la pantalla i no es restableix a la posició correcta. L'enfocament correcte és detectar quan la imatge s'ha mogut més enllà de la vora de la pantalla i, a continuació, reposicionar-la per començar de nou a l'altre costat. Mitjançant un bloc d'animació, podeu definir una animació repetida i contínua que garanteixi un flux constant. Per assegurar-vos que el moviment sigui suau, utilitzeu UIView.animate mètode amb opcions com .repetir per fer bucle i .curviLinear per a una velocitat uniforme.

Finalment, optimitzar el codi per al rendiment i la suavitat és tan important com aconseguir l'efecte visual. Hauríeu de minimitzar l'ús de memòria i evitar càlculs innecessaris durant l'animació. Utilitzant weak self referències en animacions basades en tancaments ajuden a prevenir fuites de memòria evitant els cicles de retenció. A més, si l'animació és complexa o si necessiteu tècniques més avançades, considereu l'ús CADisplayLink per a actualitzacions de fotogrames en temps real, que ofereix un major control sobre el temps i la suavitat de l'animació. Provar l'animació en diferents mides i orientacions de pantalla també és crucial, ja que ajuda a garantir que l'animació funcioni com s'esperava en tots els dispositius. 📱