Jak používat obrázky k vytvoření hladké animace opakování v iOS

Jak rozhýbat mraky navždy: Jednoduchá animace s opakováním v iOS

Při vývoji pro iOS mohou animace skutečně oživit aplikaci a přidat dynamický a poutavý prvek, který uživatelé milují. 🌥️ Jednou z běžných animací, které byste mohli chtít vytvořit, je hladký, smyčkový efekt, jako je pohyb mraků po obrazovce. Tato jednoduchá, ale vizuálně přitažlivá animace se často používá ve hrách, aplikacích počasí a dokonce i v osobních projektech k vytvoření uklidňující atmosféry. Pokud s animací v iOS začínáte, možná vás zajímá, jak to udělat bezproblémově a vyhnout se závadám.

Představte si, že otevřete aplikaci a okamžitě uvidíte, jak se po obrazovce jemně pohybují mraky, které vytvářejí dokonalé klidné pozadí. Tento druh efektu je dosažitelný pomocí animací `UIImageView` a `UIView` ve Swiftu. Základní myšlenkou je animovat stejný obrázek (v tomto případě mrak) vícekrát, aby se zdálo, že se neustále pohybuje. Není to však vždy tak snadné, jak se zdá. Existuje několik úskalí, s nimiž se vývojáři často potýkají, když se snaží animaci hladkou, zejména při práci s opakovanými obrázky.

Pokud jste se pokusili nastavit tento efekt a narazili jste na problémy, jako je pohyb mraků špatným směrem nebo mizení, nejste sami. Toto jsou běžné problémy, které pramení z nesprávného zpracování snímků nebo konfigurace animace. Ale nebojte se – tento průvodce vás provede kroky k vyřešení těchto problémů a zajistí, že vaše animace bude fungovat bez problémů. Stejně jako můj první pokus o animaci mraků, možná budete muset upravit pár věcí, než dosáhnete dokonalého výsledku. 😅

Nyní se pojďme ponořit do řešení, aby se tyto mraky pohybovaly v dokonalé smyčce. Pomocí dvou zobrazení obrázků a kouzla animace vytvoříte nekonečný, plynulý pohyb, díky kterému bude vaše aplikace vypadat hladce a uhlazeně. Jste připraveni opravit animaci a dostat ty mraky tak akorát? jdeme na to!

Jak funguje skript cloudové animace v iOS

Ve výše uvedeném příkladu skriptu je cílem vytvořit plynulou, nepřetržitou cloudovou animaci, která se bude nekonečně opakovat v aplikaci pro iOS. Hlavní myšlenkou je animovat dva UIImageView instance se stejným obrázkem cloudu a posouvají je vodorovně po obrazovce. To se provádí úpravou jejich polohy pomocí rámu původ.x vlastnost a použití animace na tyto pozice. Dva obrazové pohledy se používají tak, že když se jeden přesune z obrazovky, druhý je připraven zaujmout jeho místo a vytvoří efekt hladké smyčky. Animací pohybu obrazových pohledů můžete navodit iluzi, že mraky neustále plují po obloze. 🚀

Pojďme si rozebrat hlavní součásti kódu. Prvním krokem je vytvoření dvou obrazových pohledů, z nichž každý obsahuje stejný obraz mraků. Tyto obrazové pohledy jsou umístěny vedle sebe na obrazovce, přičemž druhý obrazový pohled začíná tam, kde končí první, a vytváří souvislý horizont. Toto nastavení je zásadní pro zajištění toho, že když první obraz dosáhne okraje obrazovky, druhý obraz bude připraven k převzetí. Pozice zobrazení obrazu se ovládají pomocí rám vlastnost, která definuje jak velikost, tak polohu pohledů v rámci nadřazeného pohledu. Každý pohled na obrázek začíná z jiné pozice x: jeden začíná na 0 a druhý začíná na šířce obrazovky.

