Kā izmantot attēlus, lai izveidotu vienmērīgu cilpas animāciju operētājsistēmā iOS

Kā likt mākoņiem kustēties mūžīgi: vienkārša cilpas animācija operētājsistēmā iOS

IOS izstrādē animācijas var patiesi atdzīvināt lietotni, pievienojot dinamisku un saistošu elementu, kas lietotājiem patīk. 🌥️ Viena izplatīta animācija, kuru, iespējams, vēlēsities izveidot, ir vienmērīgs, cilpas efekts, piemēram, mākoņu pārvietošana pa ekrānu. Šī vienkāršā, taču vizuāli pievilcīgā animācija bieži tiek izmantota spēlēs, laikapstākļu lietotnēs un pat personīgos projektos, lai radītu nomierinošu atmosfēru. Ja esat iesācējs iOS animācijas jomā, jums varētu rasties jautājums, kā padarīt to nevainojamu un izvairīties no kļūmēm.

Iedomājieties, ka atverat lietotni un uzreiz redzat mākoņus, kas maigi slīd pa ekrānu, radot perfektu mierīgu fonu. Šāda veida efektu var sasniegt, izmantojot Swift animācijas "UIImageView" un "UIView". Pamatideja ir animēt vienu un to pašu attēlu (šajā gadījumā mākoni) vairākas reizes, lai šķiet, ka tas kustas nepārtraukti. Tomēr tas ne vienmēr ir tik vienkārši, kā šķiet. Ir dažas nepilnības, ar kurām izstrādātāji bieži saskaras, mēģinot padarīt animāciju vienmērīgu, īpaši, ja tiek izmantoti atkārtoti attēli.

Ja esat mēģinājis iestatīt šo efektu un saskārāties ar tādām problēmām kā mākoņi, kas pārvietojas nepareizā virzienā vai pazūd, jūs neesat viens. Šīs ir izplatītas problēmas, kas rodas nepareizas kadru apstrādes vai animācijas konfigurācijas dēļ. Taču neuztraucieties — šajā rokasgrāmatā ir sniegti norādījumi, kā novērst šīs problēmas, nodrošinot, ka animācija darbojas nevainojami. Tāpat kā mans pirmais mēģinājums animēt mākoņus, iespējams, jums būs jāpielāgo dažas lietas, lai iegūtu perfektu rezultātu. 😅

Tagad iedziļināsimies risinājumā, lai šie mākoņi kustētos ideālā cilpā. Izmantojot divus attēlu skatus un nedaudz animācijas, jūs izveidosit nebeidzamu, plūstošu kustību, kas ļaus jūsu lietotnei izskatīties gludai un gludai. Vai esat gatavs labot animāciju un panākt, lai mākoņi dreifētu pareizi? Ejam!

Kā mākoņa animācijas skripts darbojas operētājsistēmā iOS

Iepriekš sniegtajā skripta piemērā mērķis ir izveidot vienmērīgu, nepārtrauktu mākoņa animāciju, kas iOS lietotnē darbojas bezgalīgi. Galvenā ideja ir animēt divus UIImageView gadījumiem ar vienu un to pašu mākoņa attēlu, pārvietojot tos horizontāli pa ekrānu. Tas tiek darīts, pielāgojot to pozīcijas, izmantojot rāmi izcelsme.x īpašums un animācijas pielietošana šīm pozīcijām. Abi attēlu skati tiek izmantoti, lai, kad viens iziet no ekrāna, otrs ir gatavs ieņemt savu vietu, radot viengabalainas cilpas efektu. Animējot attēlu skatu kustību, jūs varat radīt ilūziju, ka mākoņi nepārtraukti dreifē pa debesīm. 🚀

Sadalīsim galvenās koda sastāvdaļas. Pirmais solis ir izveidot divus attēlu skatus, kuros katrā ir viens un tas pats mākoņu attēls. Šie attēlu skati ekrānā tiek novietoti blakus, otrajam attēlam sākot no vietas, kur beidzas pirmais, veidojot nepārtrauktu horizontu. Šī iestatīšana ir ļoti svarīga, lai nodrošinātu, ka, kad pirmais attēla skats sasniedz ekrāna malu, otrais attēla skats ir gatavs pārņemt. Attēlu skatu pozīcijas tiek kontrolētas, izmantojot rāmis rekvizītu, kas nosaka gan skatu lielumu, gan atrašanās vietu vecākskatā. Katrs attēla skats sākas no citas x pozīcijas: viens sākas ar 0, bet otrs sākas ar ekrāna platumu.

