Kaip naudoti vaizdus norint sukurti sklandžią animaciją „iOS“.

Kaip priversti debesis judėti amžinai: paprasta animacija „iOS“.

Kuriant „iOS“, animacija gali iš tikrųjų atgaivinti programą, pridedant dinamišką ir patrauklų elementą, kurį mėgsta vartotojai. 🌥️ Viena dažna animacija, kurią galbūt norėsite sukurti, yra sklandus, besisukantis efektas, pavyzdžiui, debesų judėjimas ekrane. Ši paprasta, bet vizualiai patraukli animacija dažnai naudojama žaidimuose, orų programose ir net asmeniniuose projektuose, siekiant sukurti raminančią atmosferą. Jei naujokas naudojate animaciją sistemoje „iOS“, jums gali kilti klausimas, kaip padaryti ją vientisą ir išvengti nesklandumų.

Įsivaizduokite, kad atidarote programą ir iškart matote ekranu švelniai slenkančius debesis, sukuriančius tobulą ramų foną. Tokį efektą galima pasiekti naudojant „UIImageView“ ir „UIView“ animacijas „Swift“. Pagrindinė idėja yra animuoti tą patį vaizdą (šiuo atveju debesį) kelis kartus, kad atrodytų, jog jis nuolat juda. Tačiau tai ne visada taip lengva, kaip atrodo. Yra keletas spąstų, su kuriais dažnai susiduria kūrėjai, bandydami padaryti animaciją sklandžią, ypač kai susiduria su pasikartojančiais vaizdais.

Jei bandėte nustatyti šį efektą ir susidūrėte su tokiomis problemomis kaip debesys juda neteisinga kryptimi arba dingsta, nesate vieni. Tai dažnos problemos, kylančios dėl netinkamo kadrų tvarkymo arba animacijos konfigūracijos. Tačiau nesijaudinkite – šis vadovas padės jums išspręsti šias problemas ir užtikrinti, kad jūsų animacija veiktų sklandžiai. Kaip ir mano pirmasis bandymas animuoti debesis, jums gali tekti pakoreguoti keletą dalykų, kad gautumėte tobulą rezultatą. 😅

Dabar pasinerkime į sprendimą, kad šie debesys judėtų tobula kilpa. Naudodami du vaizdų rodinius ir šiek tiek animacijos magijos, sukursite begalinį, sklandų judesį, dėl kurio jūsų programa atrodys sklandžiai ir glotniai. Pasiruošę pataisyti animaciją ir tinkamai slinkti debesis? einam!

Kaip debesies animacijos scenarijus veikia iOS

Aukščiau pateiktame scenarijaus pavyzdyje tikslas yra sukurti sklandžią, nuolatinę debesies animaciją, kuri „iOS“ programoje suktųsi be galo. Pagrindinė idėja yra animuoti du UIImageView egzempliorių su tuo pačiu debesies vaizdu, perkeliant juos horizontaliai ekrane. Tai atliekama koreguojant jų padėtis rėmo pagalba kilmė.x ir pritaikyti animaciją šioms pozicijoms. Du vaizdo rodiniai naudojami taip, kad vienam išėjus iš ekrano, kitas būtų pasirengęs užimti savo vietą, sukurdamas vientisos kilpos efektą. Suaktyvindami vaizdo vaizdų judėjimą, galite sukurti iliuziją, kad debesys nuolat slenka dangumi. 🚀

Išskirkime pagrindinius kodo komponentus. Pirmas žingsnis yra sukurti du vaizdo rodinius, kurių kiekvienas turi tą patį debesų vaizdą. Šie vaizdo rodiniai ekrane pateikiami vienas šalia kito, o antrasis vaizdas prasideda ten, kur baigiasi pirmasis, sukuriant ištisinį horizontą. Ši sąranka yra labai svarbi siekiant užtikrinti, kad kai pirmasis vaizdo vaizdas pasieks ekrano kraštą, antrasis vaizdo rodinys būtų paruoštas perimti. Vaizdo rodinių padėtis valdoma naudojant rėmelis ypatybę, kuri apibrėžia rodinių dydį ir padėtį pirminiame rodinyje. Kiekvienas vaizdo rodinys prasideda nuo skirtingos x padėties: vienas prasideda nuo 0, o kitas prasideda nuo ekrano pločio.

