من Flash إلى Lottie إلى أجهزة الحالة: تطور الرسوم المتحركة الموجهة للويب
كيف انتقلت الرسوم المتحركة المتجهة للويب من Flash وActionScript إلى صادرات After Effects الخاصة بـ Lottie ثم إلى أوقات تشغيل آلة الحالة، وما الذي تغير في كل خطوة.
الوجبات الجاهزة الأساسية
قام Flash بدمج الرسوم المتحركة المتجهة والتفاعل في أداة واحدة، ولكنه تم تشغيله في مكون إضافي توقفت Adobe عن دعمه بعد 31 ديسمبر 2020. أعاد Lottie الرسوم المتحركة المتجهة مرة أخرى من خلال تشغيل الرسوم المتحركة After Effects، التي تم تصديرها كـ JSON مع Bodymovin، أصلاً على الويب والهاتف المحمول، ولكن يتم تشغيل هذه الرسوم المتحركة فقط. تضيف أوقات تشغيل آلة الحالة مثل Rive وExodeUI التفاعلية مرة أخرى إلى ملف التصميم.
Flash: الرسوم المتحركة والمنطق في مكان واحد
يتيح Flash للمصممين رسم المتجهات وتحريكها على مخطط زمني وإضافة سلوك باستخدام ActionScript، كل ذلك في ملف واحد. لقد دعمت الألعاب والإعلانات والمواقع بأكملها. كانت نقطة ضعفه هي المكون الإضافي: فهو يعمل خارج نطاق تقنيات المتصفح الخاصة، مع وجود مشكلات مستمرة في الأمان والأداء. أنهى Adobe دعم Flash Player بعد 31 ديسمبر 2020، وحظر تشغيل محتوى Flash اعتبارًا من 12 يناير 2021.
Lottie: المتجهات بدون البرنامج المساعد
Lottie، من Airbnb، يوزع الرسوم المتحركة Adobe After Effects المصدرة كـ JSON باستخدام البرنامج الإضافي Bodymovin ويعرضها محليًا على الويب، iOS، Android وReact Native. لقد جعل الحركة المتجهة الغنية عملية في التطبيقات مرة أخرى، ولا يزال التنسيق الأكثر دعمًا على نطاق واسع للرسوم المتحركة التي يتم تشغيلها ببساطة.
القطعة المفقودة: التفاعل
تصف ملفات Lottie جدولًا زمنيًا، وليس سلوكًا. إن جعل الرسوم المتحركة Lottie تستجيب للتمرير أو التحميل أو النجاح يعني كتابة التعليمات البرمجية حول المشغل. كان لدى Flash هذا السلوك مدمجًا؛ لقد فقده العالم الخالي من المكونات الإضافية.
أجهزة الحالة: السلوك في الملف مرة أخرى
تعمل أوقات تشغيل State-machine على إعادة فكرة Flash بدون المكون الإضافي. يتيح لك Rive تصميم رسوم متحركة متجهة وتوصيلها بجهاز الحالة الذي يتحكم الكود الخاص بك في مدخلاته. يطبق ExodeUI، الذي نصنعه، نفس الفكرة على واجهة مستخدم المنتج، ويضيف التخطيط وفيزياء الربيع والمنطق في ملف JSON مفتوح واحد يتم تشغيله بواسطة أوقات التشغيل لـ React وSwiftUI وFlutter والمزيد.
مفتاح Principle للتذكر
- يجمع Flash بين الرسوم المتحركة المتجهة والتفاعل في مكون إضافي
- أنهى Adobe دعم مشغل Flash بعد 31 ديسمبر 2020
- يقوم Lottie بتشغيل الرسوم المتحركة After Effects المصدرة باستخدام Bodymovin، محليًا
- تشغيل الرسوم المتحركة Lottie؛ التفاعل يحتاج إلى كود إضافي
- تعمل أوقات تشغيل جهاز الحالة على إعادة السلوك المؤلف إلى الملف
الأسئلة المتداولة
المصادر
- Adobe Flash Player End of Life — Adobe
- lottie-web — جيثب (إير بي إن بي)
- State Machine Playback — مستندات Rive