IOS இல் மென்மையான லூப்பிங் அனிமேஷனை உருவாக்க படங்களை எவ்வாறு பயன்படுத்துவது

மேகங்களை நிரந்தரமாக நகர்த்துவது எப்படி: iOS இல் ஒரு எளிய லூப்பிங் அனிமேஷன்

iOS மேம்பாட்டில், அனிமேஷன்கள் உண்மையிலேயே ஒரு பயன்பாட்டை உயிர்ப்பிக்க முடியும், பயனர்கள் விரும்பும் ஒரு மாறும் மற்றும் ஈர்க்கக்கூடிய உறுப்பைச் சேர்க்கிறது. 🌥️ நீங்கள் உருவாக்க விரும்பும் ஒரு பொதுவான அனிமேஷன், திரை முழுவதும் மேகங்களை நகர்த்துவது போன்ற மென்மையான, வளையக்கூடிய விளைவு ஆகும். இந்த எளிய மற்றும் பார்வைக்கு ஈர்க்கும் அனிமேஷன் பெரும்பாலும் கேம்கள், வானிலை பயன்பாடுகள் மற்றும் தனிப்பட்ட திட்டங்களில் கூட அமைதியான சூழ்நிலையை உருவாக்க பயன்படுத்தப்படுகிறது. நீங்கள் iOS இல் அனிமேஷனுக்கு புதியவராக இருந்தால், அதை எவ்வாறு தடையின்றி உருவாக்குவது மற்றும் குறைபாடுகளைத் தவிர்ப்பது எப்படி என்று நீங்கள் யோசித்துக்கொண்டிருக்கலாம்.

ஒரு பயன்பாட்டைத் திறந்து உடனடியாக மேகங்கள் மெதுவாக திரையில் நகர்ந்து, சரியான அமைதியான பின்னணியை உருவாக்குவதை கற்பனை செய்து பாருங்கள். ஸ்விஃப்டில் `UIImageView` மற்றும் `UIView` அனிமேஷன்களைப் பயன்படுத்தி இந்த வகையான விளைவை அடைய முடியும். ஒரே படத்தை (இந்த விஷயத்தில் கிளவுட்) பல முறை அனிமேட் செய்வதே அடிப்படை யோசனை, அது தொடர்ந்து நகர்வது போல் தோன்றும். இருப்பினும், இது எப்போதும் தோன்றும் அளவுக்கு எளிதானது அல்ல. அனிமேஷனை மென்மையாக்க முயற்சிக்கும்போது டெவலப்பர்கள் அடிக்கடி சந்திக்கும் சில ஆபத்துகள் உள்ளன, குறிப்பாக மீண்டும் மீண்டும் படங்களைக் கையாளும் போது.

நீங்கள் இந்த விளைவை அமைக்க முயற்சி செய்து, மேகங்கள் தவறான திசையில் நகர்வது அல்லது மறைவது போன்ற சிக்கல்களை எதிர்கொண்டால், நீங்கள் தனியாக இல்லை. இவை தவறான பிரேம் கையாளுதல் அல்லது அனிமேஷன் உள்ளமைவில் இருந்து உருவாகும் பொதுவான பிரச்சனைகள். ஆனால் கவலைப்பட வேண்டாம்—உங்கள் அனிமேஷன் தடையின்றி செயல்படுவதை உறுதிசெய்து, இந்தச் சிக்கல்களைச் சரிசெய்வதற்கான படிகளை இந்த வழிகாட்டி உங்களை அழைத்துச் செல்லும். மேகங்களை அனிமேஷன் செய்வதற்கான எனது முதல் முயற்சியைப் போலவே, சரியான முடிவைப் பெறுவதற்கு முன்பு நீங்கள் சில விஷயங்களைச் சரிசெய்ய வேண்டியிருக்கும். 😅

இப்போது, ​​அந்த மேகங்கள் சரியான சுழற்சியில் நகரும் தீர்வுக்கு முழுக்கு போடுவோம். இரண்டு படக் காட்சிகள் மற்றும் அனிமேஷன் மேஜிக்கைப் பயன்படுத்துவதன் மூலம், முடிவில்லாத, திரவ இயக்கத்தை உருவாக்குவீர்கள், இது உங்கள் பயன்பாட்டை மென்மையாகவும் மெருகூட்டுவதாகவும் இருக்கும். அனிமேஷனைச் சரிசெய்து, அந்த மேகங்கள் சரியாகச் செல்லத் தயாரா? போகலாம்!

iOS இல் கிளவுட் அனிமேஷன் ஸ்கிரிப்ட் எவ்வாறு செயல்படுகிறது

