हाय सब लोग! लगभग छह महीने पहले हमने एक सबसे रोमांचक फीचर लॉन्च किया: लाइव स्ट्रीमिंग । इसकी मुख्य कार्यक्षमता में से एक यह है कि दर्शक अपनी प्रशंसा व्यक्त करने के लिए अपने पसंदीदा स्ट्रीमर को उपहार भेज सकते हैं। हम उपहारों को फैंसी और जितना संभव हो उतना आकर्षक बनाना चाहते थे, इसलिए उनमें से कुछ को वास्तव में जीवंत बनाने का फैसला किया गया था, और इसके द्वारा इसका मतलब एनिमेटेड था। और लोगों को और भी अधिक व्यस्त करने के लिए, हम, टीम ने, हर कुछ हफ्तों में उन उपहारों और एनिमेशन को अपडेट करने की योजना बनाई।

एक iOS इंजीनियर के रूप में, आप पहले से ही हमारे सामने मौजूद चुनौती का अनुमान लगा सकते हैं: नए एनिमेशन जोड़ने और पुराने को हटाने की आवश्यकता को क्लाइंट की ओर से उचित मात्रा में काम करने की आवश्यकता थी। हमें हर रिलीज़ के लिए एंड्रॉइड और iOS दोनों विकास टीमों की आवश्यकता होगी - जो, जब ऐप स्टोर की समीक्षा की मात्रा और अनुमोदन के साथ जोड़ते हैं, तो इसका मतलब होगा कि प्रत्येक अपडेट के लाइव होने से पहले के दिन हो सकते हैं। लेकिन हमने समस्या हल कर दी है, और मैं आपको समझाने जा रहा हूं कि कैसे।

समाधान अवलोकन

इस चरण तक, हमें पहले से ही पता था कि एडोब iOS इफेक्ट्स (AAE) एनिमेशन को हमारे iOS ऐप द्वारा पढ़ने योग्य Lottie लाइब्रेरी का उपयोग करके कैसे निर्यात किया जाए । इस बार हालांकि, हम कुछ और आगे बढ़े: हमने एक तरह की एनीमेशन भंडारण सेवा बनाने का फैसला किया, जो इंटरनेट के माध्यम से उपलब्ध है। दूसरे शब्दों में, हम सर्वर पर सभी वास्तविक एनिमेशनों को संग्रहीत करेंगे और उन्हें मांग पर ग्राहक ऐप्स को वितरित करेंगे:



यहां डेवलपर के मशीन पर iOS सिम्युलेटर में अंतिम समाधान जैसा दिखता है:


हालांकि, इस पोस्ट में, मैं जिस उदाहरण का उपयोग करने जा रहा हूं वह एक बहुत ही सरल एनीमेशन है जिसे मैंने खुद बनाया है। यह एक के रूप में फैंसी के रूप में नहीं है, लेकिन यह वर्णित दृष्टिकोण की क्षमता को प्रदर्शित करने के लिए पर्याप्त है।

निर्यात एनिमेशन

मैं जिन एनिमेशनों का उपयोग कर रहा हूँ उनका Adobe After Effects (AAE) प्रोजेक्ट यहाँ अन्य स्रोत फ़ाइलों के साथ जीथब पर पाया जा सकता है। तो, _raw/animations/Fancy/Fancy.aep में स्थित AAE एनीमेशन प्रोजेक्ट खोलने के बाद, आपको एक विंडो _raw/animations/Fancy/Fancy.aep चाहिए जैसे:



इस बिंदु पर, मैं AEE में एनिमेशन कैसे बना रहा हूं, इस बारे में नहीं जा रहा हूं, लेकिन जो मैं समझाने जा रहा हूं वह यह है कि कैसे पहले से ही मौजूद एनिमेशन को iOS ऐप- रीडेबल फॉर्मेट में Bodymovin प्लगइन का उपयोग करके आयात किया जाए।

यह सुनिश्चित करने के बाद कि प्लग इन स्थापित है, मेनू में विंडो / एक्सटेंशन / बोडोमोविन विकल्प का चयन करके इसे खोलें:



अब आपको Bodymovin विंडो देखनी चाहिए, जहाँ आप उस एनीमेशन का चयन कर सकते हैं जिसे आप निर्यात करना चाहते हैं, आउटपुट फ़ाइल पथ निर्दिष्ट करें और फिर निर्यात प्रक्रिया खोलें:



