কীভাবে CAAএনিমেশন আমাকে অ্যানিমেশন তৈরি করার ভয়কে জয় করতে সাহায্য করেছে

এই নিবন্ধটি মসৃণ অ্যানিমেশন তৈরি করতে iOS-এ CA অ্যানিমেশন ব্যবহার করার উপর ফোকাস করে।

আইওএস-এর সাথে কাজ করার প্রথম দিনগুলিতে, যখনই কোনও ডিজাইনার আমার কাছে আসেন এবং তারা যে অ্যাপে কাজ করছেন তাতে কিছু অ্যানিমেশনের জন্য জিজ্ঞাসা করলে আমি খুব নার্ভাস হয়ে পড়তাম।

আমি মনে করতাম অ্যানিমেশনের জন্য ডিজাইন নিয়ে আসা সহজ ছিল – কিন্তু অন্যদিকে, এটি বাস্তবায়ন করা ছিল খুবই কঠিন কাজ।

বাস্তবায়নের জন্য আমি Google, StackOverflow এবং আমার সহকর্মীদের থেকে সাহায্য পাব।
প্রক্রিয়া চলাকালীন আমি অ্যানিমেশনের একটি ফোবিয়া তৈরি করেছি এবং সর্বদা সেগুলি এড়াতে চেষ্টা করেছি। কিন্তু একদিন সব বদলে গেল।

CAAএনিমেশন খোঁজা

একবার, আমাকে একটি দৃশ্যে চিত্রগুলির একটি ক্রম অ্যানিমেট করতে হয়েছিল। তাহলে আমার প্রথম পদক্ষেপ কি ছিল? স্পষ্টতই, স্ট্যাকওভারফ্লো!

প্রথম লিঙ্কটি কোড পেয়েছে৷

let image_1 = UIImage(named: "image-1")!
let image_2 = UIImage(named: "image-2")!
let image_3 = UIImage(named: "image-3")!
let images = [image_1, image_2, image_3]
let animatedImage = UIImage.animatedImage(with: images, duration: 2.0)
imageView.image = animatedImage

বেশ সোজা মনে হচ্ছে? যদি এটি এত সহজ হয় তবে আমি এই নিবন্ধটি লিখতাম না।

এটি হল অ্যানিমেশন যা প্রয়োজন ছিল:

এবং সম্ভবত স্পষ্ট হয়ে উঠেছে, আমি এর কাছাকাছি কোথাও ছিলাম না। আমি আটকে গিয়েছিলাম। আমি কীভাবে সেই অ্যানিমেশনে এতগুলি কাস্টমাইজেশন করব এবং সেগুলিকে সিঙ্ক করব?

তারপর আমার সহকর্মী আমাকে CAAএনিমেশন চেষ্টা করতে বললেন। আমি এটি সম্পর্কে পড়েছি এবং একটি নমুনা প্রকল্পে এটি চেষ্টা করেছি। আমার বিস্ময়ের জন্য, এটি সত্যিই শক্তিশালী এবং ব্যবহার করা সহজ ছিল৷

কোর অ্যানিমেশন কি?

কোর অ্যানিমেশন আপনাকে প্রায় শূন্য CPU ব্যবহার সহ একাধিক অ্যানিমেশন কার্যকর করতে সহায়তা করে।
এটি আপনাকে উচ্চ ফ্রেম রেট এবং অনেক কাস্টমাইজেশন দেয় যা আপনি খুব কম কোডের সাথে ব্যবহার করতে পারেন৷

আপনি এখানে ডক্সে আরও বিশদ জানতে পারেন:https://developer.apple.com/documentation/quartzcore

আমি কয়েক ঘন্টার মধ্যে একটি মৌলিক বাস্তবায়ন করতে সক্ষম হয়েছি:

func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) {
        let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition)
        firstImageView.layer.add(basicAnimation1, forKey: "position")        
        let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition)
        secondImageView.layer.add(basicAnimation2, forKey: "position")
        self.addNextImage(forImageView: firstImageView)
    }
    func getBasicAnimation(withInitialPostion initialPos: CGPoint, finalPos: CGPoint) -> CABasicAnimation {
        let basicAnimation = CABasicAnimation(keyPath: "position")
        basicAnimation.fromValue = NSValue(cgPoint: initialPos)
        basicAnimation.toValue = NSValue(cgPoint: finalPos)
        basicAnimation.duration = 1
        basicAnimation.isRemovedOnCompletion = false
        basicAnimation.fillMode = CAMediaTimingFillMode.forwards
        basicAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
        return basicAnimation
    }

এই বাস্তবায়নের জন্য, আমি CABasicAnimation ব্যবহার করেছি .

CABasic অ্যানিমেশন ক্লাস আপনাকে দুটি মানের মধ্যে একটি স্তর সম্পত্তি (যা ব্যাকগ্রাউন্ডের রঙ, অস্বচ্ছতা, অবস্থান, স্কেল হতে পারে) অ্যানিমেট করতে সহায়তা করে। আপনাকে কেবল একটি শুরু এবং শেষ মান দিতে হবে এবং বাকিগুলি যত্ন নেওয়া হবে। অ্যানিমেশনটি পরবর্তী রান লুপে অবিলম্বে শুরু হয় যেমনটি এখানে আরও সম্পূর্ণভাবে বর্ণনা করা হয়েছে।

এখন, আমাদের সমস্যায় ফিরে যাই।