Nustačius vaizdų rodinius, kitas veiksmas yra juos animuoti. Tai daroma su UIView.animate funkcija, kuri yra atsakinga už vaizdų pagyvinimą laikui bėgant. The UIView.animate funkcijai reikalingi keli parametrai: animacijos trukmė, bet koks delsimas prieš pradedant animaciją, animacijos parinktys (pvz., animacijos kartojimas) ir taikytinų animacijų blokas. Tokiu atveju animacijos trukmė nustatoma į 20 sekundžių, o animacija kartojama amžinai naudojant .pakartokite variantas. The .kreiviLinijinis parinktis užtikrina, kad animacija veiktų pastoviu greičiu, sukuriant sklandų, linijinį judėjimą. Vaizdai perkeliami horizontaliai, juos paslinkus kilmė.x pagal ekrano plotį.

Tačiau kodas gali sukelti nepageidaujamų rezultatų, pvz., vaizdų išnykimas arba judėjimas neteisinga kryptimi. Taip yra todėl, rėmelis ypatybė yra tiesiogiai modifikuojama, nenustatant vaizdų iš naujo, kai jie išeina iš ekrano. Sprendimas yra naudoti tokį metodą kaip recycleDebesys, kuri iš naujo nustato vaizdo rodinių padėtį, kai jie peržengia ekrano ribas. Taip užtikrinama, kad vaizdai sklandžiai judėtų ir neišnyktų. Šiuo metodu patikrinama vaizdo rodinių x padėtis, o kai vienas išeina iš ekrano, jis iš naujo nustatomas į kitą pusę, leidžiantis tęsti ciklą. Be to, naudojant silpnas aš užbaigimo bloko viduje užtikrina, kad dėl stiprių atskaitos ciklų nebūtų atminties nutekėjimų, pagerinant programos našumą.

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

Besiūlės debesies animacijos kūrimas iOS

Norint animuoti besisukantį vaizdą, pvz., debesų dreifą iOS programoje, reikia atidžiai apsvarstyti vaizdinius efektus ir našumą. Kai bandote pasiekti begalinį ekrane judančių debesų kilpą, reikia atkreipti dėmesį į kelis pagrindinius elementus: laiką, kryptį ir rodinių valdymą. Vienas iš svarbiausių veiksnių, kad animacija būtų sklandi, yra efektyvus vaizdų tvarkymas, kad jie tiesiog neišnyktų ar neužstrigtų. Naudojant du UIImageView Animacijos pavyzdžiai padeda užtikrinti, kad debesys nuolat judėtų, net kai vienas vaizdas nukrypsta nuo ekrano, o kitas užima vietą. Labai svarbu užtikrinti, kad vaizdai būtų nustatyti iš naujo, kai jie perkeliami už ekrano krašto. Be šio nustatymo iš naujo animacija gali nutrūkti, todėl debesys išnyks arba kilpoje gali likti spragų.

Kitas svarbus animacijos aspektas yra rėmas.kilmė.x savybė, kuri naudojama debesies vaizdų padėčiai valdyti. Nustatydami horizontalią vaizdų padėtį skirtinguose pradžios taškuose, galite sukurti begalinio judėjimo iliuziją. Tačiau dažna problema iškyla, kai vienas vaizdas pasislenka iš ekrano ir nenustatomas į tinkamą padėtį. Tinkamas būdas yra aptikti, kada vaizdas pasislinko už ekrano krašto, tada pakeisti jo padėtį ir pradėti iš naujo kitoje pusėje. Naudodami animacijos bloką galite apibrėžti pasikartojančią ir nuolatinę animaciją, kuri užtikrina nuolatinį srautą. Kad judesys būtų sklandus, naudokite UIView.animate metodas su tokiomis parinktimis kaip .pakartokite kilpavimui ir .kreivėTiesinis vienodam greičiui.

Galiausiai, optimizuoti kodą, kad jis būtų našus ir sklandus, yra taip pat svarbu, kaip pasiekti vizualinį efektą. Turėtumėte kuo labiau sumažinti atminties naudojimą ir vengti nereikalingų skaičiavimų animacijos metu. Naudojant weak self nuorodos uždarymo animacijose padeda išvengti atminties nutekėjimo, nes išvengiama išsaugojimo ciklų. Be to, jei animacija sudėtinga arba jums reikia pažangesnių technikų, apsvarstykite galimybę naudoti CADisplayLink kadrų atnaujinimams realiuoju laiku, o tai leidžia geriau valdyti animacijos laiką ir sklandumą. Taip pat labai svarbu išbandyti animaciją skirtingų dydžių ir orientacijų ekranuose, nes tai padeda užtikrinti, kad animacija veiktų taip, kaip tikėtasi visuose įrenginiuose. 📱