Kuidas kasutada pilte sujuva silmusanimatsiooni loomiseks iOS-is

Kuidas panna pilved igavesti liikuma: lihtne silmusanimatsioon iOS-is

iOS-i arenduses võivad animatsioonid rakenduse tõeliselt ellu äratada, lisades dünaamilise ja kaasahaarava elemendi, mida kasutajad armastavad. 🌥️ Üks levinud animatsioon, mida võiksite luua, on sujuv silmusefekt, näiteks pilvede liigutamine üle ekraani. Seda lihtsat, kuid visuaalselt atraktiivset animatsiooni kasutatakse sageli mängudes, ilmarakendustes ja isegi isiklikes projektides, et luua rahustav õhkkond. Kui olete iOS-i animatsiooniga uustulnuk, võite mõelda, kuidas muuta see sujuvaks ja vältida tõrkeid.

Kujutage ette, et avate rakenduse ja näete kohe pilvi, mis sujuvalt üle ekraani triivivad, luues täiusliku rahuliku tausta. Seda tüüpi efekti on võimalik saavutada Swifti animatsioonide „UIImageView” ja „UIView” abil. Põhiidee on animeerida sama pilti (antud juhul pilve) mitu korda, nii et see näib pidevalt liikuvat. Siiski pole see alati nii lihtne, kui tundub. Animatsiooni sujuvaks muutmisel, eriti korduvate piltidega tegelemisel, on arendajatel mõned lõksud.

Kui olete proovinud seda efekti seadistada ja avastasite probleeme, nagu pilved liiguvad vales suunas või kaovad, pole te üksi. Need on levinud probleemid, mis tulenevad kaadri valest käsitsemisest või animatsiooni konfiguratsioonist. Kuid ärge muretsege – see juhend juhendab teid nende probleemide lahendamiseks, tagades animatsiooni tõrgeteta toimimise. Täpselt nagu minu esimene katse pilvede animeerimiseks, peate võib-olla enne täiusliku tulemuse saamist mõnda asja kohandama. 😅

Sukeldume nüüd lahendusse, et saada need pilved täiuslikus ringis liikuma. Kasutades kahte pildivaadet ja natuke animatsiooni, loote lõputu sujuva liikumise, mis hoiab teie rakenduse sujuva ja poleeritud. Kas olete valmis animatsiooni parandama ja pilved õigesti triivima? Lähme!

Kuidas pilvanimatsiooni skript iOS-is töötab

Ülaltoodud skriptinäites on eesmärk luua sujuv ja pidev pilvanimatsioon, mis iOS-i rakenduses lõpmatult ringi liigub. Põhiidee on animeerida kaks UIImageView sama pilvepildiga eksemplare, liigutades neid horisontaalselt üle ekraani. Seda tehakse nende positsioonide reguleerimisega raami abil päritolu.x atribuut ja animatsiooni rakendamine nendele positsioonidele. Kahte pildivaadet kasutatakse nii, et kui üks liigub ekraanilt välja, on teine ​​valmis oma kohale asuma, luues sujuva silmuse efekti. Pildivaadete liikumist animeerides saate luua illusiooni, et pilved triivivad pidevalt üle taeva. 🚀

Jagame koodi põhikomponendid lahti. Esimene samm on luua kaks pildivaadet, millest igaühel on sama pilvepilt. Need pildivaated asetatakse ekraanile kõrvuti, kusjuures teine ​​pildivaade algab sealt, kus esimene lõpeb, luues pideva horisondi. See seadistus on ülioluline tagamaks, et kui esimene pildivaade jõuab ekraani servani, on teine ​​pildivaade valmis üle võtma. Pildivaadete asukohti juhitakse kasutades raami atribuut, mis määrab nii vaadete suuruse kui ka asukoha põhivaates. Iga pildivaade algab erinevast x-asendist: üks algab 0-st ja teine ​​algab ekraani laiusest.

