Jak używać obrazów do tworzenia płynnej animacji w pętli w systemie iOS

Jak sprawić, by chmury poruszały się na zawsze: prosta animacja w pętli w systemie iOS

Podczas tworzenia aplikacji na iOS animacje mogą naprawdę ożywić aplikację, dodając dynamiczny i wciągający element, który użytkownicy uwielbiają. 🌥️ Jedną z typowych animacji, które warto utworzyć, jest płynny, zapętlony efekt, przypominający przesuwające się chmury po ekranie. Ta prosta, ale atrakcyjna wizualnie animacja jest często używana w grach, aplikacjach pogodowych, a nawet w osobistych projektach, aby stworzyć uspokajającą atmosferę. Jeśli dopiero zaczynasz przygodę z animacją w systemie iOS, być może zastanawiasz się, jak sprawić, by była ona płynna i uniknęła błędów.

Wyobraź sobie, że otwierasz aplikację i od razu widzisz chmury delikatnie przesuwające się po ekranie, tworząc idealne, spokojne tło. Ten rodzaj efektu można osiągnąć za pomocą animacji `UIImageView` i `UIView` w Swift. Podstawową ideą jest wielokrotna animacja tego samego obrazu (w tym przypadku chmury), tak aby sprawiał wrażenie, jakby się poruszał w sposób ciągły. Jednak nie zawsze jest to tak proste, jak się wydaje. Istnieje kilka pułapek, na które często napotykają programiści, próbując zapewnić płynność animacji, szczególnie w przypadku powtarzających się obrazów.

Jeśli próbowałeś ustawić ten efekt i napotkałeś problemy, takie jak chmury poruszające się w złym kierunku lub znikające, nie jesteś sam. Są to typowe problemy, które wynikają z nieprawidłowej obsługi klatek lub konfiguracji animacji. Ale nie martw się — ten przewodnik przeprowadzi Cię przez kolejne kroki, aby rozwiązać te problemy, zapewniając płynne działanie animacji. Podobnie jak w przypadku mojej pierwszej próby animowania chmur, być może będziesz musiał dostosować kilka rzeczy, zanim uzyskasz idealny efekt. 😅

Teraz przyjrzyjmy się rozwiązaniu, które sprawi, że chmury poruszają się w idealnej pętli. Używając dwóch widoków obrazu i odrobiny magii animacji, stworzysz niekończący się, płynny ruch, dzięki któremu Twoja aplikacja będzie wyglądać gładko i elegancko. Gotowy, aby naprawić animację i sprawić, by chmury dryfowały tak, jak powinny? Chodźmy!

Jak działa skrypt animacji w chmurze w systemie iOS

W przykładzie skryptu podanym powyżej celem jest utworzenie płynnej, ciągłej animacji chmury, która będzie zapętlać się w nieskończoność w aplikacji na iOS. Główną ideą jest animacja dwóch UIImageView instancje z tym samym obrazem chmury, przesuwając je poziomo po ekranie. Odbywa się to poprzez regulację ich położenia za pomocą ramy pochodzenie.x właściwość i zastosowanie animacji do tych pozycji. Wykorzystywane są dwa widoki obrazu, dzięki czemu gdy jeden wyjdzie z ekranu, drugi jest gotowy zająć jego miejsce, tworząc efekt płynnej pętli. Animując ruch widoków obrazu, możesz stworzyć złudzenie, że chmury stale dryfują po niebie. 🚀

Rozłóżmy główne elementy kodu. Pierwszym krokiem jest utworzenie dwóch widoków obrazu, z których każdy zawiera ten sam obraz chmur. Te widoki obrazów są umieszczane obok siebie na ekranie, przy czym drugi widok obrazu zaczyna się w miejscu, w którym kończy się pierwszy, tworząc ciągły horyzont. Ta konfiguracja ma kluczowe znaczenie, aby zapewnić, że gdy pierwszy widok obrazu dotrze do krawędzi ekranu, drugi widok obrazu będzie gotowy do przejęcia. Położenie widoków obrazu jest kontrolowane za pomocą rama właściwość, która definiuje zarówno rozmiar, jak i położenie widoków w widoku nadrzędnym. Każdy widok obrazu zaczyna się od innej pozycji x: jeden zaczyna się od 0, a drugi od szerokości ekranu.