এটি বাস্তবায়নের জন্য, আমি দুটি চিত্র দর্শন নিয়েছি এবং তাদের সাথে দুটি পৃথক চিত্র যুক্ত করেছি। তারপর আমি CAAএনিমেশন ব্যবহার করে সেগুলোকে একের পর এক অ্যানিমেট করতে থাকলাম।

আপনি এখানে সোর্স কোড খুঁজে পেতে পারেন।

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

কেন এটা ঘটছে?

কারণ আমরা ছবির ভিউতে অ্যানিমেশন যোগ করার সাথে সাথেই আমরা সেই ভিউতে পরবর্তী ছবি যোগ করছি (লাইন নম্বর 5 এবং 6):

private func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) {
    let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition)
    firstImageView.layer.add(basicAnimation1, forKey: "position")    
    let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition)
    secondImageView.layer.add(basicAnimation2, forKey: "position")
    self.addNextImage(forImageView: firstImageView)
}

এখানে আমরা অ্যানিমেশনে উভয় ইমেজ কিভাবে সিঙ্ক করতে হয় সেই সমস্যার সাথে লড়াই করছি। তবে CAAএনিমেশনের সাথে সবসময় একটি সমাধান থাকে।

CA লেনদেন

CA লেনদেন আমাদের একসাথে একাধিক অ্যানিমেশন সিঙ্ক করতে সাহায্য করে। এটি নিশ্চিত করে যে সমস্ত অ্যানিমেশন যা আমরা একসাথে বান্ডিল করেছি সব একই সময়ে শুরু হয়৷

এছাড়াও, আপনি আপনার অ্যানিমেশনগুলিতে একটি সমাপ্তি ব্লক দিতে পারেন, যা এক বান্ডেলে আপনার সমস্ত অ্যানিমেশন সম্পূর্ণ হয়ে গেলে কার্যকর করা হবে।

আপনি এখানে এটি সম্পর্কে আরও পড়তে পারেন।

private func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) {
    CATransaction.begin()
    CATransaction.setCompletionBlock {
        self.addNextImage(forImageView: firstImageView)
    }
    let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition)
    firstImageView.layer.add(basicAnimation1, forKey: "position")
    CATransaction.commit()
    
    let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition)
    secondImageView.layer.add(basicAnimation2, forKey: "position")
}

আপনি CATransaction.begin() লিখে শুরু করুন . তারপর, আপনার সমস্ত অ্যানিমেশন লিখুন যা আপনি সিঙ্কে করতে চান। অবশেষে, CATransaction.commit() কল করুন যা ব্লকে অ্যানিমেশন শুরু করবে।

আসুন দেখি আমাদের অ্যানিমেশন এখন কেমন দেখাচ্ছে:

একটি শেষ জিনিস যা আমাকে করতে হবে তা হল অ্যানিমেশনে স্প্রিং প্রভাব যুক্ত করা। সৌভাগ্যক্রমে, CAAএনিমেশন এর জন্যও একটি সমাধান ছিল।

CA স্প্রিং অ্যানিমেশন

CA স্প্রিং অ্যানিমেশন, যখন একটি স্তরে যোগ করা হয়, তখন এটিতে একটি স্প্রিং-এর মতো প্রভাব দেয়, যাতে এটি একটি স্প্রিং দ্বারা লক্ষ্যের দিকে টানা হয় বলে মনে হয়।

স্তরটি লক্ষ্য থেকে যত এগিয়ে, তার দিকে ত্বরণ তত বেশি।

এটি বসন্তের স্যাঁতসেঁতে এবং শক্ত হওয়ার মতো শারীরিক-ভিত্তিক বৈশিষ্ট্যগুলির উপর নিয়ন্ত্রণের অনুমতি দেয়। – ডক্স

আপনি অ্যাপল ডকুমেন্টেশন থেকে এটি সম্পর্কে আরও পড়তে পারেন:https://developer.apple.com/documentation/quartzcore/caspringanimation

আসুন এটিকে আমাদের বিদ্যমান কোডে প্রয়োগ করি:

private func getSpringAnimation(withInitialPostion initialPos: CGPoint, finalPos: CGPoint) -> CASpringAnimation {
    let basicAnimation = CASpringAnimation(keyPath: "position")
    basicAnimation.fromValue = NSValue(cgPoint: initialPos)
    basicAnimation.toValue = NSValue(cgPoint: finalPos)
    basicAnimation.duration = basicAnimation.settlingDuration
    basicAnimation.damping = 14
    basicAnimation.initialVelocity = 5
    basicAnimation.isRemovedOnCompletion = false
    basicAnimation.fillMode = CAMediaTimingFillMode.forwards
    return basicAnimation
}

আমার কাজ এখানেই শেষ।

সংক্ষেপে, এখানে CA অ্যানিমেশন ব্যবহার করার কিছু সুবিধা রয়েছে:

• এগুলি ব্যবহার করা এবং প্রয়োগ করা সহজ
• অনেক কাস্টমাইজেশন উপলব্ধ আছে
• এটি একাধিক অ্যানিমেশন সিঙ্ক করা সম্ভব
• প্রায় শূন্য CPU ব্যবহার

এই মাত্র কয়েকটি সুবিধা। সম্ভাবনা অন্তহীন।

এখন, যখনই অ্যানিমেশনের জন্য প্রয়োজনীয়তা আসে, আমি সেগুলি ডিজাইন এবং বাস্তবায়নে আত্মবিশ্বাসী বোধ করি। এবং আমি আশা করি আপনিও এটি পড়ার পরে একই রকম অনুভব করবেন।
কোনো পরামর্শ বা প্রতিক্রিয়া জানাতে দ্বিধা বোধ করুন৷