चयनित और खोली गई एनीमेशन सेटिंग के बाद, अब हम Bodymovin को आस्तियों की जांच करके परिणामी JSON फ़ाइल में संपत्ति को एम्बेड करने के लिए कह सकते हैं / json विकल्प में शामिल करें :



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

सर्वर पर एनिमेशन संग्रहीत करना

आइए मान लें कि हमने इंटरनेट के माध्यम से अपने पसंदीदा वेब सर्वर पर हमारे प्रदान किए गए एनिमेशन JSON फ़ाइलों को स्थानांतरित कर दिया है। हमारे मामले में, सादगी के लिए, मैंने उन्हें इस प्रोजेक्ट के गिथब रिपॉजिटरी में अपलोड किया है। एनिमेशन यहाँ उपलब्ध हैं:

• बादलों का एनीमेशन
• आतशबाज़ी एनीमेशन

आधार URL: https://raw.githubusercontent.com/chupakabr/server-provided-animations/master/_raw/rendered-animations/

एनीमेशन-विशिष्ट आईडी:

• clouds.json
• fireworks.json

नोट: स्विफ्ट में लिखे गए एनिमेशन प्रदाता वेब सर्वर की तलाश है? गितुब पर यहाँ समाधान और इस लेख में एक विस्तृत विवरण प्राप्त करें ।

इस बिंदु पर, हमारे पास एक पूरी तरह से कार्यात्मक एनिमेशन-प्रदाता सर्वर है, इसलिए यह सबसे रोमांचक भाग पर जाने का समय है: हमारे उपयोगकर्ताओं के लिए एनिमेशन प्रस्तुत करना।

एनिमेशन ला रहे हैं और प्रस्तुत कर रहे हैं

इस बिंदु पर मैं दृढ़ता से Client/ServerProvidedAnimation.xcworkspace पर स्थित हमारे उदाहरण के iOS ऐप प्रोजेक्ट को खोलने की सलाह देता Client/ServerProvidedAnimation.xcworkspace क्योंकि इसमें पहले से ही सभी आवश्यक बॉयलरप्लेट कोड और कॉन्फ़िगरेशन हैं।

एनिमेशन डेटा लोड हो रहा है

यह देखते हुए कि एनीमेशन डेटा प्राप्त करने के लिए REST एपीआई एंडपॉइंट्स अब उठ रहे हैं और चल रहे हैं, यह डेटा प्रदाता प्रोटोकॉल को शुरू करने और इसके सर्वर कार्यान्वयन को जोड़ने का समय है:

 import Lottie protocol AnimationsProviderProtocol { typealias Completion = (_ animation: LOTComposition?) -> Void func loadAnimation(byId id: String, completion: @escaping Completion) } final class ServerAnimationProvider: AnimationsProviderProtocol { private let endpoint: URL init(endpoint: URL) { self.endpoint = endpoint } func loadAnimation(byId id: String, completion: @escaping Completion) { let path = "/\(id).json" guard let animationUrl = URL(string: path, relativeTo: self.endpoint) else { completion(nil) return } URLSession.shared.invalidateAndCancel() let task = URLSession.shared.dataTask(with: animationUrl) { (data, response, error) in guard error == nil, let data = data, let json = self.parseJson(from: data) else { completion(nil) return } let animation = LOTComposition(json: json) completion(animation) } task.resume() } private func parseJson(from data: Data?) -> [AnyHashable : Any]? { guard let data = data else { return nil } do { let json = try JSONSerialization.jsonObject(with: data, options: []) as? [AnyHashable : Any] return json } catch { return nil } } } 

यह डेटा प्रदाता वर्ग हमें JSON प्रारूप में सर्वर से एनिमेशन को मांग पर लोड करने और उन्हें UI पर रेंडर करने के लिए मेमोरी में रखने की अनुमति देता है। यह मानते हुए कि हम MVVM पैटर्न का अनुसरण कर रहे हैं, इसे आसानी से ViewModel इकाई में निम्न तरीके से उपयोग किया जा सकता है:

  // ... private let animationProvider: AnimationsProviderProtocol private(set) var animationModel: LOTComposition? // … func loadAnimation(byId animationId: String) {     self.animationProvider.loadAnimation(byId: animationId) { [weak self] (animationModel) in         self?.animationModel = animationModel     } } // ... 

ViewModel चयनित एनीमेशन डेटा प्रॉपर्टी को तब अपडेट करता है जब उसे सर्वर से एक गैर-रिक्त JSON ऑब्जेक्ट के साथ एक वैध HTTP प्रतिक्रिया मिलती है। एनीमेशन रेंडरिंग को शेड्यूल करने के लिए इस डेटा का इस्तेमाल प्रेजेंटेशन लेयर द्वारा किया जाता है।

