Sådan bruger du billeder til at lave en glat løkke-animation i iOS

Sådan får du skyer til at bevæge sig for evigt: En simpel løkkeanimation i iOS

I iOS-udvikling kan animationer virkelig bringe en app til live og tilføje et dynamisk og engagerende element, som brugerne elsker. 🌥️ En almindelig animation, du måske vil oprette, er en jævn, looping-effekt, som at flytte skyer hen over skærmen. Denne enkle, men visuelt tiltalende animation bruges ofte i spil, vejrapps og endda i personlige projekter for at skabe en beroligende atmosfære. Hvis du er ny til animation i iOS, spekulerer du måske på, hvordan du gør det problemfrit og undgår fejl.

Forestil dig, at du åbner en app og med det samme ser skyer, der forsigtigt driver hen over skærmen og skaber den perfekte fredfyldte baggrund. Denne form for effekt kan opnås ved at bruge `UIImageView` og `UIView`-animationer i Swift. Den grundlæggende idé er at animere det samme billede (skyen i dette tilfælde) flere gange, så det ser ud til at bevæge sig kontinuerligt. Det er dog ikke altid så nemt, som det ser ud til. Der er et par faldgruber, som udviklere ofte støder på, når de forsøger at gøre animationen jævn, især når de har at gøre med gentagne billeder.

Hvis du har prøvet at konfigurere denne effekt og stødt på problemer som at skyerne bevæger sig i den forkerte retning eller forsvinder, er du ikke alene. Disse er almindelige problemer, der stammer fra forkert billedhåndtering eller animationskonfiguration. Men bare rolig – denne guide vil lede dig gennem trinene til at løse disse problemer og sikre, at din animation fungerer problemfrit. Ligesom mit første forsøg på at animere skyer, skal du muligvis justere et par ting, før du får det perfekte resultat. 😅

Lad os nu dykke ned i løsningen for at få disse skyer til at bevæge sig i en perfekt sløjfe. Ved at bruge to billedvisninger og en smule animationsmagi, vil du skabe en endeløs, flydende bevægelse, der får din app til at se glat og poleret ud. Klar til at rette animationen og få disse skyer til at drive helt rigtigt? Lad os gå!

Sådan fungerer Cloud Animation Script i iOS

I scripteksemplet ovenfor er målet at skabe en jævn, kontinuerlig sky-animation, der looper uendeligt i en iOS-app. Hovedideen er at animere to UIImageView forekomster med det samme skybillede ved at flytte dem vandret hen over skærmen. Dette gøres ved at justere deres positioner ved hjælp af rammens oprindelse.x ejendom og anvendelse af animationen på disse stillinger. De to billedvisninger bruges, så når den ene bevæger sig ud af skærmen, er den anden klar til at tage dens plads, hvilket skaber effekten af ​​en sømløs loop. Ved at animere bevægelsen af ​​billedvisningerne kan du give en illusion af, at skyerne konstant driver hen over himlen. 🚀

Lad os nedbryde hovedkomponenterne i koden. Det første trin er at skabe de to billedvisninger, der hver har det samme billede af skyer. Disse billedvisninger placeres side om side på skærmen, hvor den anden billedvisning starter, hvor den første slutter, hvilket skaber en kontinuerlig horisont. Denne opsætning er afgørende for at sikre, at når den første billedvisning når kanten af ​​skærmen, er den anden billedvisning klar til at tage over. Billedvisningernes positioner styres ved hjælp af ramme egenskab, som definerer både størrelsen og placeringen af ​​visningerne i den overordnede visning. Hver billedvisning starter fra en anden x-position: den ene starter ved 0, og den anden starter ved skærmens bredde.

