Kuvien käyttäminen sujuvan silmukkaanimaatioon luomiseen iOS: ssä

Kuinka saada pilvet liikkumaan ikuisesti: yksinkertainen silmukkaanimaatio iOS: ssä

iOS-kehityksessä animaatiot voivat todella herättää sovelluksen henkiin ja lisätä dynaamisen ja mukaansatempaavan elementin, josta käyttäjät pitävät. 🌥️ Yksi yleinen animaatio, jonka saatat haluta luoda, on sileä, silmukkatehoste, kuten pilvien siirtäminen näytöllä. Tätä yksinkertaista mutta visuaalisesti houkuttelevaa animaatiota käytetään usein peleissä, sääsovelluksissa ja jopa henkilökohtaisissa projekteissa rauhoittavan tunnelman luomiseksi. Jos olet uusi animaatioissa iOS:ssä, saatat miettiä, kuinka voit tehdä siitä saumattoman ja välttää häiriöt.

Kuvittele avaavasi sovelluksen ja näkeväsi heti pilviä ajelehtivan kevyesti näytöllä luoden täydellisen seesteisen taustan. Tällainen tehoste on saavutettavissa käyttämällä Swiftin UIImageView- ja UIView-animaatioita. Perusideana on animoida sama kuva (tässä tapauksessa pilvi) useita kertoja, jotta se näyttää liikkuvan jatkuvasti. Se ei kuitenkaan ole aina niin helppoa kuin miltä näyttää. On olemassa muutamia sudenkuoppia, joita kehittäjät kohtaavat usein yrittäessään tehdä animaatiosta sujuvaa, varsinkin kun käsitellään toistuvia kuvia.

Jos olet yrittänyt määrittää tämän tehosteen ja kohdannut ongelmia, kuten pilvien liikkumista väärään suuntaan tai katoamista, et ole yksin. Nämä ovat yleisiä ongelmia, jotka johtuvat virheellisestä kehysten käsittelystä tai animaation määrityksistä. Mutta älä huoli – tämä opas opastaa sinua näiden ongelmien korjaamisen vaiheissa ja varmistaa, että animaatiosi toimii saumattomasti. Aivan kuten ensimmäinen yritys animoida pilviä, saatat joutua säätämään joitain asioita ennen kuin saat täydellisen tuloksen. 😅

Sukellaan nyt ratkaisuun saadaksesi pilvet liikkumaan täydellisesti. Käyttämällä kahta kuvanäkymää ja pientä animaatiotaikuutta luot loputtoman, sujuvan liikkeen, joka pitää sovelluksesi tasaisena ja kiillotettuna. Oletko valmis korjaamaan animaation ja saamaan pilvet ajautumaan oikein? Mennään!

Kuinka Cloud Animation Script toimii iOS:ssä

Yllä olevassa komentosarjaesimerkissä tavoitteena on luoda sujuva, jatkuva pilvianimaatio, joka kiertää loputtomasti iOS-sovelluksessa. Pääideana on animoida kaksi UIImageView instansseja, joissa on sama pilvikuva, siirtämällä niitä vaakasuunnassa näytön poikki. Tämä tehdään säätämällä niiden asentoa kehyksen avulla alkuperä.x ominaisuus ja animaation käyttäminen näihin paikkoihin. Kahta kuvanäkymää käytetään siten, että kun toinen siirtyy pois näytöltä, toinen on valmis ottamaan paikkansa luoden saumattoman silmukan vaikutelman. Animoimalla kuvanäkymien liikettä voit luoda illuusion siitä, että pilvet ajautuvat jatkuvasti taivaalla. 🚀

Puretaan koodin pääkomponentit. Ensimmäinen askel on luoda kaksi kuvanäkymää, joissa kummassakin on sama pilvikuva. Nämä kuvanäkymät sijoitetaan vierekkäin näytölle siten, että toinen kuva alkaa siitä, mihin ensimmäinen päättyy, luoden jatkuvan horisontin. Tämä asetus on ratkaisevan tärkeä sen varmistamiseksi, että kun ensimmäinen kuvanäkymä saavuttaa näytön reunan, toinen kuvanäkymä on valmis ottamaan haltuunsa. Kuvanäkymien paikkoja ohjataan käyttämällä kehys ominaisuus, joka määrittää sekä näkymien koon että sijainnin ylätason näkymässä. Jokainen kuvanäkymä alkaa eri x-asennosta: yksi alkaa 0:sta ja toinen alkaa näytön leveydestä.

