Flash से Lottie से राज्य मशीनों तक: वेब वेक्टर एनीमेशन का विकास
वेब वेक्टर एनीमेशन Flash और ActionScript से Lottie के After Effects एक्सपोर्ट और फिर स्टेट-मशीन रनटाइम में कैसे स्थानांतरित हुआ, और प्रत्येक चरण में क्या बदलाव आया।
कोर टेकअवे
Flash ने वेक्टर एनीमेशन और इंटरैक्टिविटी को एक टूल में संयोजित किया, लेकिन यह एक प्लगइन में चलता था जिसे Adobe ने 31 दिसंबर, 2020 के बाद समर्थन करना बंद कर दिया था। Lottie ने After Effects एनिमेशन चलाकर वेक्टर एनीमेशन को वापस लाया, Bodymovin के साथ JSON के रूप में निर्यात किया गया, मूल रूप से वेब और मोबाइल पर, लेकिन वे एनिमेशन केवल चलते हैं। Rive और ExodeUI जैसे स्टेट-मशीन रनटाइम डिज़ाइन फ़ाइल में इंटरएक्टिविटी जोड़ते हैं।
Flash: एनीमेशन और तर्क एक ही स्थान पर
Flash डिजाइनरों को वैक्टर बनाने, उन्हें एक टाइमलाइन पर एनिमेट करने और एक्शनस्क्रिप्ट के साथ व्यवहार को एक फ़ाइल में जोड़ने देता है। इसने गेम्स, विज्ञापनों और संपूर्ण वेबसाइटों को संचालित किया। इसकी कमजोरी प्लगइन थी: यह लगातार सुरक्षा और प्रदर्शन समस्याओं के साथ ब्राउज़र की अपनी तकनीकों के बाहर चलता था। Adobe ने 31 दिसंबर, 2020 के बाद Flash प्लेयर के लिए समर्थन समाप्त कर दिया और Flash सामग्री को 12 जनवरी, 2021 से चलने से रोक दिया।
Lottie: प्लगइन के बिना वैक्टर
Airbnb से Lottie, Bodymovin प्लगइन के साथ JSON के रूप में निर्यात किए गए Adobe After Effects एनिमेशन को पार्स करता है और उन्हें मूल रूप से वेब, iOS, Android और React Native पर प्रस्तुत करता है। इसने ऐप्स में रिच वेक्टर मोशन को फिर से व्यावहारिक बना दिया है, और यह अभी भी आसानी से चलने वाले एनिमेशन के लिए सबसे व्यापक रूप से समर्थित प्रारूप है।
गायब टुकड़ा: अन्तरक्रियाशीलता
Lottie फ़ाइलें समयरेखा का वर्णन करती हैं, व्यवहार का नहीं। Lottie एनीमेशन को होवर, लोडिंग या सफलता पर प्रतिक्रिया देने का अर्थ है प्लेयर के चारों ओर कोड लिखना। Flash में वह व्यवहार अंतर्निहित था; प्लगइन-मुक्त दुनिया ने इसे खो दिया।
राज्य मशीनें: फ़ाइल में व्यवहार फिर से
स्टेट-मशीन रनटाइम प्लगइन के बिना Flash विचार को वापस लाता है। Rive आपको वेक्टर एनीमेशन डिज़ाइन करने और इसे एक स्टेट मशीन से जोड़ने की सुविधा देता है जिसके इनपुट आपके कोड को नियंत्रित करते हैं। ExodeUI, जिसे हम बनाते हैं, उत्पाद यूआई पर एक ही विचार लागू करता है, React, SwiftUI, Flutter और अधिक के लिए रनटाइम द्वारा संचालित एक खुली JSON फ़ाइल में लेआउट, स्प्रिंग भौतिकी और तर्क जोड़ता है।
याद रखने योग्य कुंजी Principle
- Flash ने एक प्लगइन में वेक्टर एनीमेशन और इंटरएक्टिविटी को संयोजित किया
- Adobe ने 31 दिसंबर, 2020 के बाद Flash प्लेयर समर्थन समाप्त कर दिया
- Lottie मूल रूप से Bodymovin के साथ निर्यात किए गए After Effects एनिमेशन चलाता है
- Lottie एनिमेशन चलते हैं; अन्तरक्रियाशीलता के लिए अतिरिक्त कोड की आवश्यकता होती है
- राज्य-मशीन रनटाइम लिखित व्यवहार को फ़ाइल में वापस लाता है
अक्सर पूछे जाने वाले प्रश्नों
स्रोत
- Adobe Flash Player End of Life — Adobe
- lottie-web — गिटहब (एयरबीएनबी)
- State Machine Playback — Rive दस्तावेज़