Når billedvisningerne er sat op, er næste trin at animere dem. Dette gøres med UIView.animate funktion, som er ansvarlig for at animere visningerne over tid. De UIView.animate funktionen tager flere parametre: animationens varighed, enhver forsinkelse før animationen starter, animationsmulighederne (såsom gentagelse af animationen) og blokken af ​​animationer, der skal anvendes. I dette tilfælde er animationens varighed indstillet til 20 sekunder, og animationen er indstillet til at gentages for evigt ved hjælp af .gentage valgmulighed. De .curveLineær option sikrer, at animationen kører med konstant hastighed, hvilket skaber en jævn, lineær bevægelse. Billederne flyttes vandret ved at forskyde deres oprindelse.x af skærmens bredde.

Koden kan dog give uønskede resultater, såsom at billederne forsvinder eller bevæger sig i den forkerte retning. Dette er fordi ramme egenskaben ændres direkte uden at nulstille billederne, når de flyttes væk fra skærmen. Løsningen er at bruge en metode som genbruge skyer, som nulstiller positionen af ​​billedvisningerne, når de bevæger sig ud over skærmens grænser. Dette sikrer, at billederne problemfrit looper uden at forsvinde. Denne metode kontrollerer x-positionen af ​​billedvisningerne, og når man bevæger sig væk fra skærmen, nulstilles den til den anden side, så løkken kan fortsætte. Derudover bruger svagt selv inde i færdiggørelsesblokken sikrer, at der ikke er hukommelseslækager på grund af stærke referencecyklusser, hvilket forbedrer appens ydeevne.

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

Oprettelse af Seamless Cloud Animation i iOS

At animere et looping-billede, som en skydrift i en iOS-app, kræver omhyggelig overvejelse af både visuelle effekter og ydeevne. Når du forsøger at opnå en endeløs sløjfe af skyer i bevægelse hen over skærmen, er der et par nøgleelementer at tage fat på: timing, retning og hvordan udsigterne styres. En af de vigtigste faktorer for at gøre din animation glat er at håndtere billedvisningerne effektivt, så de ikke bare forsvinder eller sætter sig fast. Bruger to UIImageView instanser til animationen er med til at sikre, at skyerne ser ud til at bevæge sig konstant, selv når det ene billede flytter sig væk fra skærmen, og det andet tager dets plads. Det er vigtigt at sikre, at billederne nulstilles, når de bevæger sig forbi kanten af ​​skærmen. Uden denne nulstilling kan animationen bryde, hvilket får skyerne til at forsvinde eller efterlade huller i løkken.

Et andet kritisk aspekt af animationen involverer frame.origin.x egenskab, som bruges til at styre skybilledernes position. Ved at indstille billedernes vandrette position ved forskellige udgangspunkter, kan du skabe en illusion af uendelig bevægelse. Der opstår dog et almindeligt problem, når et billede flytter sig væk fra skærmen og ikke nulstilles til den korrekte position. Den korrekte tilgang er at registrere, når billedet har bevæget sig forbi skærmens kant, og derefter flytte det for at starte igen på den anden side. Ved hjælp af en animationsblok kan du definere en gentagende og kontinuerlig animation, der sikrer et konstant flow. For at sikre, at bevægelsen er jævn, skal du bruge UIView.animate metode med muligheder som .gentage til looping og .curveLineær for jævn hastighed.

Endelig er det lige så vigtigt at optimere din kode for ydeevne og glathed som at opnå den visuelle effekt. Du bør minimere hukommelsesforbruget og undgå unødvendige beregninger under animationen. Bruger weak self referencer i lukningsbaserede animationer hjælper med at forhindre hukommelseslækager ved at undgå tilbageholdelsescyklusser. Derudover, hvis animationen er kompleks, eller hvis du har brug for mere avancerede teknikker, kan du overveje at bruge CADisplayLink til real-time rammeopdateringer, som giver større kontrol over timingen og jævnheden af ​​animationen. Det er også afgørende at teste animationen på forskellige skærmstørrelser og -retninger, da det er med til at sikre, at animationen fungerer som forventet på tværs af alle enheder. 📱