Jakmile jsou zobrazení obrázků nastavena, dalším krokem je jejich animace. To se provádí pomocí UIView.animate funkce, která je zodpovědná za animaci pohledů v průběhu času. The UIView.animate Funkce přebírá několik parametrů: dobu trvání animace, jakékoli zpoždění před zahájením animace, možnosti animace (jako je opakování animace) a blok animací, které se mají použít. V tomto případě je délka animace nastavena na 20 sekund a animace je nastavena tak, aby se neustále opakovala pomocí tlačítka .opakovat volba. The .curveLinear Tato volba zajišťuje, že animace běží konstantní rychlostí a vytváří plynulý, lineární pohyb. Obrázky se posunují vodorovně odsazením původ.x podle šířky obrazovky.

Kód však může produkovat nežádoucí výsledky, jako je mizení obrázků nebo pohyb nesprávným směrem. Je to proto, že rám vlastnost se přímo upravuje bez resetování obrázků, když se přesunou mimo obrazovku. Řešením je použít metodu jako recyklovatClouds, která obnoví polohu zobrazení obrázků, když se přesunou za hranice obrazovky. Tím je zajištěno, že se snímky budou plynule opakovat, aniž by zmizely. Tato metoda kontroluje x-pozici obrazových pohledů, a když se jeden přesune mimo obrazovku, přestaví se na druhou stranu, což umožňuje pokračování smyčky. Navíc pomocí slabé já uvnitř bloku dokončení zajišťuje, že nedochází k únikům paměti kvůli silným referenčním cyklům, což zlepšuje výkon aplikace.

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áření bezproblémové cloudové animace v iOS

Animace opakujícího se obrázku, jako je unášení mraků v aplikaci pro iOS, vyžaduje pečlivé zvážení jak vizuálních efektů, tak výkonu. Když se snažíte dosáhnout nekonečné smyčky pohybujících se mraků po obrazovce, je třeba vyřešit několik klíčových prvků: načasování, směr a způsob správy zobrazení. Jedním z nejdůležitějších faktorů pro plynulost animace je efektivní zpracování zobrazení obrázků, aby jen tak nezmizely nebo se nezasekly. Pomocí dvou UIImageView instance pro animaci pomáhají zajistit, že se mraky zdají být neustále v pohybu, i když se jeden obrázek přesune mimo obrazovku a druhý zaujme jeho místo. Je důležité zajistit, aby byly obrázky resetovány, jakmile se přesunou za okraj obrazovky. Bez tohoto resetu se může animace přerušit, což způsobí, že mraky zmizí nebo zanechají mezery ve smyčce.

Dalším kritickým aspektem animace je rám.původ.x vlastnost, která se používá k ovládání pozice cloudových obrázků. Nastavením vodorovné polohy obrázků do různých počátečních bodů můžete vytvořit iluzi nekonečného pohybu. Běžný problém však nastává, když se jeden obrázek přesune mimo obrazovku a není resetován do správné polohy. Správný přístup je zjistit, kdy se obraz posunul za okraj obrazovky, a poté jej přemístit tak, aby začal znovu na druhé straně. Pomocí animačního bloku můžete definovat opakující se a nepřetržitou animaci, která zajišťuje konstantní tok. Abyste se ujistili, že pohyb je plynulý, použijte UIView.animate metoda s možnostmi jako .opakovat pro smyčkování a .curviLinear pro rovnoměrnou rychlost.

A konečně, optimalizace kódu pro výkon a plynulost je stejně důležitá jako dosažení vizuálního efektu. Měli byste minimalizovat využití paměti a vyhnout se zbytečným výpočtům během animace. Použití weak self odkazy v animacích založených na uzavření pomáhají předcházet únikům paměti tím, že se vyhýbají cyklům uchovávání. Navíc, pokud je animace složitá nebo pokud potřebujete pokročilejší techniky, zvažte použití CADisplayLink pro aktualizace snímků v reálném čase, což nabízí větší kontrolu nad načasováním a plynulostí animace. Testování animace na různých velikostech a orientacích obrazovky je také zásadní, protože pomáhá zajistit, aby animace fungovala podle očekávání na všech zařízeních. 📱