Slik bruker du bilder til å lage en jevn sløyfeanimasjon i iOS

Hvordan få skyer til å bevege seg for alltid: En enkel sløyfeanimasjon i iOS

I iOS-utvikling kan animasjoner virkelig bringe en app til live, og legge til et dynamisk og engasjerende element som brukere elsker. 🌥️ En vanlig animasjon du kanskje vil lage er en jevn, looping-effekt, som å flytte skyer over skjermen. Denne enkle, men visuelt tiltalende animasjonen brukes ofte i spill, værapper og til og med i personlige prosjekter for å skape en beroligende atmosfære. Hvis du er ny på animasjon i iOS, lurer du kanskje på hvordan du kan gjøre den sømløs og unngå feil.

Tenk deg å åpne en app og umiddelbart se skyer som forsiktig driver over skjermen, og skaper den perfekte rolige bakgrunnen. Denne typen effekt er oppnåelig ved å bruke `UIImageView` og `UIView`-animasjoner i Swift. Den grunnleggende ideen er å animere det samme bildet (skyen i dette tilfellet) flere ganger slik at det ser ut til å bevege seg kontinuerlig. Imidlertid er det ikke alltid så lett som det ser ut til. Det er noen fallgruver utviklere ofte møter når de prøver å gjøre animasjonen jevn, spesielt når de har å gjøre med gjentatte bilder.

Hvis du har prøvd å sette opp denne effekten og har støtt på problemer som at skyene beveger seg i feil retning eller forsvinner, er du ikke alene. Dette er vanlige problemer som stammer fra feil rammehåndtering eller animasjonskonfigurasjon. Men ikke bekymre deg – denne veiledningen vil lede deg gjennom trinnene for å fikse disse problemene, og sikre at animasjonen fungerer sømløst. Akkurat som mitt første forsøk på å animere skyer, må du kanskje justere et par ting før du får det perfekte resultatet. 😅

La oss nå dykke ned i løsningen for å få skyene til å bevege seg i en perfekt sløyfe. Ved å bruke to bildevisninger og litt animasjonsmagi, vil du skape en endeløs, flytende bevegelse som vil holde appen din jevn og polert. Klar til å fikse animasjonen og få skyene til å drive akkurat? La oss gå!

Hvordan Cloud Animation Script fungerer i iOS

I skripteksemplet ovenfor, er målet å lage en jevn, kontinuerlig skyanimasjon som går uendelig i en iOS-app. Hovedideen er å animere to UIImageView forekomster med samme skybilde ved å flytte dem horisontalt over skjermen. Dette gjøres ved å justere deres posisjoner ved hjelp av rammens opprinnelse.x eiendom og bruk av animasjonen til disse stillingene. De to bildevisningene brukes slik at når den ene beveger seg ut av skjermen, er den andre klar til å ta plassen, og skaper effekten av en sømløs loop. Ved å animere bevegelsene til bildevisningene kan du gi en illusjon av at skyene hele tiden driver over himmelen. 🚀

La oss bryte ned hovedkomponentene i koden. Det første trinnet er å lage de to bildevisningene, som hver har det samme bildet av skyer. Disse bildevisningene er plassert side ved side på skjermen, med den andre bildevisningen som starter der den første slutter, og skaper en kontinuerlig horisont. Dette oppsettet er avgjørende for å sikre at når den første bildevisningen når kanten av skjermen, er den andre bildevisningen klar til å ta over. Posisjonene til bildevisningene styres ved hjelp av ramme egenskap, som definerer både størrelsen og plasseringen av visningene i den overordnede visningen. Hver bildevisning starter fra en annen x-posisjon: den ene starter på 0, og den andre starter ved bredden av skjermen.

