আইওএস-এ একটি মসৃণ লুপিং অ্যানিমেশন তৈরি করতে চিত্রগুলি কীভাবে ব্যবহার করবেন

ক্লাউডগুলিকে কীভাবে চিরতরে সরানো যায়: iOS-এ একটি সাধারণ লুপিং অ্যানিমেশন

iOS ডেভেলপমেন্টে, অ্যানিমেশনগুলি সত্যিকার অর্থে একটি অ্যাপকে প্রাণবন্ত করতে পারে, ব্যবহারকারীদের পছন্দের একটি গতিশীল এবং আকর্ষক উপাদান যোগ করে৷ 🌥️ একটি সাধারণ অ্যানিমেশন যা আপনি তৈরি করতে চান তা হল একটি মসৃণ, লুপিং ইফেক্ট, যেমন স্ক্রীন জুড়ে মেঘ সরানো। এই সহজ অথচ দৃষ্টিকটু অ্যানিমেশনটি প্রায়শই গেম, আবহাওয়ার অ্যাপ এবং এমনকি ব্যক্তিগত প্রকল্পেও একটি শান্ত পরিবেশ তৈরি করতে ব্যবহৃত হয়। আপনি যদি iOS-এ অ্যানিমেশনে নতুন হয়ে থাকেন, তাহলে আপনি হয়তো ভাবছেন কীভাবে এটিকে নির্বিঘ্ন করা যায় এবং সমস্যাগুলি এড়ানো যায়।

একটি অ্যাপ খোলার কল্পনা করুন এবং অবিলম্বে স্ক্রীন জুড়ে মেঘগুলিকে আলতোভাবে প্রবাহিত হতে দেখে, নিখুঁত নির্মল পটভূমি তৈরি করে৷ সুইফটে `UIImageView` এবং `UIView` অ্যানিমেশন ব্যবহার করে এই ধরনের প্রভাব অর্জন করা যায়। মূল ধারণা হল একই চিত্র (এই ক্ষেত্রে মেঘ) একাধিকবার অ্যানিমেট করা যাতে এটি অবিচ্ছিন্নভাবে চলমান বলে মনে হয়। যাইহোক, এটি সবসময় মনে হয় হিসাবে সহজ নয়। অ্যানিমেশনটি মসৃণ করার চেষ্টা করার সময় বিকাশকারীরা প্রায়শই কিছু অসুবিধার সম্মুখীন হন, বিশেষ করে বারবার চিত্রগুলির সাথে কাজ করার সময়।

আপনি যদি এই প্রভাবটি সেট আপ করার চেষ্টা করে থাকেন এবং মেঘগুলি ভুল দিকে চলে যাওয়া বা অদৃশ্য হয়ে যাওয়ার মতো সমস্যার সম্মুখীন হন তবে আপনি একা নন৷ এগুলি সাধারণ সমস্যা যা ভুল ফ্রেম হ্যান্ডলিং বা অ্যানিমেশন কনফিগারেশন থেকে উদ্ভূত হয়। কিন্তু চিন্তা করবেন না—এই নির্দেশিকা আপনাকে এই সমস্যাগুলির সমাধান করার জন্য পদক্ষেপগুলি নিয়ে যাবে, আপনার অ্যানিমেশন নির্বিঘ্নে কাজ করে তা নিশ্চিত করে৷ ক্লাউড অ্যানিমেটিং করার আমার প্রথম প্রচেষ্টার মতো, আপনি নিখুঁত ফলাফল পাওয়ার আগে আপনাকে কয়েকটি জিনিস সামঞ্জস্য করতে হতে পারে। 😅

এখন, আসুন সেই মেঘগুলিকে একটি নিখুঁত লুপে সরানোর সমাধানে ডুব দেওয়া যাক। দুটি ইমেজ ভিউ এবং কিছুটা অ্যানিমেশন জাদু ব্যবহার করে, আপনি একটি অন্তহীন, তরল গতি তৈরি করবেন যা আপনার অ্যাপটিকে মসৃণ এবং পালিশ দেখাবে। অ্যানিমেশন ঠিক করতে এবং সেই মেঘগুলিকে ঠিক ঠিকভাবে প্রবাহিত করতে প্রস্তুত? চল যাই!

আইওএস-এ ক্লাউড অ্যানিমেশন স্ক্রিপ্ট কীভাবে কাজ করে

