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

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

समाधान वास्तुकला

उस समय तक, हमें पहले से ही पता था कि एडोब आफ्टर इफेक्ट्स एनिमेशन (बाद में - एएई) को कैसे निर्यात करना है, लोटी लाइब्रेरी का उपयोग करके हमारे iOS एप्लिकेशन के लिए समझ में आता है । इस बार हम थोड़ा आगे बढ़े: हमने सर्वर पर सभी प्रासंगिक एनिमेशनों को संग्रहीत करने और आवश्यकतानुसार डाउनलोड करने का निर्णय लिया।



इस तरह से प्राप्त हमारे आवेदन में वास्तविक एनीमेशन का एक उदाहरण:



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

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

एएई परियोजना जो मैं उपयोग करता हूं, उसे गीथहब पर अन्य स्रोतों के साथ मिल सकता है । इसलिए, _raw/animations/Fancy/Fancy.aep पर स्थित प्रोजेक्ट को खोलने पर, आपको एक विंडो दिखाई देगी:



अब मैं AAE में एनिमेशन बनाने की प्रक्रिया के बारे में बात नहीं कर रहा हूं, लेकिन Bodymovin प्लगइन का उपयोग करके iOS एप्लिकेशन के लिए उपयुक्त प्रारूप में मौजूदा एनिमेशन का आयात कैसे करें।

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



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



एनीमेशन सेटिंग्स में, हम बोडिमोविन को JSON फ़ाइल में संसाधन शामिल करने के लिए पूछ सकते हैं।



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

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

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

• बादल
• आतिशबाजी

आधार लिंक https://raw.githubusercontent.com/chupakabr/server-provided-animations/master/_raw/rendered-animations/

एनिमेशन आईडी:

• clouds.json
  
• fireworks.json
  

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

इसलिए, हमारे पास एनिमेशन के साथ एक कार्यशील सर्वर है, इसलिए यह सबसे रोमांचक भाग पर आगे बढ़ने का समय है: स्क्रीन पर एनिमेशन प्रदान करना।

एनीमेशन प्रदर्शन

अब मैं आपको हमारे iOS एप्लिकेशन के लिए एक डेमो प्रोजेक्ट खोलने की सलाह देता हूं, क्योंकि इसमें सभी आवश्यक कोड और सेटिंग्स हैं।

एनिमेशन डाउनलोड करें

यह देखते हुए कि डेटा प्राप्त करने के लिए REST API पहले से तैयार है, डेटा प्रदाता के प्रोटोकॉल को लागू करने और इसके कार्यान्वयन को जोड़ने का समय है, जो सर्वर से डेटा डाउनलोड करता है:

 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 प्रारूप में एनिमेशन डाउनलोड करने और उन्हें यूआई प्रदान करने के लिए मेमोरी में संग्रहीत करने की अनुमति देता है। मान लीजिए कि हम 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     } } // ... 

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

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

अब हम एनीमेशन डेटा का उपयोग करने के लिए 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 से डाउनलोड किए गए एनीमेशन को प्रदर्शित करता है
(सर्वर से)।

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

ट्रिक्स:

• एएई रास्टर और वेक्टर छवियों सहित अधिकांश प्रकार की वस्तुओं का समर्थन करता है;
• Bodymovin आपको बेस J64 का उपयोग करके अंतिम JSON फ़ाइल में सभी संसाधनों को एम्बेड करने की अनुमति देता है, और यह आपको क्लाइंट साइड पर अलग से लोडिंग संसाधनों से बचने की अनुमति देता है;
• आप या तो AAE में एक वेक्टर में सीधे आकर्षित कर सकते हैं या बस Adobe Illustrator प्रारूप में वेक्टर छवियों को आयात कर सकते हैं।

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

आप इस दिलचस्प लेख से मेरे सहयोगी रेडोसला सिसेवा की चाल और संभावित समस्याओं के बारे में अधिक जान सकते हैं।

निष्कर्ष

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

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

वह सब है। आपका ध्यान के लिए धन्यवाद!

---

उपयोगी लिंक

• Radoslaw Cieciwa द्वारा " Adobe iOS ऐप में इफेक्ट्स एनीमेशन के बाद इंपोर्ट होने के साथ दृश्यों के पीछे ";
• AirbnbEng द्वारा AAE के लिए Bodymovin प्लगइन ;
• पूरा प्रोजेक्ट GitHub पर यहां उपलब्ध है ;
• AirbnbEng द्वारा AAE के लिए bodymovin प्लगइन स्थापित करना ;
• AirbnbEng द्वारा Lottie iOS लाइब्रेरी ;
• " वाष्प पर स्विफ्ट के साथ रीस्ट एपीआई " वालेरी चेवेटेव
  AAE के लिए ZXP प्लगइन इंस्टॉलर ।