Ako používať obrázky na vytvorenie hladkej animácie s opakovaním v systéme iOS

Ako prinútiť mraky, aby sa navždy pohybovali: Jednoduchá animácia s opakovaním v systéme iOS

Pri vývoji pre iOS môžu animácie skutočne oživiť aplikáciu a pridať dynamický a pútavý prvok, ktorý používatelia milujú. 🌥️ Jednou z bežných animácií, ktoré by ste mohli chcieť vytvoriť, je plynulý, opakujúci sa efekt, ako napríklad pohyb oblakov po obrazovke. Táto jednoduchá, ale vizuálne príťažlivá animácia sa často používa v hrách, aplikáciách počasia a dokonca aj v osobných projektoch na vytvorenie upokojujúcej atmosféry. Ak ste v animácii v systéme iOS nováčikom, možno vás zaujíma, ako ju zabezpečiť bezproblémovou a vyhnúť sa chybám.

Predstavte si, že otvoríte aplikáciu a okamžite uvidíte, ako sa po obrazovke jemne pohybujú oblaky, ktoré vytvárajú dokonalé pokojné pozadie. Tento druh efektu je možné dosiahnuť pomocou animácií `UIImageView` a `UIView` v Swift. Základnou myšlienkou je animovať ten istý obrázok (v tomto prípade oblak) viackrát, aby sa zdalo, že sa neustále pohybuje. Nie je to však vždy také jednoduché, ako sa zdá. Existuje niekoľko úskalí, s ktorými sa vývojári často stretávajú, keď sa snažia dosiahnuť plynulosť animácie, najmä keď sa zaoberajú opakovanými obrázkami.

Ak ste sa pokúsili nastaviť tento efekt a narazili ste na problémy, ako je pohyb oblakov nesprávnym smerom alebo zmiznutie, nie ste sami. Toto sú bežné problémy, ktoré pramenia z nesprávneho spracovania snímok alebo konfigurácie animácie. Ale nebojte sa – táto príručka vás prevedie krokmi na vyriešenie týchto problémov a zabezpečí, že vaša animácia bude fungovať bez problémov. Rovnako ako môj prvý pokus o animáciu oblakov, možno budete musieť upraviť niekoľko vecí, kým dosiahnete dokonalý výsledok. 😅

Teraz sa poďme ponoriť do riešenia, aby sa tieto oblaky pohybovali v dokonalej slučke. Použitím dvoch zobrazení obrázkov a trochou mágie animácií vytvoríte nekonečný, plynulý pohyb, vďaka ktorému bude vaša aplikácia vyzerať hladko a uhladene. Ste pripravení opraviť animáciu a nechať tie oblaky správne unášať? poďme na to!

Ako funguje cloudový animačný skript v systéme iOS

Vo vyššie uvedenom príklade skriptu je cieľom vytvoriť plynulú, nepretržitú cloudovú animáciu, ktorá sa bude nekonečne opakovať v aplikácii pre iOS. Hlavnou myšlienkou je animovať dvoch UIImageView inštancie s rovnakým obrázkom oblaku a posúvajte ich horizontálne po obrazovke. To sa dosiahne úpravou ich polohy pomocou rámčeka pôvod.x a aplikovanie animácie na tieto pozície. Dva obrazové zobrazenia sa používajú tak, že keď sa jeden presunie z obrazovky, druhý je pripravený zaujať jeho miesto, čím sa vytvorí efekt plynulej slučky. Animáciou pohybu záberov môžete vyvolať ilúziu, že oblaky neustále plávajú po oblohe. 🚀

Poďme si rozobrať hlavné zložky kódu. Prvým krokom je vytvorenie dvoch obrázkových pohľadov, z ktorých každý obsahuje rovnaký obrázok oblakov. Tieto zobrazenia obrázkov sú umiestnené vedľa seba na obrazovke, pričom druhé zobrazenie obrázka začína tam, kde končí prvé, čím sa vytvára súvislý horizont. Toto nastavenie je kľúčové, aby sa zabezpečilo, že keď prvý obraz dosiahne okraj obrazovky, druhý obraz bude pripravený prevziať kontrolu. Pozície zobrazení obrázkov sa ovládajú pomocou rám vlastnosť, ktorá definuje veľkosť aj polohu pohľadov v rámci nadradeného pohľadu. Každý pohľad na obrázok začína z inej polohy x: jeden začína na 0 a druhý začína na šírke obrazovky.

