Τρόπος χρήσης εικόνων για δημιουργία κινούμενων εικόνων με ομαλή επαναφορά στο iOS

Πώς να κάνετε τα σύννεφα να κινούνται για πάντα: Ένα απλό κινούμενο σχέδιο στο iOS

Στην ανάπτυξη iOS, τα κινούμενα σχέδια μπορούν πραγματικά να ζωντανέψουν μια εφαρμογή, προσθέτοντας ένα δυναμικό και ελκυστικό στοιχείο που αγαπούν οι χρήστες. 🌥️ Ένα κοινό κινούμενο σχέδιο που μπορεί να θέλετε να δημιουργήσετε είναι ένα ομαλό εφέ με επαναφορά, όπως η κίνηση των σύννεφων στην οθόνη. Αυτό το απλό αλλά οπτικά ελκυστικό κινούμενο σχέδιο χρησιμοποιείται συχνά σε παιχνίδια, εφαρμογές καιρού, ακόμη και σε προσωπικά έργα για να δημιουργήσει μια χαλαρωτική ατμόσφαιρα. Εάν είστε νέοι στα κινούμενα σχέδια στο iOS, ίσως αναρωτιέστε πώς να το κάνετε απρόσκοπτα και να αποφύγετε δυσλειτουργίες.

Φανταστείτε να ανοίγετε μια εφαρμογή και να βλέπετε αμέσως σύννεφα να παρασύρονται απαλά στην οθόνη, δημιουργώντας το τέλειο γαλήνιο φόντο. Αυτό το είδος εφέ μπορεί να επιτευχθεί χρησιμοποιώντας κινούμενα σχέδια «UIImageView» και «UIView» στο Swift. Η βασική ιδέα είναι να κινούμε την ίδια εικόνα (το σύννεφο σε αυτήν την περίπτωση) πολλές φορές, έτσι ώστε να φαίνεται ότι κινείται συνεχώς. Ωστόσο, δεν είναι πάντα τόσο εύκολο όσο φαίνεται. Υπάρχουν μερικές παγίδες που αντιμετωπίζουν συχνά οι προγραμματιστές όταν προσπαθούν να κάνουν το κινούμενο σχέδιο ομαλό, ειδικά όταν ασχολούνται με επαναλαμβανόμενες εικόνες.

Εάν δοκιμάσατε να ρυθμίσετε αυτό το εφέ και αντιμετωπίσατε προβλήματα όπως τα σύννεφα που κινούνται προς τη λάθος κατεύθυνση ή εξαφανίζονται, δεν είστε μόνοι. Αυτά είναι κοινά προβλήματα που προέρχονται από λανθασμένο χειρισμό καρέ ή λανθασμένη διαμόρφωση κινούμενων εικόνων. Αλλά μην ανησυχείτε—αυτός ο οδηγός θα σας καθοδηγήσει στα βήματα για την επίλυση αυτών των προβλημάτων, διασφαλίζοντας ότι η κινούμενη εικόνα σας λειτουργεί απρόσκοπτα. Ακριβώς όπως η πρώτη μου απόπειρα να ζωντανέψω σύννεφα, ίσως χρειαστεί να προσαρμόσετε μερικά πράγματα προτού λάβετε το τέλειο αποτέλεσμα. 😅

Τώρα, ας βουτήξουμε στη λύση για να κάνουμε αυτά τα σύννεφα να κινούνται σε έναν τέλειο βρόχο. Χρησιμοποιώντας δύο προβολές εικόνας και λίγη μαγεία κινούμενων εικόνων, θα δημιουργήσετε μια ατελείωτη, ρευστή κίνηση που θα κρατήσει την εφαρμογή σας ομαλή και γυαλισμένη. Είστε έτοιμοι να διορθώσετε το animation και να κάνετε αυτά τα σύννεφα να παρασύρονται σωστά; Πάμε!

Πώς λειτουργεί το σενάριο του Cloud Animation στο iOS

Στο παράδειγμα σεναρίου που παρέχεται παραπάνω, ο στόχος είναι να δημιουργήσετε μια ομαλή, συνεχή κινούμενη εικόνα στο cloud που θα εμφανίζεται άπειρα σε μια εφαρμογή iOS. Η κύρια ιδέα είναι να εμψυχώσετε δύο UIImageView στιγμιότυπα με την ίδια εικόνα cloud, μετακινώντας τα οριζόντια στην οθόνη. Αυτό γίνεται προσαρμόζοντας τις θέσεις τους χρησιμοποιώντας το πλαίσιο προέλευση.χ ιδιοκτησίας και την εφαρμογή της κίνησης σε αυτές τις θέσεις. Οι δύο προβολές εικόνας χρησιμοποιούνται έτσι ώστε όταν η μία απομακρύνεται από την οθόνη, η άλλη είναι έτοιμη να πάρει τη θέση της, δημιουργώντας το εφέ ενός απρόσκοπτου βρόχου. Ζωντανεύοντας την κίνηση των προβολών της εικόνας, μπορείτε να δώσετε την ψευδαίσθηση ότι τα σύννεφα παρασύρονται συνεχώς στον ουρανό. 🚀