மேலே வழங்கப்பட்ட ஸ்கிரிப்ட் எடுத்துக்காட்டில், iOS பயன்பாட்டில் முடிவில்லாமல் சுழலும் மென்மையான, தொடர்ச்சியான கிளவுட் அனிமேஷனை உருவாக்குவதே குறிக்கோள். முக்கிய யோசனை இரண்டு அனிமேஷன் ஆகும் UIImageView ஒரே மேகக்கணிப் படத்தைக் கொண்ட நிகழ்வுகள், அவற்றைத் திரையில் கிடைமட்டமாக நகர்த்துகின்றன. சட்டத்தைப் பயன்படுத்தி அவற்றின் நிலைகளை சரிசெய்வதன் மூலம் இது செய்யப்படுகிறது தோற்றம்.x சொத்து மற்றும் இந்த நிலைகளுக்கு அனிமேஷனைப் பயன்படுத்துதல். இரண்டு படக் காட்சிகளும் பயன்படுத்தப்படுகின்றன, இதனால் ஒன்று திரைக்கு வெளியே நகரும் போது, ​​மற்றொன்று அதன் இடத்தைப் பிடிக்கத் தயாராக உள்ளது, இது தடையற்ற சுழற்சியின் விளைவை உருவாக்குகிறது. படக் காட்சிகளின் இயக்கத்தை அனிமேஷன் செய்வதன் மூலம், மேகங்கள் தொடர்ந்து வானத்தின் குறுக்கே செல்கின்றன என்ற மாயையை நீங்கள் கொடுக்கலாம். 🚀

குறியீட்டின் முக்கிய கூறுகளை உடைப்போம். முதல் படி இரண்டு படக் காட்சிகளை உருவாக்குவது, ஒவ்வொன்றும் மேகங்களின் ஒரே படத்தை வைத்திருக்கும். இந்தப் படக் காட்சிகள் திரையில் அருகருகே வைக்கப்படுகின்றன, இரண்டாவது படக் காட்சி முதல் படம் முடிவடையும் இடத்தில் தொடங்கி, தொடர்ச்சியான அடிவானத்தை உருவாக்குகிறது. முதல் படக் காட்சி திரையின் விளிம்பை அடையும் போது, ​​இரண்டாவது படக் காட்சி எடுக்கத் தயாராக இருப்பதை உறுதிப்படுத்த இந்த அமைப்பு முக்கியமானது. படத்தைப் பயன்படுத்தி காட்சிகளின் நிலைகள் கட்டுப்படுத்தப்படுகின்றன சட்டகம் சொத்து, இது பெற்றோர் பார்வையில் உள்ள காட்சிகளின் அளவு மற்றும் நிலை இரண்டையும் வரையறுக்கிறது. ஒவ்வொரு படக் காட்சியும் வெவ்வேறு x-நிலையிலிருந்து தொடங்குகிறது: ஒன்று 0 இல் தொடங்குகிறது, மற்றொன்று திரையின் அகலத்தில் தொடங்குகிறது.

படக் காட்சிகள் அமைக்கப்பட்டதும், அடுத்த கட்டமாக அவற்றை அனிமேஷன் செய்வது. இது உடன் செய்யப்படுகிறது UIView.animate செயல்பாடு, இது காலப்போக்கில் காட்சிகளை உயிரூட்டுவதற்கு பொறுப்பாகும். தி UIView.animate செயல்பாடு பல அளவுருக்களை எடுக்கும்: அனிமேஷனின் காலம், அனிமேஷன் தொடங்கும் முன் ஏதேனும் தாமதம், அனிமேஷன் விருப்பங்கள் (அனிமேஷனை மீண்டும் செய்வது போன்றவை) மற்றும் பயன்படுத்தப்பட வேண்டிய அனிமேஷன்களின் தொகுதி. இந்த வழக்கில், அனிமேஷன் கால அளவு 20 வினாடிகளாக அமைக்கப்பட்டுள்ளது, மேலும் அனிமேஷன் மீண்டும் மீண்டும் அமைக்கப்படும் .மீண்டும் செய்யவும் விருப்பம். தி .வளைவு நேர்கோட்டு விருப்பம் அனிமேஷன் ஒரு நிலையான வேகத்தில் இயங்குவதை உறுதி செய்கிறது, இது ஒரு மென்மையான, நேரியல் இயக்கத்தை உருவாக்குகிறது. படங்கள் கிடைமட்டமாக நகர்த்தப்படுகின்றன தோற்றம்.x திரை அகலம் மூலம்.

இருப்பினும், குறியீடு மறைந்து போவது அல்லது தவறான திசையில் நகர்வது போன்ற விரும்பத்தகாத முடிவுகளை உருவாக்கலாம். இது ஏனெனில் சட்டகம் படங்கள் திரைக்கு வெளியே நகரும் போது அவற்றை மீட்டமைக்காமல் சொத்து நேரடியாக மாற்றியமைக்கப்படுகிறது. போன்ற ஒரு முறையைப் பயன்படுத்துவதே தீர்வு மறுசுழற்சி கிளவுட்ஸ், இது திரை எல்லைக்கு அப்பால் நகரும் போது படக் காட்சிகளின் நிலையை மீட்டமைக்கிறது. படங்கள் மறைந்துவிடாமல், தடையின்றி சுழலுவதை இது உறுதி செய்கிறது. இந்த முறை படக் காட்சிகளின் 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
        }
    }
}