উপরে প্রদত্ত স্ক্রিপ্ট উদাহরণে, লক্ষ্য হল একটি মসৃণ, ক্রমাগত ক্লাউড অ্যানিমেশন তৈরি করা যা একটি iOS অ্যাপে অসীমভাবে লুপ করে। প্রধান ধারণা দুটি অ্যানিমেট করা হয় UIImageView একই ক্লাউড ইমেজ সহ, স্ক্রীন জুড়ে অনুভূমিকভাবে তাদের সরানো। এটি ফ্রেমের ব্যবহার করে তাদের অবস্থান সামঞ্জস্য করে করা হয় origin.x সম্পত্তি এবং এই অবস্থানগুলিতে অ্যানিমেশন প্রয়োগ করা। দুটি ইমেজ ভিউ ব্যবহার করা হয় যাতে একটি স্ক্রীন থেকে সরে গেলে, অন্যটি তার জায়গা নিতে প্রস্তুত হয়, একটি বিরামহীন লুপের প্রভাব তৈরি করে। ইমেজ ভিউয়ের গতিবিধি অ্যানিমেট করে, আপনি এই বিভ্রম দিতে পারেন যে মেঘ ক্রমাগত আকাশ জুড়ে প্রবাহিত হচ্ছে। 🚀

আসুন কোডের প্রধান উপাদানগুলিকে ভেঙে ফেলি। প্রথম ধাপ হল দুটি ইমেজ ভিউ তৈরি করা, প্রতিটিতে মেঘের একই ছবি রয়েছে। এই ইমেজ ভিউগুলি স্ক্রিনে পাশাপাশি রাখা হয়, যেখানে প্রথমটি শেষ হয় যেখানে দ্বিতীয় ইমেজ ভিউ শুরু হয়, একটি ক্রমাগত দিগন্ত তৈরি করে। এই সেটআপটি নিশ্চিত করার জন্য গুরুত্বপূর্ণ যে যখন প্রথম চিত্রের দৃশ্যটি স্ক্রিনের প্রান্তে পৌঁছেছে, তখন দ্বিতীয় চিত্র দৃশ্যটি দখল করার জন্য প্রস্তুত। ইমেজ ভিউগুলির অবস্থানগুলি ব্যবহার করে নিয়ন্ত্রিত হয় ফ্রেম সম্পত্তি, যা প্যারেন্ট ভিউয়ের মধ্যে দৃশ্যের আকার এবং অবস্থান উভয়ই সংজ্ঞায়িত করে। প্রতিটি চিত্রের দৃশ্য একটি ভিন্ন x- অবস্থান থেকে শুরু হয়: একটি 0 থেকে শুরু হয় এবং অন্যটি পর্দার প্রস্থ থেকে শুরু হয়।

একবার ইমেজ ভিউ সেট আপ হয়ে গেলে, পরবর্তী ধাপ হল সেগুলিকে অ্যানিমেট করা। এই সঙ্গে করা হয় UIView.animate ফাংশন, যা সময়ের সাথে ভিউ অ্যানিমেট করার জন্য দায়ী। দ UIView.animate ফাংশনটি বেশ কয়েকটি পরামিতি নেয়: অ্যানিমেশনের সময়কাল, অ্যানিমেশন শুরু হওয়ার আগে যেকোনো বিলম্ব, অ্যানিমেশনের বিকল্পগুলি (যেমন অ্যানিমেশনের পুনরাবৃত্তি), এবং অ্যানিমেশনের ব্লক প্রয়োগ করা হবে। এই ক্ষেত্রে, অ্যানিমেশনের সময়কাল 20 সেকেন্ডে সেট করা হয়েছে এবং অ্যানিমেশনটি ব্যবহার করে চিরতরে পুনরাবৃত্তি করার জন্য সেট করা হয়েছে .পুনরাবৃত্তি বিকল্প দ বক্ররেখা বিকল্পটি নিশ্চিত করে যে অ্যানিমেশন একটি স্থির গতিতে চলে, একটি মসৃণ, রৈখিক আন্দোলন তৈরি করে। ইমেজ তাদের অফসেট দ্বারা অনুভূমিকভাবে সরানো হয় origin.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
        }
    }
}

আইওএস-এ সিমলেস ক্লাউড অ্যানিমেশন তৈরি করা