Ας αναλύσουμε τα κύρια στοιχεία του κώδικα. Το πρώτο βήμα είναι να δημιουργήσετε τις δύο προβολές εικόνων, καθεμία από τις οποίες έχει την ίδια εικόνα σύννεφων. Αυτές οι προβολές εικόνας τοποθετούνται δίπλα-δίπλα στην οθόνη, με τη δεύτερη προβολή εικόνας να ξεκινά από εκεί που τελειώνει η πρώτη, δημιουργώντας έναν συνεχή ορίζοντα. Αυτή η ρύθμιση είναι ζωτικής σημασίας για να διασφαλιστεί ότι όταν η πρώτη προβολή εικόνας φτάσει στην άκρη της οθόνης, η δεύτερη προβολή εικόνας είναι έτοιμη να αναλάβει. Οι θέσεις των προβολών εικόνας ελέγχονται χρησιμοποιώντας το πλαίσιο ιδιότητα, η οποία καθορίζει τόσο το μέγεθος όσο και τη θέση των προβολών στη γονική προβολή. Κάθε προβολή εικόνας ξεκινά από διαφορετική θέση x: η μία ξεκινά από το 0 και η άλλη ξεκινά από το πλάτος της οθόνης.

Μόλις ρυθμιστούν οι προβολές εικόνας, το επόμενο βήμα είναι να τις κινήσετε. Αυτό γίνεται με το UIView.animate λειτουργία, η οποία είναι υπεύθυνη για την κίνηση των προβολών με την πάροδο του χρόνου. Ο UIView.animate Η λειτουργία λαμβάνει διάφορες παραμέτρους: τη διάρκεια της κινούμενης εικόνας, τυχόν καθυστέρηση πριν από την έναρξη της κινούμενης εικόνας, τις επιλογές κινούμενων εικόνων (όπως η επανάληψη της κινούμενης εικόνας) και το μπλοκ των κινούμενων εικόνων που θα εφαρμοστούν. Σε αυτήν την περίπτωση, η διάρκεια της κινούμενης εικόνας ορίζεται στα 20 δευτερόλεπτα και η κινούμενη εικόνα ρυθμίζεται να επαναλαμβάνεται για πάντα χρησιμοποιώντας το .επαναλαμβάνω επιλογή. Ο .καμπύλη Γραμμική Η επιλογή διασφαλίζει ότι το κινούμενο σχέδιο εκτελείται με σταθερή ταχύτητα, δημιουργώντας μια ομαλή, γραμμική κίνηση. Οι εικόνες μετακινούνται οριζόντια με τη μετατόπισή τους προέλευση.χ από το πλάτος της οθόνης.

Ωστόσο, ο κώδικας μπορεί να παράγει ανεπιθύμητα αποτελέσματα, όπως οι εικόνες να εξαφανίζονται ή να κινούνται προς τη λάθος κατεύθυνση. Αυτό συμβαίνει επειδή το πλαίσιο Η ιδιότητα τροποποιείται άμεσα χωρίς επαναφορά των εικόνων όταν μετακινούνται εκτός οθόνης. Η λύση είναι να χρησιμοποιήσετε μια μέθοδο όπως ανακυκλώνω σύννεφα, το οποίο επαναφέρει τη θέση των προβολών εικόνας όταν αυτές κινούνται πέρα ​​από τα όρια της οθόνης. Αυτό διασφαλίζει την απρόσκοπτη επαναφορά των εικόνων, χωρίς να εξαφανίζονται. Αυτή η μέθοδος ελέγχει τη θέση x των προβολών της εικόνας και όταν μία μετακινείται εκτός οθόνης, επαναφέρεται στην άλλη πλευρά, επιτρέποντας στον βρόχο να συνεχίσει. Επιπλέον, χρησιμοποιώντας αδύναμος εαυτός μέσα στο μπλοκ ολοκλήρωσης διασφαλίζει ότι δεν υπάρχουν διαρροές μνήμης λόγω ισχυρών κύκλων αναφοράς, βελτιώνοντας την απόδοση της εφαρμογής.

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

