Hogyan használjunk képeket egy sima hurkolt animáció elkészítéséhez iOS rendszeren

Hogyan tegyük a felhőket örökké mozgatni: Egy egyszerű hurkolt animáció iOS-en

Az iOS-fejlesztés során az animációk valóban életre kelthetik az alkalmazásokat, és hozzáadnak egy dinamikus és vonzó elemet, amelyet a felhasználók szeretnek. 🌥️ Az egyik gyakori animáció, amelyet érdemes létrehozni, egy sima, hurkolt effektus, például felhők mozgatása a képernyőn. Ezt az egyszerű, mégis tetszetős animációt gyakran használják játékokban, időjárás-alkalmazásokban és még személyes projektekben is, hogy megnyugtató légkört teremtsenek. Ha még nem ismeri az animációt az iOS rendszerben, akkor azon töprenghet, hogyan teheti ezt zökkenőmentessé és elkerülheti a hibákat.

Képzelje el, hogy megnyit egy alkalmazást, és azonnal látja, hogy a felhők finoman sodródnak a képernyőn, tökéletes nyugodt hátteret hozva létre. Ez a fajta hatás érhető el a Swift "UIImageView" és "UIView" animációival. Az alapötlet az, hogy ugyanazt a képet (jelen esetben a felhőt) többször animálják, hogy úgy tűnjön, mintha folyamatosan mozogna. Ez azonban nem mindig olyan egyszerű, mint amilyennek látszik. Van néhány buktató, amelyekkel a fejlesztők gyakran találkoznak, amikor megpróbálják simává tenni az animációt, különösen, ha ismétlődő képekkel foglalkoznak.

Ha megpróbálta beállítani ezt a hatást, és olyan problémákba ütközött, mint a felhők rossz irányba mozdulása vagy eltűnése, akkor nincs egyedül. Ezek gyakori problémák, amelyek a képkocka helytelen kezeléséből vagy az animáció konfigurációjából erednek. De ne aggódjon – ez az útmutató végigvezeti Önt a problémák megoldásának lépésein, biztosítva, hogy az animáció zökkenőmentesen működjön. Csakúgy, mint az első kísérletem a felhők animálására, előfordulhat, hogy néhány dolgot módosítania kell a tökéletes eredmény elérése előtt. 😅

Most merüljünk el a megoldásban, hogy ezek a felhők tökéletes körben mozogjanak. Két képnézet és egy kis animációs varázslat használatával végtelen, gördülékeny mozgást hoz létre, amely sima és csiszolt megjelenést biztosít az alkalmazásnak. Készen állsz az animáció kijavítására, hogy a felhők megfelelően sodródjanak? Menjünk!

Hogyan működik a Cloud Animation Script iOS rendszerben

A fenti szkriptpéldában a cél egy sima, folyamatos felhőanimáció létrehozása, amely végtelenül körbefut egy iOS-alkalmazásban. A fő ötlet két animáció UIImageView példányok ugyanazt a felhőképet, vízszintesen mozgatva őket a képernyőn. Ez úgy történik, hogy a keret segítségével módosítják a helyzetüket eredet.x tulajdonságot és az animációt ezekre a pozíciókra. A két képnézetet úgy használjuk, hogy amikor az egyik kimozdul a képernyőről, a másik készen áll a helyére, ami egy zökkenőmentes hurok hatását kelti. A képnézetek mozgásának animálásával azt az illúziót keltheti, hogy a felhők folyamatosan sodródnak az égen. 🚀

Bontsuk fel a kód fő összetevőit. Az első lépés a két képnézet létrehozása, amelyek mindegyike ugyanazt a felhőképet tartalmazza. Ezek a képnézetek egymás mellett helyezkednek el a képernyőn, és a második képnézet ott kezdődik, ahol az első véget ér, és egy folyamatos horizontot hoz létre. Ez a beállítás kulcsfontosságú annak biztosításához, hogy amikor az első kép nézet eléri a képernyő szélét, a második kép nézet készen áll az irányításra. A képnézetek pozíciói a gombbal szabályozhatók keret tulajdonság, amely meghatározza a nézetek méretét és pozícióját a szülőnézeten belül. Minden képnézet más x pozícióból indul: az egyik 0-tól, a másik a képernyő szélességétől kezdődik.

