iOS میں ہموار لوپنگ اینیمیشن بنانے کے لیے امیجز کا استعمال کیسے کریں۔

بادلوں کو ہمیشہ کے لیے کیسے منتقل کیا جائے: iOS میں ایک سادہ لوپنگ اینیمیشن

iOS کی ترقی میں، متحرک تصاویر ایک ایپ کو حقیقی معنوں میں زندہ کر سکتی ہیں، جس میں ایک متحرک اور پرکشش عنصر شامل ہوتا ہے جسے صارفین پسند کرتے ہیں۔ 🌥️ ایک عام اینیمیشن جسے آپ بنانا چاہتے ہیں وہ ایک ہموار، لوپنگ اثر ہے، جیسے اسکرین پر بادلوں کو حرکت دیتا ہے۔ یہ سادہ لیکن بصری طور پر دلکش اینیمیشن اکثر گیمز، ویدر ایپس اور یہاں تک کہ ذاتی پروجیکٹس میں بھی پرسکون ماحول پیدا کرنے کے لیے استعمال ہوتی ہے۔ اگر آپ iOS میں اینیمیشن کے لیے نئے ہیں، تو آپ سوچ رہے ہوں گے کہ اسے ہموار کیسے بنایا جائے اور خرابیوں سے بچیں۔

ایک ایپ کھولنے کا تصور کریں اور فوری طور پر مکمل پرسکون پس منظر تخلیق کرتے ہوئے بادلوں کو اسکرین پر آہستہ سے بہتے ہوئے دیکھیں۔ سوئفٹ میں `UIImageView` اور `UIView` اینیمیشنز کا استعمال کرتے ہوئے اس قسم کا اثر حاصل کیا جا سکتا ہے۔ بنیادی خیال یہ ہے کہ ایک ہی تصویر (اس معاملے میں بادل) کو متعدد بار متحرک کیا جائے تاکہ یہ مسلسل حرکت کرتی نظر آئے۔ تاہم، یہ ہمیشہ اتنا آسان نہیں ہوتا جتنا لگتا ہے۔ اینیمیشن کو ہموار بنانے کی کوشش کرتے وقت ڈویلپرز کو اکثر کچھ نقصانات کا سامنا کرنا پڑتا ہے، خاص طور پر جب بار بار تصاویر سے نمٹتے ہیں۔

اگر آپ نے اس اثر کو ترتیب دینے کی کوشش کی ہے اور بادلوں کے غلط سمت میں بڑھنے یا غائب ہونے جیسے مسائل کا سامنا کیا ہے، تو آپ اکیلے نہیں ہیں۔ یہ عام مسائل ہیں جو غلط فریم ہینڈلنگ یا اینیمیشن کنفیگریشن سے پیدا ہوتے ہیں۔ لیکن پریشان نہ ہوں- یہ گائیڈ آپ کو ان مسائل کو حل کرنے کے لیے قدموں پر گامزن کرے گا، اس بات کو یقینی بنائے گا کہ آپ کی اینیمیشن بغیر کسی رکاوٹ کے کام کرتی ہے۔ بادلوں کو متحرک کرنے کی میری پہلی کوشش کی طرح، کامل نتیجہ حاصل کرنے سے پہلے آپ کو کچھ چیزوں کو ایڈجسٹ کرنے کی ضرورت پڑسکتی ہے۔ 😅

اب، آئیے ان بادلوں کو ایک کامل لوپ میں منتقل کرنے کے حل میں غوطہ لگائیں۔ دو تصویری نظارے اور تھوڑا سا حرکت پذیری کا جادو استعمال کرکے، آپ ایک لامتناہی، سیال حرکت پیدا کریں گے جو آپ کی ایپ کو ہموار اور چمکدار بنائے گی۔ اینیمیشن کو ٹھیک کرنے اور ان بادلوں کو بالکل ٹھیک کرنے کے لیے تیار ہیں؟ چلیں!

کلاؤڈ اینیمیشن اسکرپٹ iOS میں کیسے کام کرتا ہے۔

اوپر فراہم کردہ اسکرپٹ کی مثال میں، مقصد ایک ہموار، مسلسل کلاؤڈ اینیمیشن بنانا ہے جو iOS ایپ میں لامحدود طور پر لوپ کرتا ہے۔ مرکزی خیال دو کو متحرک کرنا ہے۔ UIImageView ایک ہی کلاؤڈ امیج کے ساتھ مثالیں، انہیں اسکرین پر افقی طور پر منتقل کرنا۔ یہ فریم کا استعمال کرتے ہوئے ان کی پوزیشنوں کو ایڈجسٹ کرکے کیا جاتا ہے۔ origin.x جائیداد اور ان پوزیشنوں پر حرکت پذیری کا اطلاق کرنا۔ تصویر کے دو نظارے اس لیے استعمال کیے جاتے ہیں کہ جب ایک اسکرین سے باہر نکلتا ہے، تو دوسرا اس کی جگہ لینے کے لیے تیار ہوتا ہے، جس سے ہموار لوپ کا اثر پیدا ہوتا ہے۔ تصویری نظاروں کی حرکت کو متحرک کرکے، آپ یہ وہم دے سکتے ہیں کہ بادل مسلسل آسمان پر بہتے ہیں۔ 🚀