Δημιουργία Seamless Cloud Animation στο iOS

Η κίνηση μιας εικόνας σε βρόχο, όπως μια μετατόπιση στο σύννεφο σε μια εφαρμογή iOS, απαιτεί προσεκτική εξέταση τόσο των οπτικών εφέ όσο και της απόδοσης. Όταν προσπαθείτε να επιτύχετε έναν ατελείωτο βρόχο από κινούμενα σύννεφα στην οθόνη, υπάρχουν μερικά βασικά στοιχεία που πρέπει να αντιμετωπίσετε: ο χρόνος, η κατεύθυνση και ο τρόπος διαχείρισης των προβολών. Ένας από τους πιο σημαντικούς παράγοντες για να κάνετε την κινούμενη εικόνα σας ομαλή είναι να χειρίζεστε αποτελεσματικά τις προβολές της εικόνας, ώστε να μην εξαφανίζονται ή να κολλάνε. Χρησιμοποιώντας δύο UIImageView Τα στιγμιότυπα για το κινούμενο σχέδιο βοηθούν να διασφαλιστεί ότι τα σύννεφα φαίνονται να κινούνται συνεχώς, ακόμη και όταν η μία εικόνα μετακινείται εκτός οθόνης και η άλλη παίρνει τη θέση της. Είναι σημαντικό να διασφαλίσετε ότι οι εικόνες επαναφέρονται μόλις περάσουν από την άκρη της οθόνης. Χωρίς αυτήν την επαναφορά, το κινούμενο σχέδιο μπορεί να σπάσει, με αποτέλεσμα τα σύννεφα να εξαφανιστούν ή να αφήσουν κενά στον βρόχο.

Μια άλλη κρίσιμη πτυχή του animation περιλαμβάνει το πλαίσιο.προέλευση.χ ιδιότητα, η οποία χρησιμοποιείται για τον έλεγχο της θέσης των εικόνων cloud. Ρυθμίζοντας την οριζόντια θέση των εικόνων σε διαφορετικά σημεία εκκίνησης, μπορείτε να δημιουργήσετε την ψευδαίσθηση της άπειρης κίνησης. Ωστόσο, ένα κοινό πρόβλημα προκύπτει όταν μια εικόνα μετακινείται εκτός οθόνης και δεν επαναφέρεται στη σωστή θέση. Η σωστή προσέγγιση είναι να ανιχνεύσετε πότε η εικόνα έχει περάσει από την άκρη της οθόνης και μετά να την επανατοποθετήσετε για να ξεκινήσει ξανά από την άλλη πλευρά. Χρησιμοποιώντας ένα μπλοκ κινούμενων εικόνων, μπορείτε να ορίσετε ένα επαναλαμβανόμενο και συνεχές κινούμενο σχέδιο που εξασφαλίζει σταθερή ροή. Για να βεβαιωθείτε ότι η κίνηση είναι ομαλή, χρησιμοποιήστε το UIView.animate μέθοδος με επιλογές όπως .επαναλαμβάνω για βρόχο και .καμπύλη Γραμμική για ομοιόμορφη ταχύτητα.

Τέλος, η βελτιστοποίηση του κώδικά σας για απόδοση και ομαλότητα είναι εξίσου σημαντική με την επίτευξη του οπτικού εφέ. Θα πρέπει να ελαχιστοποιήσετε τη χρήση της μνήμης και να αποφύγετε τους περιττούς υπολογισμούς κατά τη διάρκεια της κινούμενης εικόνας. Χρησιμοποιώντας weak self Οι αναφορές σε κινούμενα σχέδια που βασίζονται στο κλείσιμο συμβάλλουν στην αποφυγή διαρροών μνήμης αποφεύγοντας τους κύκλους διατήρησης. Επιπλέον, εάν το κινούμενο σχέδιο είναι πολύπλοκο ή εάν χρειάζεστε πιο προηγμένες τεχνικές, σκεφτείτε να το χρησιμοποιήσετε CADisplayLink για ενημερώσεις καρέ σε πραγματικό χρόνο, που προσφέρει μεγαλύτερο έλεγχο του χρονισμού και της ομαλότητας της κινούμενης εικόνας. Η δοκιμή της κινούμενης εικόνας σε διαφορετικά μεγέθη και προσανατολισμούς οθόνης είναι επίσης σημαντική, καθώς βοηθά να διασφαλιστεί ότι η κινούμενη εικόνα λειτουργεί όπως αναμένεται σε όλες τις συσκευές. 📱