कैसे CAAnimation ने मुझे एनिमेशन बनाने के अपने डर पर विजय प्राप्त करने में मदद की

यह लेख सहज एनिमेशन बनाने के लिए iOS में CA एनिमेशन का उपयोग करने पर केंद्रित है।

IOS के साथ काम करने के अपने शुरुआती दिनों के दौरान, जब भी कोई डिज़ाइनर मेरे पास आता था और जिस ऐप पर वे काम कर रहे थे, उसमें कुछ एनीमेशन के लिए कहता था, तो मैं बहुत घबरा जाता था।

मुझे लगता था कि एनिमेशन के लिए डिज़ाइन तैयार करना आसान है - लेकिन दूसरी ओर, इसे लागू करना बहुत मुश्किल काम था।

मुझे कार्यान्वयन के लिए Google, StackOverflow और मेरे साथियों से मदद मिलेगी।
इस प्रक्रिया के दौरान मैंने एनिमेशन का एक फोबिया विकसित किया और हमेशा उनसे बचने की कोशिश की। लेकिन एक दिन वह सब बदल गया।

सीएएएनीमेशन ढूँढना

एक बार, मुझे एक दृश्य में छवियों के अनुक्रम को चेतन करना पड़ा। तो मेरा पहला कदम क्या था? जाहिर है, स्टैक ओवरफ्लो!

पहले लिंक को कोड मिला।

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

बहुत सीधा सा लगता है ना? अगर यह इतना आसान होता तो मैं यह लेख नहीं लिख रहा होता।

यह वह एनिमेशन है जिसकी आवश्यकता थी:

और जैसा कि शायद स्पष्ट हो गया है, मैं इसके करीब कहीं नहीं था। मैं फँस गया था। मुझे उस एनीमेशन में इतने सारे अनुकूलन कैसे करना चाहिए और उन सभी को सिंक करना चाहिए?

तब मेरे सहयोगी ने मुझे सीएएएनीमेशन आजमाने को कहा। मैंने इसके बारे में पढ़ा और इसे एक नमूना परियोजना पर आजमाया। मेरे आश्चर्य के लिए, यह वास्तव में शक्तिशाली और उपयोग में आसान था।

कोर एनिमेशन क्या है?

कोर एनिमेशन आपको लगभग शून्य 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 . का उपयोग किया ।

CABasicAnimation वर्ग आपको दो मानों के बीच एक परत गुण (जो पृष्ठभूमि का रंग, अस्पष्टता, स्थिति, पैमाने हो सकता है) को चेतन करने में मदद करता है। आपको बस एक शुरुआत और अंत मूल्य देना है, और बाकी का ध्यान रखा जाएगा। एनीमेशन अगले रन लूप में तुरंत शुरू हो जाता है जैसा कि यहां पूरी तरह से वर्णित है।

अब, अपनी समस्या पर वापस जाएं।

इसे लागू करने के लिए, मैंने दो छवि दृश्य लिए और उनमें दो अलग-अलग चित्र जोड़े। फिर मैं सीएएएनीमेशन का उपयोग करके एक के बाद एक उन्हें एनिमेट करता रहा।

आप यहां स्रोत कोड पा सकते हैं।

यदि आप अंतिम gif की जांच करते हैं, तो आप देखेंगे कि कुछ गड़बड़ है। इससे पहले कि उपहार बॉक्स की पहली छवि दृश्य से बाहर हो जाए, हेडफ़ोन कुछ समय के लिए फ्लैश करता है और फिर छवि ऊपर की ओर जाती है।

ऐसा क्यों हो रहा है?

ऐसा इसलिए है क्योंकि जैसे ही हम छवि दृश्य में एनीमेशन जोड़ते हैं, हम उस दृश्य में अगली छवि जोड़ रहे हैं (पंक्तियाँ संख्या 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)
}

यहां हम इस मुद्दे से जूझ रहे हैं कि एनीमेशन में दोनों छवियों को कैसे सिंक किया जाए। लेकिन CAAnimation के साथ हमेशा एक समाधान होता है।

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() पर कॉल करें जो ब्लॉक में एनिमेशन शुरू करेगा।

आइए देखें कि अब हमारा एनिमेशन कैसा दिखता है:

एक आखिरी चीज जो मुझे करने की ज़रूरत थी वह थी एनीमेशन में स्प्रिंग इफेक्ट जोड़ना। शुक्र है, CAAnimation के पास इसका भी एक समाधान था।

CA स्प्रिंग एनिमेशन

CA स्प्रिंग एनिमेशन, जब एक परत में जोड़ा जाता है, तो इसे एक स्प्रिंग जैसा प्रभाव देता है, जिससे यह एक स्प्रिंग द्वारा लक्ष्य की ओर खींचा हुआ प्रतीत होता है।

परत लक्ष्य से जितनी दूर होगी, उसकी ओर त्वरण उतना ही अधिक होगा।

यह शारीरिक रूप से आधारित विशेषताओं जैसे वसंत की नमी और कठोरता पर नियंत्रण की अनुमति देता है। - दस्तावेज़

आप इसके बारे में Apple के दस्तावेज़ों से अधिक पढ़ सकते हैं: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 उपयोग

ये बस कुछ फायदे हैं। संभावनाएं अनंत हैं।

अब, जब भी एनिमेशन के लिए आवश्यकताएं आती हैं, मैं उन्हें डिजाइन करने और कार्यान्वित करने में आत्मविश्वास महसूस करता हूं। और मुझे उम्मीद है कि इसे पढ़ने के बाद आप भी ऐसा ही महसूस करेंगे।
कोई सुझाव या प्रतिक्रिया देने के लिए स्वतंत्र महसूस करें।