IOS இல் தடையற்ற கிளவுட் அனிமேஷனை உருவாக்குதல்

iOS பயன்பாட்டில் கிளவுட் டிரிஃப்ட் போன்ற லூப்பிங் படத்தை அனிமேட் செய்ய, காட்சி விளைவுகள் மற்றும் செயல்திறன் இரண்டையும் கவனமாகக் கருத்தில் கொள்ள வேண்டும். திரை முழுவதும் மேகங்களை நகர்த்துவதற்கான முடிவில்லாத சுழற்சியை அடைய முயற்சிக்கும்போது, ​​சில முக்கிய கூறுகள் உள்ளன: நேரம், திசை மற்றும் காட்சிகள் எவ்வாறு நிர்வகிக்கப்படுகின்றன. உங்கள் அனிமேஷனை மென்மையாக்குவதற்கான மிக முக்கியமான காரணிகளில் ஒன்று, படக் காட்சிகளை திறமையாகக் கையாள்வதாகும், அதனால் அவை மறைந்துவிடாது அல்லது சிக்கிக்கொள்ளாது. இரண்டைப் பயன்படுத்துதல் UIImageView அனிமேஷனுக்கான நிகழ்வுகள், ஒரு படம் திரைக்கு வெளியே நகர்ந்தாலும், மற்றொன்று அதன் இடத்தைப் பிடித்தாலும், மேகங்கள் தொடர்ந்து நகர்வதை உறுதிப்படுத்த உதவுகிறது. படங்கள் திரையின் விளிம்பைக் கடந்தவுடன் அவை மீட்டமைக்கப்படுவதை உறுதி செய்வது அவசியம். இந்த மீட்டமைப்பு இல்லாமல், அனிமேஷன் உடைந்து, மேகங்கள் மறைந்துவிடும் அல்லது வளையத்தில் இடைவெளிகளை விட்டுவிடும்.

அனிமேஷனின் மற்றொரு முக்கியமான அம்சம் இதில் அடங்கும் frame.origin.x சொத்து, இது கிளவுட் படங்களின் நிலையைக் கட்டுப்படுத்தப் பயன்படுகிறது. வெவ்வேறு தொடக்க புள்ளிகளில் படங்களின் கிடைமட்ட நிலையை அமைப்பதன் மூலம், எல்லையற்ற இயக்கத்தின் மாயையை நீங்கள் உருவாக்கலாம். இருப்பினும், ஒரு படம் திரைக்கு வெளியே நகர்ந்து சரியான நிலைக்கு மீட்டமைக்கப்படாதபோது பொதுவான சிக்கல் எழுகிறது. படம் திரையின் விளிம்பைக் கடந்து சென்றதைக் கண்டறிந்து, மறுபுறம் மீண்டும் தொடங்குவதற்கு அதை மாற்றியமைப்பதே சரியான அணுகுமுறை. அனிமேஷன் பிளாக்கைப் பயன்படுத்தி, ஒரு நிலையான ஓட்டத்தை உறுதிப்படுத்தும் தொடர்ச்சியான மற்றும் தொடர்ச்சியான அனிமேஷனை நீங்கள் வரையறுக்கலாம். இயக்கம் சீராக இருப்பதை உறுதிசெய்ய, பயன்படுத்தவும் UIView.animate போன்ற விருப்பங்களைக் கொண்ட முறை .மீண்டும் செய்யவும் லூப்பிங் மற்றும் .வளைவு நேர்கோட்டு சீரான வேகத்திற்கு.

இறுதியாக, செயல்திறன் மற்றும் மென்மைக்காக உங்கள் குறியீட்டை மேம்படுத்துவது காட்சி விளைவை அடைவதைப் போலவே முக்கியமானது. நீங்கள் நினைவக பயன்பாட்டைக் குறைக்க வேண்டும் மற்றும் அனிமேஷனின் போது தேவையற்ற கணக்கீடுகளைத் தவிர்க்க வேண்டும். பயன்படுத்தி weak self மூடல்-அடிப்படையிலான அனிமேஷன்களில் உள்ள குறிப்புகள், சுழற்சிகளைத் தவிர்ப்பதன் மூலம் நினைவக கசிவைத் தடுக்க உதவுகிறது. கூடுதலாக, அனிமேஷன் சிக்கலானதாக இருந்தால் அல்லது உங்களுக்கு மேம்பட்ட நுட்பங்கள் தேவைப்பட்டால், பயன்படுத்தவும் CADisplayLink நிகழ்நேர சட்ட புதுப்பிப்புகளுக்கு, இது அனிமேஷனின் நேரம் மற்றும் மென்மையின் மீது அதிக கட்டுப்பாட்டை வழங்குகிறது. வெவ்வேறு திரை அளவுகள் மற்றும் நோக்குநிலைகளில் அனிமேஷனைச் சோதிப்பது மிகவும் முக்கியமானது, ஏனெனில் இது அனைத்து சாதனங்களிலும் எதிர்பார்த்தபடி அனிமேஷன் செயல்படுவதை உறுதிசெய்ய உதவுகிறது. 📱