A képnézetek beállítása után a következő lépés az animáció. Ez a UIView.animate funkció, amely a nézetek időbeli animálásáért felelős. A UIView.animate A funkció több paramétert igényel: az animáció időtartamát, az animáció indítása előtti késleltetést, az animációs beállításokat (például az animáció megismétlését) és az alkalmazni kívánt animációk blokkját. Ebben az esetben az animáció időtartama 20 másodpercre van beállítva, és az animáció örökre ismétlődik a .ismétlés opció. A .görbe vonalú opció biztosítja, hogy az animáció állandó sebességgel fusson, sima, lineáris mozgást hozva létre. A képeket vízszintesen eltoljuk eredet.x a képernyő szélességével.

A kód azonban nemkívánatos eredményeket produkálhat, például a képek eltűnését vagy rossz irányba való mozgását. Ez azért van, mert a keret A tulajdonság közvetlenül módosul anélkül, hogy visszaállítaná a képeket, amikor azok elmozdulnak a képernyőről. A megoldás egy olyan módszer alkalmazása, mint pl recycleClouds, amely visszaállítja a képnézetek pozícióját, amikor azok túllépnek a képernyő határain. Ez biztosítja, hogy a képek zökkenőmentesen, anélkül, hogy eltűnnének. Ez a módszer ellenőrzi a képnézetek x-pozícióját, és amikor az egyik elmozdul a képernyőről, visszaáll a másik oldalra, lehetővé téve a hurok folytatását. Ezen túlmenően, használatával gyenge én a befejezési blokkon belül biztosítja, hogy ne legyenek memóriaszivárgások az erős referenciaciklusok miatt, javítva az alkalmazás teljesítményét.

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

Zökkenőmentes felhőanimáció létrehozása iOS rendszeren

A hurkolt kép animálásához, például egy felhősodródáshoz egy iOS-alkalmazásban, a vizuális effektusok és a teljesítmény alapos mérlegelése szükséges. Amikor a képernyőn mozgó felhők végtelen hurkát próbálja elérni, néhány kulcsfontosságú elemet kell kezelni: az időzítést, az irányt és a nézetek kezelésének módját. Az egyik legfontosabb tényező az animáció zökkenőmentessé tételében az, hogy hatékonyan kezelje a képnézeteket, hogy azok ne tűnjenek el vagy ne ragadjanak el. Kettőt használva UIImageView Az animációs példányok segítségével biztosítható, hogy a felhők folyamatosan mozogjanak, még akkor is, ha az egyik kép elmozdul a képernyőről, a másik pedig a helyére kerül. Elengedhetetlen annak biztosítása, hogy a képek alaphelyzetbe álljanak, amint túllépnek a képernyő szélén. Az alaphelyzetbe állítás nélkül az animáció megszakadhat, amitől a felhők eltűnnek, vagy rések maradnak a hurokban.

Az animáció másik kritikus aspektusa a keret.eredet.x tulajdonság, amely a felhőképek helyzetének szabályozására szolgál. A képek vízszintes helyzetének különböző kiindulási pontokban történő beállításával a végtelen mozgás illúzióját keltheti. Gyakori probléma azonban akkor merül fel, ha egy kép elmozdul a képernyőről, és nem áll vissza a megfelelő pozícióba. A helyes megközelítés az, hogy észleli, ha a kép elmozdult a képernyő szélén, majd áthelyezi, hogy a másik oldalon kezdje újra. Egy animációs blokk segítségével ismétlődő és folyamatos animációt határozhat meg, amely biztosítja az állandó áramlást. Annak érdekében, hogy a mozgás egyenletes legyen, használja a UIView.animate módszer olyan opciókkal, mint .ismétlés hurkoláshoz és .görbeLineáris egyenletes sebességért.

Végül, a kód optimalizálása a teljesítmény és a simaság érdekében ugyanolyan fontos, mint a vizuális hatás elérése. Minimalizálja a memóriahasználatot, és kerülje a felesleges számításokat az animáció során. Használata weak self A bezárás alapú animációkban található hivatkozások segítenek megelőzni a memóriaszivárgást azáltal, hogy elkerülik a megőrzési ciklusokat. Ezenkívül, ha az animáció összetett, vagy ha fejlettebb technikákra van szüksége, fontolja meg annak használatát CADisplayLink a valós idejű képkockafrissítésekhez, amely nagyobb szabályozást kínál az animáció időzítése és simasága felett. Az animáció különböző méretű és tájolású képernyőkön történő tesztelése szintén kulcsfontosságú, mivel ez segít abban, hogy az animáció a várt módon működjön minden eszközön. 📱