منذ ستة أشهر ، قدمنا ​​واحدة من أكثر ميزات بادوو إثارة للإعجاب - البث المباشر . من بين أشياء أخرى ، يسمح للمستخدمين بالتعبير عن امتنانهم لبرامج البث المفضلة لديهم في شكل هدايا. أردنا أن نجعل هذه الهدايا مشرقة وجذابة قدر الإمكان ، لذلك قررنا إحياءها - بعبارة أخرى ، تنشيط. ولجعلها أكثر إثارة للاهتمام ، خططنا لتحديث الهدايا والرسوم المتحركة كل بضعة أسابيع.

ربما خمن مهندسو دائرة الرقابة الداخلية مقدار العمل الذي تجري مناقشته: من أجل إزالة الرسوم المتحركة القديمة وإضافة جديدة ، تحتاج إلى تنفيذ العديد من الإجراءات من جانب العميل. للقيام بذلك ، يجب إشراك فرق Android و iOS في كل إصدار ، ومع الوقت اللازم للموافقة على التحديث في App Store ، هذا يعني أن إطلاق كل إصدار مع الرسوم المتحركة المحدثة قد يستغرق عدة أيام. ومع ذلك ، تمكنا من حل هذه المشكلة ، والآن سأخبرك كيف.

هندسة الحلول

بحلول ذلك الوقت ، عرفنا بالفعل كيفية تصدير الرسوم المتحركة لـ Adobe After Effects (المشار إليها فيما يلي - AAE) بتنسيق يمكن فهمه لتطبيق iOS الخاص بنا باستخدام مكتبة Lottie. هذه المرة ذهبنا أبعد من ذلك: قررنا تخزين جميع الرسوم المتحركة ذات الصلة على الخادم وتنزيلها حسب الحاجة.



مثال للرسوم المتحركة الحقيقية في طلبنا ، تم الحصول عليها بهذه الطريقة:



ومع ذلك ، في هذا المنشور كمثال ، سأتخذ رسمًا بسيطًا أنشأته بنفسي. إنها ليست خلاقة كما هو الحال في Badoo ، لكنها مناسبة تمامًا لإظهار نهجنا.

تصدير الرسوم المتحركة

يمكن العثور على مشروع AAE الذي أستخدمه مع مصادر أخرى على GitHub . لذلك ، عند فتح المشروع الموجود في _raw/animations/Fancy/Fancy.aep ، سترى نافذة:



الآن لا أتحدث عن عملية إنشاء رسوم متحركة في AAE ، ولكن عن كيفية استيراد الرسوم المتحركة الموجودة من AAE إلى تنسيق مناسب لتطبيق iOS باستخدام البرنامج المساعد Bodymovin .

بعد تثبيت المكوّن الإضافي ، افتحه عن طريق تحديد Window / Extensions / Bodymovin من القائمة :



ستظهر نافذة Bodymovin ، والتي يمكنك من خلالها تحديد الرسوم المتحركة للتصدير ، مجلد لحفظ الملف الناتج وفتح إعدادات التصدير:



في إعدادات الرسوم المتحركة ، يمكننا أن نطلب من Bodymovin تضمين الموارد في ملف JSON عن طريق تحديد Assets / Include في json :



أخيرًا ، عن طريق الضغط على زر Render ، نقوم بتصدير وحفظ التركيبة المتحركة المحددة إلى ملف.

تخزين الرسوم المتحركة على الخادم

لنفترض أننا حمّلنا ملفات JSON المتحركة المرفقة إلى خادم ويب. في حالتنا ، للبساطة ، لقد وضعت لهم في مستودع المشروع على جيثب. الرسوم المتحركة متوفرة هنا:

• الغيوم
• الألعاب النارية

الرابط الأساسي https://raw.githubusercontent.com/chupakabr/server-provided-animations/master/_raw/rendered-animations/

معرفات الرسوم المتحركة:

• clouds.json
  
• fireworks.json
  

ملاحظة: هل تبحث عن خادم ويب Swift للرسوم المتحركة؟ الحل متاح هنا ، وشرح مفصل في هذه المقالة .

لذلك ، لدينا خادم يعمل به رسوم متحركة ، لذلك حان الوقت للانتقال إلى الجزء الأكثر إثارة: تقديم الرسوم المتحركة على الشاشة.

عرض الرسوم المتحركة

الآن أنصحك بفتح مشروع تجريبي لتطبيق 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     } } // ... 

ViewModel بتحديث خاصية الرسوم المتحركة المحددة عندما يتلقى استجابة HTTP الصحيحة من خادم به كائن JSON غير فارغ. يتم استخدام هذه البيانات بواسطة طبقة العرض التقديمي لعرض الرسوم المتحركة.

طبقة العرض

يمكننا الآن استخدام 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.

لسوء الحظ ، لم أتمكن من استيراد ملفات SVG إلى AAE (حاولت!).

يمكنك معرفة المزيد حول الحيل وحل المشاكل المحتملة من هذه المقالة المثيرة للاهتمام من قبل زميلي Radoslaw Sesiva .

الخاتمة

لذا ، ما الذي يعطينا تنزيل الرسوم المتحركة من الخادم؟ تتمثل الفائدة الأكثر وضوحًا لهذا النهج في القدرة على مشاركة جميع المشاركين في عملية تحديث الرسوم المتحركة. بعبارة أخرى ، لإطلاق رسم متحرك جديد ، يحتاج المصممون فقط إلى تزويد فريق الخادم بملف JSON المناسب. لإزالة الرسوم المتحركة على العميل ، قم ببساطة بإزالتها من الخادم. سهل وسريع.

من الرائع أيضًا أن يتم تنفيذ نفس الوظائف على جميع الأنظمة الأساسية المدعومة (iOS و Android و Web) ، دون إجراء تغييرات على بروتوكول خادم العميل ورمز الخادم وملفات الرسوم المتحركة نفسها مباشرة على العميل.

هذا كل شيء. شكرا لاهتمامكم!

---

روابط مفيدة

• " وراء الكواليس مع استيراد Adobe After Effects للرسوم المتحركة إلى Badoo iOS app " بواسطة Radoslaw Cieciwa ؛
• البرنامج المساعد Bodymovin ل AAE من AirbnbEng .
• المشروع بأكمله متاح هنا على جيثب .
• تثبيت البرنامج المساعد bodymovin ل AAE بواسطة AirbnbEng ؛
• Lottie دائرة الرقابة الداخلية مكتبة AirbnbEng .
• " REST API مع Swift on Vapor " Valery Chevtaev
  المثبت المساعد ZXP ل AAE.