Po skonfigurowaniu widoków obrazów następnym krokiem jest ich animacja. Odbywa się to za pomocą UIView.animate funkcję, która odpowiada za animację widoków w czasie. The UIView.animate funkcja przyjmuje kilka parametrów: czas trwania animacji, ewentualne opóźnienie przed rozpoczęciem animacji, opcje animacji (takie jak powtarzanie animacji) oraz blok animacji, który ma zostać zastosowany. W tym przypadku czas trwania animacji jest ustawiony na 20 sekund, a animacja ma być powtarzana w nieskończoność za pomocą przycisku .powtarzać opcja. The .curveLinear Opcja zapewnia, że ​​animacja przebiega ze stałą prędkością, tworząc płynny, liniowy ruch. Obrazy są przesuwane w poziomie poprzez ich przesunięcie pochodzenie.x według szerokości ekranu.

Jednak kod może dawać niepożądane skutki, takie jak znikanie obrazów lub przesuwanie się w złym kierunku. Dzieje się tak dlatego, że rama właściwość jest bezpośrednio modyfikowana bez resetowania obrazów, gdy przesuwają się one poza ekran. Rozwiązaniem jest użycie metody takiej jak przetwarzaćChmury, która resetuje położenie widoków obrazu, gdy wykraczają one poza granice ekranu. Dzięki temu obrazy płynnie się zapętlają i nie znikają. Ta metoda sprawdza położenie x widoków obrazu, a gdy jeden z nich wyjdzie poza ekran, jest resetowany na drugą stronę, umożliwiając kontynuację pętli. Dodatkowo za pomocą słabe ja wewnątrz bloku uzupełniania zapewnia brak wycieków pamięci z powodu silnych cykli referencyjnych, poprawiając wydajność aplikacji.

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

Tworzenie płynnej animacji chmur w systemie iOS

Animowanie zapętlonego obrazu, na przykład dryfu chmury w aplikacji na iOS, wymaga dokładnego rozważenia zarówno efektów wizualnych, jak i wydajności. Kiedy próbujesz uzyskać nieskończoną pętlę poruszających się chmur po ekranie, musisz uwzględnić kilka kluczowych elementów: czas, kierunek i sposób zarządzania widokami. Jednym z najważniejszych czynników zapewniających płynność animacji jest efektywne zarządzanie widokami obrazów, tak aby nie znikały lub nie utknęły. Używając dwóch UIImageView instancje animacji pomagają zapewnić, że chmury wydają się stale poruszać, nawet gdy jeden obraz przesuwa się poza ekran, a drugi zajmuje jego miejsce. Ważne jest, aby upewnić się, że obrazy zostaną zresetowane po przekroczeniu krawędzi ekranu. Bez tego resetu animacja może się przerwać, powodując zniknięcie chmur lub pozostawienie luk w pętli.

Kolejnym krytycznym aspektem animacji jest ramka.pochodzenie.x właściwość, która służy do kontrolowania położenia obrazów w chmurze. Ustawiając poziomą pozycję obrazów w różnych punktach początkowych, możesz stworzyć iluzję nieskończonego ruchu. Jednak częstym problemem pojawia się, gdy jeden obraz przesuwa się poza ekran i nie zostaje zresetowany do prawidłowego położenia. Prawidłowe podejście polega na wykryciu, kiedy obraz przesunął się poza krawędź ekranu, a następnie zmianie jego położenia, aby rozpocząć od drugiej strony. Za pomocą bloku animacji możesz zdefiniować powtarzającą się i ciągłą animację, która zapewni stały przepływ. Aby mieć pewność, że ruch jest płynny, użyj przycisku UIView.animate metoda z opcjami takimi jak .powtarzać do zapętlania i .krzywolinijny dla równomiernej prędkości.

Wreszcie optymalizacja kodu pod kątem wydajności i płynności jest tak samo ważna, jak osiągnięcie efektu wizualnego. Należy zminimalizować zużycie pamięci i unikać niepotrzebnych obliczeń podczas animacji. Używanie weak self odniesienia w animacjach opartych na zamknięciach pomagają zapobiegać wyciekom pamięci, unikając cykli przechowywania. Dodatkowo, jeśli animacja jest skomplikowana lub potrzebujesz bardziej zaawansowanych technik, rozważ użycie CADisplayLink do aktualizacji klatek w czasie rzeczywistym, co zapewnia większą kontrolę nad czasem i płynnością animacji. Testowanie animacji na ekranach o różnych rozmiarach i orientacjach jest również kluczowe, ponieważ pomaga upewnić się, że animacja działa zgodnie z oczekiwaniami na wszystkich urządzeniach. 📱