Keď sú zobrazenia obrázkov nastavené, ďalším krokom je ich animácia. Toto sa robí pomocou UIView.animate funkcia, ktorá je zodpovedná za animáciu pohľadov v priebehu času. The UIView.animate Funkcia má niekoľko parametrov: trvanie animácie, oneskorenie pred spustením animácie, možnosti animácie (napríklad opakovanie animácie) a blok animácií, ktoré sa majú použiť. V tomto prípade je trvanie animácie nastavené na 20 sekúnd a animácia je nastavená tak, aby sa neustále opakovala pomocou tlačidla .opakovať možnosť. The .curveLinear voľba zaisťuje, že animácia beží konštantnou rýchlosťou a vytvára plynulý, lineárny pohyb. Obrázky sa posúvajú horizontálne odsadením pôvod.x podľa šírky obrazovky.

Kód však môže spôsobiť nežiaduce výsledky, ako napríklad zmiznutie obrázkov alebo pohyb v nesprávnom smere. Je to preto, že rám vlastnosť sa priamo upravuje bez resetovania obrázkov, keď sa presunú mimo obrazovku. Riešením je použiť metódu ako napr recyklovaťClouds, ktorý obnoví polohu zobrazení obrázkov, keď sa presunú za hranice obrazovky. To zaisťuje, že obrázky sa budú plynule opakovať bez toho, aby zmizli. Táto metóda kontroluje x-pozíciu zobrazení obrázkov a keď sa jeden presunie mimo obrazovku, prestaví sa na druhú stranu, čo umožní pokračovať v slučke. Okrem toho pomocou slabé ja vnútri bloku dokončenia zaisťuje, že nedochádza k únikom pamäte v dôsledku silných referenčných cyklov, čím sa zlepšuje výkon aplikácie.

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

Vytváranie bezproblémovej cloudovej animácie v systéme iOS

Animácia opakujúceho sa obrazu, ako je pohyb oblakov v aplikácii pre iOS, si vyžaduje starostlivé zváženie vizuálnych efektov aj výkonu. Keď sa snažíte dosiahnuť nekonečnú slučku pohybujúcich sa oblakov po obrazovke, je potrebné vyriešiť niekoľko kľúčových prvkov: načasovanie, smer a spôsob riadenia zobrazení. Jedným z najdôležitejších faktorov na to, aby bola vaša animácia hladká, je efektívne zaobchádzať so zobrazeniami obrázkov, aby len tak nezmizli alebo neuviazli. Pomocou dvoch UIImageView inštancie pre animáciu pomáhajú zabezpečiť, aby sa oblaky zdajú byť neustále v pohybe, aj keď sa jeden obrázok presunie mimo obrazovku a druhý zaujme jeho miesto. Je dôležité zabezpečiť, aby sa obrázky resetovali, keď sa presunú za okraj obrazovky. Bez tohto resetu sa animácia môže zlomiť, čo spôsobí, že mraky zmiznú alebo zanechajú medzery v slučke.

Ďalším kritickým aspektom animácie je rám.pôvod.x vlastnosť, ktorá sa používa na ovládanie polohy obrázkov cloudu. Nastavením horizontálnej polohy obrázkov na rôzne počiatočné body môžete vytvoriť ilúziu nekonečného pohybu. Bežný problém však nastáva, keď sa jeden obrázok presunie mimo obrazovku a nevráti sa do správnej polohy. Správny prístup je zistiť, kedy sa obraz presunul za okraj obrazovky, a potom ho premiestniť tak, aby začal znova na druhej strane. Pomocou animačného bloku môžete definovať opakujúcu sa a nepretržitú animáciu, ktorá zaisťuje konštantný tok. Aby ste sa uistili, že pohyb je plynulý, použite UIView.animate metóda s možnosťami ako .opakovať pre slučkovanie a .curveLinear pre rovnomernú rýchlosť.

Nakoniec, optimalizácia vášho kódu z hľadiska výkonu a plynulosti je rovnako dôležitá ako dosiahnutie vizuálneho efektu. Mali by ste minimalizovať využitie pamäte a vyhnúť sa zbytočným výpočtom počas animácie. Používanie weak self odkazy v animáciách založených na uzavretí pomáhajú predchádzať únikom pamäte tým, že sa vyhýbajú cyklom uchovávania. Okrem toho, ak je animácia zložitá alebo ak potrebujete pokročilejšie techniky, zvážte použitie CADisplayLink pre aktualizácie snímok v reálnom čase, čo ponúka väčšiu kontrolu nad načasovaním a plynulosťou animácie. Testovanie animácie na rôznych veľkostiach a orientáciách obrazovky je tiež kľúčové, pretože pomáha zabezpečiť, aby animácia fungovala podľa očakávania na všetkých zariadeniach. 📱