আইওএস অ্যাপে ক্লাউড ড্রিফটের মতো লুপিং ইমেজ অ্যানিমেট করার জন্য ভিজ্যুয়াল এফেক্ট এবং পারফরম্যান্স উভয়েরই সতর্কতা অবলম্বন করা প্রয়োজন। আপনি যখন স্ক্রীন জুড়ে চলমান মেঘের একটি অন্তহীন লুপ অর্জন করার চেষ্টা করছেন, তখন এখানে কিছু মূল উপাদান রয়েছে: সময়, দিকনির্দেশ এবং কীভাবে দৃশ্যগুলি পরিচালনা করা হয়। আপনার অ্যানিমেশনকে মসৃণ করার সবচেয়ে গুরুত্বপূর্ণ কারণগুলির মধ্যে একটি হল চিত্রের দৃশ্যগুলিকে দক্ষতার সাথে পরিচালনা করা যাতে সেগুলি কেবল অদৃশ্য হয়ে না যায় বা আটকে না যায়। দুই ব্যবহার করে UIImageView অ্যানিমেশনের দৃষ্টান্তগুলি নিশ্চিত করতে সাহায্য করে যে মেঘগুলি ক্রমাগত নড়ছে বলে মনে হয়, এমনকি যখন একটি চিত্র পর্দার বাইরে চলে যায় এবং অন্যটি তার স্থান নেয়। স্ক্রীনের প্রান্ত অতিক্রম করার পরে ছবিগুলি রিসেট করা নিশ্চিত করা অপরিহার্য। এই রিসেট ব্যতীত, অ্যানিমেশনটি ভেঙে যেতে পারে, যার ফলে মেঘগুলি অদৃশ্য হয়ে যেতে পারে বা লুপে ফাঁক রেখে যেতে পারে।

অ্যানিমেশনের আরেকটি গুরুত্বপূর্ণ দিক জড়িত frame.origin.x সম্পত্তি, যা ক্লাউড চিত্রগুলির অবস্থান নিয়ন্ত্রণ করতে ব্যবহৃত হয়। বিভিন্ন প্রারম্ভিক বিন্দুতে চিত্রের অনুভূমিক অবস্থান সেট করে, আপনি অসীম আন্দোলনের বিভ্রম তৈরি করতে পারেন। যাইহোক, একটি সাধারণ সমস্যা দেখা দেয় যখন একটি ছবি অফ-স্ক্রীনে চলে যায় এবং সঠিক অবস্থানে রিসেট করা হয় না। সঠিক পন্থা হল চিত্রটি কখন স্ক্রিনের প্রান্তে চলে গেছে তা সনাক্ত করা, তারপর আবার অন্য দিকে শুরু করার জন্য এটিকে পুনরায় স্থাপন করুন। একটি অ্যানিমেশন ব্লক ব্যবহার করে, আপনি একটি পুনরাবৃত্তি এবং ক্রমাগত অ্যানিমেশন সংজ্ঞায়িত করতে পারেন যা একটি ধ্রুবক প্রবাহ নিশ্চিত করে। আন্দোলন মসৃণ হয় তা নিশ্চিত করতে, ব্যবহার করুন UIView.animate মত বিকল্প সহ পদ্ধতি .পুনরাবৃত্তি লুপ করার জন্য এবং বক্ররেখা সমান গতির জন্য।

অবশেষে, কর্মক্ষমতা এবং মসৃণতার জন্য আপনার কোডটি অপ্টিমাইজ করা চাক্ষুষ প্রভাব অর্জনের মতোই গুরুত্বপূর্ণ। অ্যানিমেশনের সময় আপনার মেমরির ব্যবহার কম করা উচিত এবং অপ্রয়োজনীয় গণনা এড়ানো উচিত। ব্যবহার করে weak self ক্লোজার-ভিত্তিক অ্যানিমেশনের রেফারেন্সগুলি ধরে রাখার চক্র এড়িয়ে মেমরি লিক প্রতিরোধে সহায়তা করে। অতিরিক্তভাবে, যদি অ্যানিমেশন জটিল হয় বা আপনার যদি আরও উন্নত কৌশলগুলির প্রয়োজন হয় তবে ব্যবহার করার কথা বিবেচনা করুন CADisplayLink রিয়েল-টাইম ফ্রেম আপডেটের জন্য, যা অ্যানিমেশনের সময় এবং মসৃণতার উপর আরও বেশি নিয়ন্ত্রণ প্রদান করে। বিভিন্ন স্ক্রীন মাপ এবং ওরিয়েন্টেশনে অ্যানিমেশন পরীক্ষা করাও গুরুত্বপূর্ণ, কারণ এটি নিশ্চিত করতে সাহায্য করে যে অ্যানিমেশন সমস্ত ডিভাইসে প্রত্যাশিতভাবে কাজ করে। 📱