प्रस्तुति परत

अब हम अपने ViewModel का उपयोग एनीमेशन डेटा तक पहुंचने और इसे "ऑन टैप" एक्शन हैंडलर में यूआई के माध्यम से पेश करने के लिए कर सकते हैं:

 class ViewController: UIViewController {   // ...   @IBOutlet weak var animationContainer: UIView!   override func viewDidLoad() {       super.viewDidLoad()       // ...       self.animationView = {           let view = LOTAnimationView(frame: self.animationContainer.bounds)           self.animationContainer.addSubview(view)           return view       }()   }   @IBAction func onPlayAnimationAction(_ sender: Any) {       self.animationView.stop()       self.animationView.sceneModel = self.viewModel.animationModel       self.animationView.play()   } } 

असल में, हमारे पास यहां एक बटन हैंडलर है जो LOTAnimationView उदाहरण के अपडेट को ट्रिगर करता है, जिसमें ViewModel से आने वाले सबसे हाल के एनीमेशन डेटा हैं।

यहाँ अंतिम परिणाम कैसा दिखता है:


यह बहुत ज्यादा है। एनिमेशन अब तैयार किए गए REST API एंडपॉइंट से लोड किए जा रहे हैं और मांग पर क्लाइंट को प्रदान किए जाते हैं।

युक्तियाँ और सीमाएँ

युक्तियाँ और चालें:

• AAE रेखापुंज और वेक्टर ग्राफिक्स सहित अधिकांश संपत्ति प्रकारों के उपयोग की अनुमति देता है;
• Bodymovin सभी वस्तुओं को आउटपुट JSON एनीमेशन फ़ाइल (base64 एन्कोडिंग का उपयोग करके) में एम्बेड करना संभव बनाता है - इसका मतलब है कि हम ग्राहक की तरफ से लोड होने वाली अलग-अलग संपत्तियों से बच सकते हैं;
• एनिमेशन के लिए, आपके पास AAE में सदिश में सीधे ड्राइंग या केवल Adobe Illustrator वेक्टर ग्राफिक्स आयात करने के बीच विकल्प है।

दुर्भाग्य से, यह एसवीजी वेक्टर ग्राफिक्स को एएई में आयात करना संभव नहीं है (मैंने कोशिश की है!)।

मेरे सहकर्मी रैडोसॉल साइकेवा द्वारा लिखे गए इस अद्भुत लेख में अधिक चाल और संभावित समस्याओं का वर्णन किया गया है।

निष्कर्ष

तो, सर्वर-प्रदत्त एनिमेशन हमें क्या देता है? इस दृष्टिकोण का सबसे स्पष्ट लाभ एनिमेशन अपडेट प्रवाह के सभी हितधारकों को अलग करने की क्षमता है। दूसरे शब्दों में, एक फैंसी नया एनीमेशन जारी करने के लिए, सभी डिजाइनरों को सर्वर टीम को एनीमेशन का JSON प्रतिनिधित्व प्रदान करना है। और एक को हटाने के लिए, सर्वर टीम को बस खोज सेवा से उस विशेष एनीमेशन को निकालना होगा। कोई समय बर्बाद नहीं हुआ!

एक और अच्छी बात यह है कि मौजूदा सर्वर कार्यक्षमता या कच्चे एनिमेशन को समायोजित किए बिना समान कार्यक्षमता को सभी समर्थित क्लाइंट प्लेटफ़ॉर्म (iOS, Android, वेब, ..) पर लागू किया जा सकता है।

आज के लिए इतना ही! पढ़ने के लिए धन्यवाद

साधन

• Radoslaw Cieciwa द्वारा " Adobe iOS ऐप में इफेक्ट्स एनीमेशन के बाद इंपोर्ट होने के साथ दृश्यों के पीछे ";
• AirbnbEng द्वारा AAE के लिए Bodymovin प्लगइन ;
• पूरा प्रोजेक्ट यहाँ जीथब पर उपलब्ध है ;
• AirbnbEng द्वारा AAE के लिए bodymovin प्लगइन स्थापित करना ;
• AirbnbEng द्वारा Lottie iOS लाइब्रेरी ;
• Valerii Che vtaev द्वारा " REST API with Swift with Vapor ";
• AAE के लिए ZXP प्लगइन इंस्टॉलर ।