Kun kuvanäkymät on määritetty, seuraava vaihe on animoida ne. Tämä tehdään UIView.animate toiminto, joka vastaa näkymien animoinnista ajan mittaan. The UIView.animate toiminto ottaa useita parametreja: animaation kesto, mahdollinen viive ennen animaation alkamista, animaatioasetukset (kuten animaation toistaminen) ja käytettävä animaatiolohko. Tässä tapauksessa animaation kesto on asetettu 20 sekuntiin ja animaatio toistuu ikuisesti käyttämällä .toistaa vaihtoehto. The .curveLinear -vaihtoehto varmistaa, että animaatio toimii tasaisella nopeudella, mikä luo tasaisen, lineaarisen liikkeen. Kuvia siirretään vaakasuunnassa siirtämällä niitä alkuperä.x näytön leveyden mukaan.

Koodi voi kuitenkin tuottaa ei-toivottuja tuloksia, kuten kuvien katoamista tai liikkumista väärään suuntaan. Tämä johtuu siitä, kehys ominaisuutta muokataan suoraan ilman, että kuvia nollataan, kun ne siirtyvät pois näytöltä. Ratkaisu on käyttää menetelmää, kuten kierrätä pilvet, joka nollaa kuvanäkymien sijainnin, kun ne siirtyvät näytön rajojen ulkopuolelle. Tämä varmistaa, että kuvat kiertävät saumattomasti katoamatta. Tämä menetelmä tarkistaa kuvanäkymien x-asennon, ja kun yksi siirtyy pois näytöstä, se palautuu toiselle puolelle, jolloin silmukka voi jatkua. Lisäksi käyttämällä heikko itse viimeistelylohkon sisällä varmistaa, että vahvojen vertailujaksojen vuoksi ei esiinny muistivuotoja, mikä parantaa sovelluksen suorituskykyä.

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

Saumattoman pilvianimaation luominen iOS:ssä

Silmukkakuvan animointi, kuten pilven ajautuminen iOS-sovelluksessa, vaatii sekä visuaalisten tehosteiden että suorituskyvyn huolellista harkintaa. Kun yrität saavuttaa loputtoman lenkin liikkuvia pilviä näytöllä, on otettava huomioon muutama avaintekijä: ajoitus, suunta ja näkymien hallinta. Yksi tärkeimmistä tekijöistä animaation tekemisessä on käsitellä kuvanäkymiä tehokkaasti, jotta ne eivät vain katoa tai jää jumiin. Käyttämällä kahta UIImageView animaation instanssit auttavat varmistamaan, että pilvet näyttävät jatkuvasti liikkuvilta, vaikka yksi kuva siirtyisi ruudulta ja toinen tulee tilalle. On tärkeää varmistaa, että kuvat nollataan, kun ne siirtyvät näytön reunan ohi. Ilman tätä nollausta animaatio voi katketa, jolloin pilvet katoavat tai jättävät aukkoja silmukkaan.

Toinen animaation kriittinen puoli on runko.alkuperä.x ominaisuutta, jota käytetään hallitsemaan pilvikuvien sijaintia. Asettamalla kuvien vaaka-asento eri aloituspisteisiin voit luoda illuusion loputtomasta liikkeestä. Yleinen ongelma ilmenee kuitenkin, kun yksi kuva siirtyy pois näytöltä eikä sitä ole palautettu oikeaan asentoon. Oikea tapa on havaita, kun kuva on siirtynyt näytön reunan ohi, ja sitten sijoittaa se uudelleen aloittaaksesi uudelleen toiselta puolelta. Animaatiolohkon avulla voit määrittää toistuvan ja jatkuvan animaation, joka varmistaa jatkuvan kulun. Varmistaaksesi liikkeen sujuvan, käytä UIView.animate menetelmä vaihtoehdoilla, kuten .toistaa silmukoille ja .curveLinear tasaiseen nopeuteen.

Lopuksi koodin optimointi suorituskyvyn ja sujuvuuden vuoksi on yhtä tärkeää kuin visuaalisen tehosteen saavuttaminen. Sinun tulee minimoida muistin käyttö ja välttää tarpeettomia laskelmia animaation aikana. Käyttämällä weak self viittaukset sulkemiseen perustuvissa animaatioissa auttavat estämään muistivuotoja välttämällä säilytysjaksoja. Lisäksi, jos animaatio on monimutkainen tai jos tarvitset kehittyneempiä tekniikoita, harkitse sen käyttöä CADisplayLink reaaliaikaisia ​​kehyspäivityksiä varten, mikä tarjoaa paremman hallinnan animaation ajoitukseen ja sujuvuuteen. Animaatioiden testaaminen erikokoisilla ja -suunnilla on myös tärkeää, sillä se auttaa varmistamaan, että animaatio toimii odotetusti kaikilla laitteilla. 📱