Når bildevisningene er satt opp, er neste trinn å animere dem. Dette gjøres med UIView.animate funksjon, som er ansvarlig for å animere visningene over tid. De UIView.animate funksjonen tar flere parametere: varigheten av animasjonen, eventuell forsinkelse før animasjonen starter, animasjonsalternativene (som å gjenta animasjonen) og blokken med animasjoner som skal brukes. I dette tilfellet settes animasjonens varighet til 20 sekunder, og animasjonen er satt til å gjentas for alltid ved å bruke .gjenta alternativ. De .curveLinear alternativet sikrer at animasjonen kjører med konstant hastighet, og skaper en jevn, lineær bevegelse. Bildene flyttes horisontalt ved å forskyve deres opprinnelse.x etter skjermbredden.

Koden kan imidlertid gi uønskede resultater, som at bildene forsvinner eller beveger seg i feil retning. Dette er fordi ramme egenskapen endres direkte uten å tilbakestille bildene når de beveger seg utenfor skjermen. Løsningen er å bruke en metode som resirkuler skyer, som tilbakestiller posisjonen til bildevisningene når de beveger seg utenfor skjermgrensene. Dette sikrer at bildene går sømløst i sløyfe, uten å forsvinne. Denne metoden kontrollerer x-posisjonen til bildevisningene, og når en beveger seg utenfor skjermen, tilbakestilles den til den andre siden, slik at loopen kan fortsette. I tillegg bruker svakt selv inne i fullføringsblokken sikrer at det ikke er noen minnelekkasjer på grunn av sterke referansesykluser, noe som forbedrer ytelsen til appen.

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

Opprette sømløs skyanimasjon i iOS

Å animere et looping-bilde, som en skydrift i en iOS-app, krever nøye vurdering av både visuelle effekter og ytelse. Når du prøver å oppnå en endeløs løkke av bevegelige skyer over skjermen, er det noen få nøkkelelementer å ta tak i: timing, retning og hvordan visningene administreres. En av de viktigste faktorene for å gjøre animasjonen jevn, er å håndtere bildevisningene effektivt slik at de ikke bare forsvinner eller setter seg fast. Bruker to UIImageView instanser for animasjonen bidrar til å sikre at skyene ser ut til å bevege seg konstant, selv når ett bilde flytter seg utenfor skjermen og det andre tar plassen. Det er viktig å sikre at bildene tilbakestilles når de beveger seg forbi kanten av skjermen. Uten denne tilbakestillingen kan animasjonen gå i stykker, noe som får skyene til å forsvinne eller etterlate hull i loopen.

Et annet kritisk aspekt ved animasjonen involverer frame.origin.x egenskap, som brukes til å kontrollere posisjonen til skybildene. Ved å sette bildenes horisontale posisjon ved forskjellige startpunkter, kan du skape en illusjon av uendelig bevegelse. Imidlertid oppstår et vanlig problem når ett bilde beveger seg utenfor skjermen og ikke tilbakestilles til riktig posisjon. Den riktige tilnærmingen er å oppdage når bildet har beveget seg forbi skjermens kant, og deretter flytte det for å starte igjen på den andre siden. Ved å bruke en animasjonsblokk kan du definere en repeterende og kontinuerlig animasjon som sikrer en konstant flyt. For å sikre at bevegelsen er jevn, bruk UIView.animate metode med alternativer som .gjenta for looping og .curveLinear for jevn hastighet.

Til slutt, optimalisering av koden for ytelse og jevnhet er like viktig som å oppnå den visuelle effekten. Du bør minimere minnebruken og unngå unødvendige beregninger under animasjonen. Bruker weak self referanser i lukkebaserte animasjoner bidrar til å forhindre minnelekkasjer ved å unngå retain-sykluser. I tillegg, hvis animasjonen er kompleks eller hvis du trenger mer avanserte teknikker, bør du vurdere å bruke CADisplayLink for rammeoppdateringer i sanntid, som gir større kontroll over timingen og jevnheten til animasjonen. Testing av animasjonen på forskjellige skjermstørrelser og -retninger er også avgjørende, siden det bidrar til å sikre at animasjonen fungerer som forventet på alle enheter. 📱