آئیے کوڈ کے اہم اجزاء کو توڑتے ہیں۔ پہلا قدم دو تصویری نظارے بنانا ہے، ہر ایک بادلوں کی ایک ہی تصویر رکھتا ہے۔ یہ تصویری نظارے اسکرین پر ساتھ ساتھ رکھے جاتے ہیں، دوسرا تصویری منظر جہاں سے شروع ہوتا ہے وہیں سے پہلا ختم ہوتا ہے، ایک مسلسل افق بناتا ہے۔ یہ سیٹ اپ اس بات کو یقینی بنانے کے لیے اہم ہے کہ جب تصویر کا پہلا منظر اسکرین کے کنارے تک پہنچ جاتا ہے، تو دوسرا تصویری منظر لینے کے لیے تیار ہے۔ تصویر کے نظارے کی پوزیشن کو استعمال کرکے کنٹرول کیا جاتا ہے۔ فریم پراپرٹی، جو پیرنٹ ویو میں آراء کے سائز اور پوزیشن دونوں کی وضاحت کرتی ہے۔ ہر تصویر کا منظر مختلف ایکس پوزیشن سے شروع ہوتا ہے: ایک 0 سے شروع ہوتا ہے، اور دوسرا اسکرین کی چوڑائی سے شروع ہوتا ہے۔

ایک بار تصویر کے نظارے ترتیب دینے کے بعد، اگلا مرحلہ ان کو متحرک کرنا ہے۔ یہ کے ساتھ کیا جاتا ہے UIView.animate فنکشن، جو وقت کے ساتھ خیالات کو متحرک کرنے کے لیے ذمہ دار ہے۔ دی UIView.animate فنکشن کئی پیرامیٹرز لیتا ہے: اینیمیشن کا دورانیہ، اینیمیشن شروع ہونے سے پہلے کوئی تاخیر، اینیمیشن کے اختیارات (جیسے اینیمیشن کو دہرانا)، اور اینیمیشن کا بلاک لاگو کیا جانا ہے۔ اس صورت میں، اینیمیشن کا دورانیہ 20 سیکنڈ پر سیٹ کیا گیا ہے، اور اینیمیشن کو استعمال کرتے ہوئے ہمیشہ کے لیے دہرایا جائے گا۔ .دوہرائیں اختیار دی .curviLinear آپشن یقینی بناتا ہے کہ اینیمیشن ایک مستقل رفتار سے چلتی ہے، ایک ہموار، لکیری حرکت پیدا کرتی ہے۔ امیجز کو آف سیٹ کرکے افقی طور پر منتقل کیا جاتا ہے۔ origin.x اسکرین کی چوڑائی کے مطابق۔

تاہم، کوڈ ناپسندیدہ نتائج پیدا کر سکتا ہے، جیسے کہ تصاویر کا غائب ہونا یا غلط سمت میں جانا۔ اس کی وجہ یہ ہے۔ فریم امیجز کو ری سیٹ کیے بغیر پراپرٹی کو براہ راست تبدیل کیا جا رہا ہے جب وہ اسکرین سے ہٹ جاتی ہیں۔ اس کا حل ایک طریقہ استعمال کرنا ہے۔ recycleClouds، جو تصویر کے نظارے کی پوزیشن کو دوبارہ سیٹ کرتا ہے جب وہ اسکرین کی حدود سے آگے بڑھتے ہیں۔ یہ اس بات کو یقینی بناتا ہے کہ تصاویر بغیر کسی رکاوٹ کے غائب ہو جائیں۔ یہ طریقہ امیج ویوز کی ایکس پوزیشن کو چیک کرتا ہے، اور جب کوئی آف اسکرین منتقل ہوتا ہے، تو اسے دوسری طرف ری سیٹ کر دیا جاتا ہے، جس سے لوپ جاری رہ سکتا ہے۔ اس کے علاوہ، استعمال کرتے ہوئے کمزور خود تکمیلی بلاک کے اندر اس بات کو یقینی بناتا ہے کہ مضبوط ریفرنس سائیکلوں کی وجہ سے کوئی میموری لیک نہ ہو، جس سے ایپ کی کارکردگی بہتر ہو۔

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 جیسے اختیارات کے ساتھ طریقہ .دوہرائیں لوپنگ کے لیے اور .curviLinear یکساں رفتار کے لیے۔

آخر میں، کارکردگی اور ہمواری کے لیے اپنے کوڈ کو بہتر بنانا اتنا ہی اہم ہے جتنا کہ بصری اثر کو حاصل کرنا۔ آپ کو میموری کا استعمال کم سے کم کرنا چاہیے اور اینیمیشن کے دوران غیر ضروری حساب کتاب سے گریز کرنا چاہیے۔ استعمال کرنا weak self بندش پر مبنی اینیمیشنز میں حوالہ جات برقرار رکھنے کے چکروں سے گریز کرکے میموری کے لیک کو روکنے میں مدد کرتے ہیں۔ مزید برآں، اگر حرکت پذیری پیچیدہ ہے یا اگر آپ کو مزید جدید تکنیکوں کی ضرورت ہے، تو استعمال کرنے پر غور کریں۔ CADisplayLink ریئل ٹائم فریم اپ ڈیٹس کے لیے، جو اینیمیشن کے وقت اور ہمواری پر زیادہ کنٹرول فراہم کرتا ہے۔ مختلف اسکرین کے سائز اور واقفیت پر اینیمیشن کی جانچ کرنا بھی بہت اہم ہے، کیونکہ یہ یقینی بنانے میں مدد کرتا ہے کہ اینیمیشن تمام آلات پر توقع کے مطابق کام کرتی ہے۔ 📱