Kui pildivaated on seadistatud, on järgmine samm nende animeerimine. Seda tehakse rakendusega UIView.animate funktsioon, mis vastutab vaadete aja jooksul animeerimise eest. The UIView.animate Funktsioon võtab mitut parameetrit: animatsiooni kestus, viivitus enne animatsiooni algust, animatsioonivalikud (nt animatsiooni kordamine) ja rakendatavate animatsioonide plokk. Sel juhul määratakse animatsiooni kestuseks 20 sekundit ja animatsioon määratakse igavesti korduma, kasutades .korda valik. The .curveLinear valik tagab, et animatsioon jookseb ühtlase kiirusega, luues sujuva, lineaarse liikumise. Pilte liigutatakse horisontaalselt, nihutades neid päritolu.x ekraani laiuse järgi.

Kood võib aga põhjustada soovimatuid tulemusi, näiteks piltide kadumist või vales suunas liikumist. Seda seetõttu, et raami atribuuti muudetakse otse ilma pilte lähtestamata, kui need ekraanilt välja liiguvad. Lahenduseks on kasutada sellist meetodit nagu RecycleClouds, mis lähtestab pildivaadete asukoha, kui need liiguvad ekraani piiridest kaugemale. See tagab, et kujutised liiguvad sujuvalt, ilma kadumata. See meetod kontrollib pildivaadete x-asendit ja kui üks liigub ekraanilt välja, lähtestatakse see teisele poole, võimaldades tsüklil jätkata. Lisaks kasutades nõrk mina lõpetamisploki sees tagab, et tugevate võrdlustsüklite tõttu ei esineks mälulekkeid, parandades rakenduse jõudlust.

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

Sujuva pilvanimatsiooni loomine iOS-is

Silmuspildi animeerimine, nagu pilve triivimine iOS-i rakenduses, nõuab nii visuaalsete efektide kui ka jõudluse hoolikat kaalumist. Kui proovite saavutada ekraanil liikuvate pilvede lõputu ringi, tuleb käsitleda mõnda põhielementi: ajastus, suund ja vaadete haldamine. Üks olulisemaid tegureid animatsiooni sujuvaks muutmisel on piltide tõhus käsitlemine, et need lihtsalt ei kaoks ega takerduks. Kasutades kahte UIImageView Animatsiooni eksemplarid aitavad tagada, et pilved näivad pidevalt liikuvat isegi siis, kui üks pilt liigub ekraanilt välja ja teine ​​võtab selle asemele. Oluline on tagada, et kujutised lähtestatakse, kui need ekraani servast mööda liiguvad. Ilma selle lähtestamiseta võib animatsioon katkeda, mille tulemusel pilved kaovad või tsüklisse lüngad jäävad.

Animatsiooni teine ​​kriitiline aspekt hõlmab raam.päritolu.x atribuut, mida kasutatakse pilvepiltide asukoha juhtimiseks. Seades piltide horisontaalse asukoha erinevatesse lähtepunktidesse, saate luua lõpmatu liikumise illusiooni. Kuid tavaline probleem tekib siis, kui üks pilt liigub ekraanilt välja ja seda ei lähtestata õigesse asendisse. Õige lähenemisviis on tuvastada, kui pilt on ekraani servast mööda liikunud, ja seejärel asetada see ümber, et alustada uuesti teiselt poolt. Animatsiooniplokki kasutades saate määratleda korduva ja pideva animatsiooni, mis tagab pideva voo. Liikumise sujuvuse tagamiseks kasutage UIView.animate meetod selliste valikutega nagu .korda loopimiseks ja .curveLineaarne ühtlase kiiruse jaoks.

Lõpuks on koodi optimeerimine jõudluse ja sujuvuse tagamiseks sama oluline kui visuaalse efekti saavutamine. Peaksite minimeerima mälukasutust ja vältima tarbetuid arvutusi animatsiooni ajal. Kasutades weak self viited sulgemispõhistes animatsioonides aitavad mälulekkeid vältida, vältides säilitustsükleid. Lisaks, kui animatsioon on keeruline või vajate täiustatud tehnikaid, kaaluge selle kasutamist CADisplayLink reaalajas kaadrivärskenduste jaoks, mis pakub suuremat kontrolli animatsiooni ajastuse ja sujuvuse üle. Animatsiooni testimine erinevate ekraanisuuruste ja -suundadega on samuti ülioluline, kuna see aitab tagada, et animatsioon toimib ootuspäraselt kõigis seadmetes. 📱