Како користити слике за прављење глатке анимације петље у иОС-у

Како учинити да се облаци заувек крећу: Једноставна анимација у облику петље у иОС-у

У развоју иОС-а, анимације могу заиста да оживе апликацију, додајући динамичан и занимљив елемент који корисници воле. 🌥 Једна уобичајена анимација коју бисте можда желели да направите је глатки ефекат петље, попут кретања облака преко екрана. Ова једноставна, али визуелно привлачна анимација се често користи у игрицама, апликацијама за временску прогнозу, па чак иу личним пројектима како би се створила умирујућа атмосфера. Ако сте нови у анимацији у иОС-у, можда се питате како да је учините беспрекорном и избегнете грешке.

Замислите да отворите апликацију и одмах видите облаке како нежно лебде преко екрана, стварајући савршену спокојну позадину. Овакав ефекат се може постићи коришћењем `УИИмагеВиев` и `УИВиев` анимација у Свифт-у. Основна идеја је да се иста слика (у овом случају облак) анимира више пута тако да изгледа да се непрекидно креће. Међутим, није увек тако лако као што се чини. Постоји неколико замки са којима се програмери често сусрећу када покушавају да учине анимацију глатком, посебно када се баве сликама које се понављају.

Ако сте покушали да подесите овај ефекат и наишли сте на проблеме као што су облаци који се крећу у погрешном смеру или нестају, нисте сами. Ово су уобичајени проблеми који произилазе из нетачног руковања оквиром или конфигурације анимације. Али не брините – овај водич ће вас провести кроз кораке за решавање ових проблема, обезбеђујући да ваша анимација функционише беспрекорно. Баш као и мој први покушај да анимирам облаке, можда ћете морати да прилагодите неколико ствари пре него што добијете савршен резултат. 😅

Сада, хајде да заронимо у решење да се ти облаци крећу у савршеној петљи. Користећи два приказа слике и мало магије анимације, створићете бесконачан, течан покрет који ће одржати да ваша апликација изгледа глатко и углађено. Спремни да поправите анимацију и натерате те облаке да лебде како треба? Идемо!

Како функционише скрипта анимације у облаку у иОС-у

У горе наведеном примеру скрипте, циљ је креирање глатке, континуиране анимације у облаку која се бесконачно врти у иОС апликацији. Главна идеја је да анимирате двоје УИИмагеВиев инстанце са истом сликом облака, померајући их хоризонтално преко екрана. Ово се ради подешавањем њихових позиција помоћу оквира порекло.к својства и примену анимације на ове позиције. Два приказа слике се користе тако да када се један помери са екрана, други је спреман да заузме своје место, стварајући ефекат бешавне петље. Анимирањем кретања приказа слике можете створити илузију да облаци непрестано лебде по небу. 🚀

Хајде да разложимо главне компоненте кода. Први корак је креирање два приказа слике, од којих сваки има исту слику облака. Ови прикази слике су постављени један поред другог на екрану, при чему други приказ слике почиње тамо где се први завршава, стварајући непрекидан хоризонт. Ово подешавање је кључно да би се осигурало да када први приказ слике стигне до ивице екрана, други приказ слике буде спреман да преузме. Положаји приказа слике се контролишу помоћу оквир својство, које дефинише и величину и позицију погледа у оквиру надређеног погледа. Сваки приказ слике почиње са различите к позиције: један почиње од 0, а други почиње на ширини екрана.

Када су прикази слика постављени, следећи корак је да их анимирате. Ово се ради са УИВиев.анимате функција, која је одговорна за анимирање погледа током времена. Тхе УИВиев.анимате функција узима неколико параметара: трајање анимације, свако кашњење пре него што анимација почне, опције анимације (као што је понављање анимације) и блок анимација који треба применити. У овом случају, трајање анимације је подешено на 20 секунди, а анимација је подешена да се понавља заувек користећи .поновити опција. Тхе .цурвеЛинеар опција осигурава да анимација ради константном брзином, стварајући глатко, линеарно кретање. Слике се померају хоризонтално померањем порекло.к по ширини екрана.

Међутим, код може произвести нежељене резултате, као што је нестанак слика или кретање у погрешном смеру. Ово је зато што оквир својство се директно мења без ресетовања слика када се померају са екрана. Решење је коришћење методе као што је рецицлеЦлоудс, који ресетује позицију приказа слике када се померају изван граница екрана. Ово осигурава да се слике неометано окрећу, без нестанка. Овај метод проверава к-позицију приказа слике, а када се један помери са екрана, он се ресетује на другу страну, омогућавајући да се петља настави. Поред тога, коришћењем слабог себе унутар блока за завршетак осигурава да нема цурења меморије због јаких референтних циклуса, побољшавајући перформансе апликације.

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

Креирање бешавне анимације у облаку у иОС-у

Анимирање слике у облику петље, попут померања облака у иОС апликацији, захтева пажљиво разматрање и визуелних ефеката и перформанси. Када покушавате да постигнете бесконачну петљу облака који се померају преко екрана, постоји неколико кључних елемената на које треба обратити пажњу: време, правац и начин управљања приказима. Један од најважнијих фактора за глатку анимацију је ефикасно руковање приказима слика како они не би само нестали или се заглавили. Користећи два УИИмагеВиев инстанце за анимацију помаже да се обезбеди да се облаци стално крећу, чак и када се једна слика помери са екрана, а друга заузме њено место. Неопходно је обезбедити да се слике ресетују када пређу преко ивице екрана. Без овог ресетовања, анимација се може прекинути, узрокујући да облаци нестану или да оставе празнине у петљи.

Још један критичан аспект анимације укључује фраме.оригин.к својство, које се користи за контролу положаја слика у облаку. Постављањем хоризонталног положаја слике на различите почетне тачке, можете створити илузију бесконачног кретања. Међутим, чест проблем настаје када се једна слика помери са екрана и не врати се на исправну позицију. Исправан приступ је да се открије када је слика прешла ивицу екрана, а затим је поново поставите да би поново почела са друге стране. Користећи блок анимације, можете дефинисати понављајућу и континуирану анимацију која обезбеђује константан ток. Да бисте били сигурни да је кретање глатко, користите УИВиев.анимате метод са опцијама попут .поновити за петљу и .цурвиЛинеар за равномерну брзину.

Коначно, оптимизација вашег кода за перформансе и глаткоћу је једнако важна као и постизање визуелног ефекта. Требало би да минимизирате употребу меморије и избегавате непотребна израчунавања током анимације. Коришћење weak self референце у анимацијама заснованим на затварању помажу у спречавању цурења меморије избегавањем циклуса задржавања. Поред тога, ако је анимација сложена или су вам потребне напредније технике, размислите о коришћењу CADisplayLink за ажурирања оквира у реалном времену, што нуди већу контролу над временом и глаткоћом анимације. Тестирање анимације на различитим величинама и оријентацијама екрана је такође кључно, јер помаже да се осигура да анимација ради како се очекује на свим уређајима. 📱