Kad attēlu skati ir iestatīti, nākamais solis ir to animācija. Tas tiek darīts ar UIView.animate funkcija, kas ir atbildīga par skatu animāciju laika gaitā. The UIView.animate funkcijai ir nepieciešami vairāki parametri: animācijas ilgums, aizkave pirms animācijas sākuma, animācijas opcijas (piemēram, animācijas atkārtošana) un lietojamo animāciju bloks. Šajā gadījumā animācijas ilgums ir iestatīts uz 20 sekundēm, un animācija tiek iestatīta tā, lai tā atkārtojas mūžīgi, izmantojot .atkārtot opciju. The .curviLinear opcija nodrošina, ka animācija darbojas nemainīgā ātrumā, radot vienmērīgu, lineāru kustību. Attēli tiek pārvietoti horizontāli, tos nobīdot izcelsme.x pēc ekrāna platuma.

Tomēr kods var radīt nevēlamus rezultātus, piemēram, attēli pazūd vai pārvietojas nepareizā virzienā. Tas ir tāpēc, ka rāmis rekvizīts tiek tieši pārveidots, neatiestatot attēlus, kad tie tiek pārvietoti ārpus ekrāna. Risinājums ir izmantot tādu metodi kā recycleClouds, kas atiestata attēlu skatu pozīciju, kad tie pārvietojas ārpus ekrāna robežām. Tas nodrošina attēlu nemanāmu cilpu, nepazūdot. Šī metode pārbauda attēla skatu x pozīciju, un, kad viens tiek pārvietots ārpus ekrāna, tas tiek atiestatīts uz otru pusi, ļaujot cilpai turpināties. Turklāt, izmantojot vājš es pabeigšanas bloka iekšpusē nodrošina, ka nav atmiņas noplūdes spēcīgu atsauces ciklu dēļ, uzlabojot lietotnes veiktspēju.

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

Bezšuvju mākoņa animācijas izveide operētājsistēmā iOS

Lai animētu cilpas attēlu, piemēram, mākoņa novirzi iOS lietotnē, rūpīgi jāapsver gan vizuālie efekti, gan veiktspēja. Mēģinot izveidot nebeidzamu mākoņu loku, kas pārvietojas ekrānā, ir jārisina daži galvenie elementi: laiks, virziens un skatu pārvaldība. Viens no svarīgākajiem faktoriem, lai padarītu animāciju vienmērīgu, ir efektīvi apstrādāt attēlu skatus, lai tie vienkārši nepazustu vai neiestrēgtu. Izmantojot divus UIImageView Animācijas gadījumi palīdz nodrošināt, ka mākoņi pastāvīgi kustas, pat ja viens attēls tiek pārvietots ārpus ekrāna un otrs ieņem tā vietu. Ir svarīgi nodrošināt, lai attēli tiktu atiestatīti, tiklīdz tie pārvietojas pāri ekrāna malai. Bez šīs atiestatīšanas animācija var pārtrūkt, izraisot mākoņu pazušanu vai cilpas atstarpes.

Vēl viens būtisks animācijas aspekts ir rāmis.izcelsme.x īpašumu, ko izmanto, lai kontrolētu mākoņa attēlu pozīciju. Iestatot attēlu horizontālo stāvokli dažādos sākuma punktos, varat radīt bezgalīgas kustības ilūziju. Tomēr bieži sastopama problēma rodas, kad viens attēls tiek pārvietots ārpus ekrāna un netiek atiestatīts pareizajā pozīcijā. Pareizā pieeja ir noteikt, kad attēls ir pārvietots pāri ekrāna malai, un pēc tam pārvietot to, lai sāktu no jauna no otras puses. Izmantojot animācijas bloku, varat definēt atkārtotu un nepārtrauktu animāciju, kas nodrošina pastāvīgu plūsmu. Lai pārliecinātos, ka kustība ir gluda, izmantojiet UIView.animate metode ar tādām iespējām kā .atkārtot cilpai un .curviLinear vienmērīgam ātrumam.

Visbeidzot, koda optimizēšana veiktspējai un gludumam ir tikpat svarīga kā vizuālā efekta sasniegšana. Animācijas laikā ir jāsamazina atmiņas lietojums un jāizvairās no nevajadzīgiem aprēķiniem. Izmantojot weak self atsauces uz aizvēršanu balstītās animācijās palīdz novērst atmiņas noplūdes, izvairoties no saglabāšanas cikliem. Turklāt, ja animācija ir sarežģīta vai jums ir nepieciešamas uzlabotas metodes, apsveriet iespēju to izmantot CADisplayLink reāllaika kadru atjauninājumiem, kas piedāvā lielāku kontroli pār animācijas laiku un vienmērīgumu. Animācijas pārbaude dažādos ekrāna izmēros un orientācijās ir arī ļoti svarīga, jo tā palīdz nodrošināt animācijas darbību visās ierīcēs, kā paredzēts. 📱