Getting Started with Lottie.js – SitePoint

करीब 10 साल पहले वेब एनिमेशन बड़ी मुश्किल में था। Adobe Flash मर रहा था लेकिन अभी भी कोई स्पष्ट प्रतिस्थापन नहीं था। हमें एक तेज़, आसानी से लिखने वाला, वेब-अनुकूल प्रारूप चाहिए था जो बड़े पैमाने पर एनिमेटेड डेमो, कार्टून और बैनर का मंचन करने में सक्षम हो।

खुशी की बात है कि 2014 में AirBnB ने हमें अपना समाधान पेश किया – Lottie.JS।

लोटी क्या है?

Lottie.js एक खुला स्रोत, वेक्टर-आधारित एनीमेशन प्रारूप है, जिसे द्वारा बनाया गया है Airbnb अनुभव और मोशन डिज़ाइनर, सलीह अब्दुल-करीम। Lottie इंजन को वेब, आईओएस, एंड्रॉइड, विंडोज और रिएक्ट नेटिव पर समान रूप से तेज, कुरकुरा, कम-बैंडविड्थ वेक्टर एनिमेशन प्रस्तुत करने के लिए डिज़ाइन किया गया था।

संक्षेप में, यदि आप अपनी इमेजरी के लिए SVG का उपयोग करना पसंद करते हैं, तो Lottie उन वेक्टर ग्राफिक्स को चेतन करने का एक शानदार तरीका है। यदि आप GIFs, MPEG, या CSS एनिमेशन को कुछ हल्का तेज़, और अधिक स्केलेबल के साथ बदलना चाहते हैं, तो Lottie आपके लिए सबसे अच्छा उत्तर हो सकता है।

कार्रवाई में लोटी: पॉपई नाविक आदमी बशीर अहमद द्वारा

जैसा कि बशीर अहमद का सुंदर उदाहरण प्रदर्शित करता है, लोटी छोटी फाइलों से चरित्र-समृद्ध, जले हुए, तरल गति का उत्पादन कर सकता है – यह एनीमेशन 54kb फ़ाइल से उत्पन्न होता है।

अपने सबसे बुनियादी रूप में, बशीर की तरह लोटी एनिमेशन के लिए सिर्फ दो फाइलों की आवश्यकता होती है।

  1. Lottie एनिमेशन प्लेयर (Lottie.js)
  2. JSON एनीमेशन निर्देश फ़ाइल

मैं लोटी को क्यों चुनूंगा?

वेब वैक्टर को चेतन करने के कई तरीके हैं – CSS एनिमेशन से लेकर . तक एसवीजी की मुस्कान प्रति ग्रीनसॉक, एनीमेजेएसऔर अन्य जावास्क्रिप्ट पुस्तकालय।

हालांकि, लोटी के पास एक हत्यारा ‘एक-दो पंच’ है:

  • उच्च गुणवत्ता वाले विज़ुअल एनिमेशन टूल का बढ़ता हुआ पारिस्थितिकी तंत्र
  • चिकनी, तेज, कुशल, स्क्रिप्ट योग्य एनिमेशन निर्यात करने की क्षमता

इसकी सभी अच्छी तरह से प्रलेखित समस्याओं के लिए, Adobe Flash की लंबी सफलता आसान क्रॉस-प्लेटफ़ॉर्म परिनियोजन के साथ एक अच्छे संलेखन उपकरण के संयोजन पर आधारित थी। मुझे लगता है कि लोटी फ्लैश के कुछ फायदे साझा करता है।

मैं एक लोटी एनिमेशन कैसे बना सकता हूँ?

चूंकि Lottie फाइलें JSON टेक्स्ट फाइलों से ज्यादा कुछ नहीं हैं, तकनीकी रूप से आप सकता है बस अपने एनिमेशन को सीधे किसी भी IDE में कोड करें। वास्तव में, आप एक ‘लॉटी-सक्षम’ एनिमेशन टूल का चयन करना चाहेंगे। यहाँ मुट्ठी भर पर मेरे विचार हैं जिन्हें मैंने आज़माया और परखा है।

लोटी टूल्स राउंड-अप

मेरे विचार में लोटी एनिमेटर का चयन करते समय विचार करने के लिए दो कारक हैं:

  1. क्या यह एक अच्छा एनिमेशन टूल है?
  2. क्या अपना लोटी कोड परिनियोजित करना आसान है?

मैं प्रत्येक उपकरण के लिए इन दो क्षेत्रों को अलग-अलग कवर करूंगा।

After Effects बहुत कुछ करता है। लेकिन क्या यह बहुत ज्यादा है?

ठीक है, यह यकीनन एक विवादास्पद कदम है, यह देखते हुए कि लोटी प्रारूप बनाया गया था के लिये प्रभाव के बाद, लेकिन मुझे विश्वास नहीं है कि एई सबसे अच्छा लोटी निर्माण मंच है … के लिए अधिकांश लोग।

सबसे पहले, यह सस्ता नहीं है। यदि आप पहले से ही एक क्रिएटिव क्लाउड सदस्यता का भुगतान कर रहे हैं, तो लागत कोई समस्या नहीं होगी। लेकिन अगर आप वर्तमान में एक सीसी ग्राहक नहीं हैं, तो आप $21/माह के नए चल रहे न्यूनतम शुल्क को समाप्त कर देंगे।

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

यदि आप पहले से ही एक ‘आफ्टर इफेक्ट्स गुरु’ हैं, तो हर तरह से, अपनी मेहनत से जीती प्रतिभा का लाभ उठाएं और अद्भुत चीजें बनाएं। इसी तरह, यदि आप एक विंडोज या लिनक्स उपयोगकर्ता हैं, तो आफ्टर इफेक्ट्स अभी भी आपके लिए सबसे व्यवहार्य विकल्प हो सकता है।

हालाँकि, यदि आप वर्तमान में मैक-आधारित AE नौसिखिया हैं, तो एक तर्क है कि Lottie एनिमेशन बनाने के लिए After Effects का उपयोग करना एक विमान वाहक से वाटर-स्कीइंग जैसा है।

ज़रूर, आप इसे कर सकते हैं, लेकिन आसान तरीके हैं।

जैसा कि मैंने यह (2022) लिखा है, हाइकू एनिमेटर गलत समय पर सही उत्पाद होने का एक दुखद शिकार प्रतीत होता है।

एनिमेशन उपकरण

2018 में लॉन्च किया गया, हाइकू डिजाइन और कोड के आदर्श मिश्रण के रूप में जमीन से ऊपर बनाया गया था। एनीमेशन उपकरण समृद्ध और शक्तिशाली थे और यूआई तेज और समझदार था।

हाइकू एनिमेशन टाइमलाइन
हाइकू एनिमेशन इंटरफ़ेस

निर्यात विकल्प

हालाँकि, मेरे लिए यह हाइकू के निर्यात उपकरण थे जो वास्तव में इसे किसी और चीज़ से अलग करते थे, रिएक्ट, रिएक्ट नेटिव, आईओएस, एंड्रॉइड, वीयू और एंगुलर के साथ-साथ पारंपरिक जीआईएफ और वीडियो के लिए उपयोग में आसान कोड की पेशकश करते थे।

हाइकू में निर्यात विकल्प
हाइकू में निर्यात विकल्प

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

सारांश…

मैं यहाँ केवल हाइकु का उल्लेख इस पतली आशा के साथ कर रहा हूँ कि जब तक आप इसे पढ़ेंगे तब तक यह फिर से जीवित हो गया होगा। यह एक उत्कृष्ट उत्पाद था (मैंने इसके लिए भुगतान किया) और बहुत याद किया गया है।

प्रवाह – (‘क्यों नहीं?‘ चुनना)

प्रवाह यकीनन हाइकू की विरासत का तार्किक उत्तराधिकारी है – एक अच्छी तरह से चित्रित एनिमेटर जो लोकप्रिय वेब और मोबाइल प्लेटफॉर्म की एक श्रृंखला के लिए साफ, उत्पादन-तैयार लोटी कोड प्रदान करता है।

संयोग से, इसका वजन मेरे मैकबुक पर स्थापित 88Mb पर है, जो अंतरिक्ष सीमाओं वाले किसी भी व्यक्ति के लिए आसान है (वह मैं हूं)। हाइकू के विपरीत, वर्तमान में कोई विंडोज या लिनक्स विकल्प पेश नहीं किया गया है।

एनिमेशन उपकरण

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

अंतर्निर्मित आरेखण/आकृति/पाठ उपकरण के रूप में प्रवाह बहुत कुछ प्रदान नहीं करता है। अंतत:, यह कोई बड़ी बात नहीं है, क्योंकि फ्लो और फिगमा/स्केच के बीच समन्वयन बहुत अच्छी तरह से काम करता है, और यह फ्लो एनीमेशन यूआई को तेज और सुव्यवस्थित रखने में मदद करता है।

प्रवाह यूआई
प्रवाह यूआई

कोड निर्यात

फ्लो उत्कृष्ट Lottie निर्यात सुविधाएं प्रदान करता है, लेकिन आपको इसे एक्सेस करने के लिए दो उच्च-स्तरीय योजनाओं में से एक का चयन करना होगा:

  1. मुक्त: अधिकांश एनिमेशन उपकरण
  2. मीडिया: $99/वर्ष – वीडियो निर्यात विकल्प जोड़ें (MP4, PNG, GIF, आदि)
  3. कोड+: $199/वर्ष – अधिकांश कोड निर्यात विकल्प (वेब ​​के लिए लोटी, एनिमेटेड एसवीजी, एचटीएमएल, आदि)
  4. समर्थक: $299/वर्ष – सभी वीडियो और कोड निर्यात विकल्प

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

सारांश…

फ्लो सबसे सस्ता विकल्प नहीं है – आफ्टर इफेक्ट्स के बॉलपार्क में – लेकिन अगर आप नियमित रूप से चेतन करते हैं तो यह महंगा नहीं है। यह एक आकर्षक, चालाकी से डिज़ाइन किया गया टूल है जो उचित मूल्य पर Lottie एनिमेशन बनाने और तैनात करने के लिए पूरी तरह से अनुकूल है।

कीशेप केवल दो समस्याओं के साथ एक उत्कृष्ट उत्पाद है।

  1. यह केवल macOS पर उपलब्ध है।
  2. इसकी एक बहुत ही सादा, प्रभावहीन, लगभग अनुभवहीन वेबसाइट है।
कीशैप वेबसाइट
Keyshape वेबसाइट आपको आत्मविश्वास से नहीं भरती है।

मैं मानता हूं कि जब मैंने कीशैप डाउनलोड किया तो मुझे कम उम्मीदें थीं। वेबसाइट चिल्लाती है ‘शौक़ीन लोगों के लिए एनिमेशन खिलौना‘, इसके बजाय ‘गंभीर प्रो एनिमेशन टूल‘। मामूली कीमत ($ 29) उस विचार का समर्थन करती है। यह उस कीमत पर अच्छा नहीं हो सकता, है ना?

मेरे आश्चर्य के लिए, Keyshape निकला अधिकता मेरी अपेक्षा से बेहतर। यह वास्तव में बहुत अच्छा है!

एनिमेशन उपकरण

एक एनिमेटर के रूप में स्केच ऐप।
एक एनिमेटर के रूप में स्केच ऐप।

कीशैप ऐप इंस्टॉल मेरे मैक पर 100Mb से थोड़ा कम है। बाईं ओर के टूल पैनल में लगभग एक दर्जन बुनियादी वेक्टर संपादन उपकरण हैं – रेखाएँ, आयतें, वृत्त, पाठ और इसी तरह। हालांकि मुझे संदेह है कि हम में से अधिकांश अपने वेक्टर आर्टवर्क बनाने के लिए इलस्ट्रेटर, फिगमा या स्केच का उपयोग करेंगे, फिर भी यह आपके एनिमेटर में सरल संपादन करने में सक्षम होने के लिए उपयोगी है।

कीशैप आपको आधार ‘प्रतीक’ बनाने देता है और फिर जितने चाहें उतने उदाहरणों में हेरफेर करता है।

एनीमेशन टाइमलाइन निचले पैनल के साथ चलती है। जब भी आप अपने आर्टवर्क को कैनवास दृश्य में बदलते हैं, तो ऑटो-कीफ़्रेमिंग नए कीफ़्रेम बनाता है। ‘ट्वीड’ सेक्शन पर क्लिक करने से आपको विभिन्न आसान कार्यों तक पहुंच मिलती है – जिसमें अनुकूलन योग्य क्यूबिक-बेजियर शामिल हैं।

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

निर्यात उपकरण

कीशैप एमपीईजी, जीआईएफ, एसवीजी एनिमेशन, सीएसएस, स्प्राइट शीट, कस्टम जेएस और यहां तक ​​कि पीएनजी इमेज सीक्वेंस सहित निर्यात विकल्पों की एक श्रृंखला प्रदान करता है।

कीशेप निर्यात संवाद
कीशैप निर्यात संवाद – Lottie प्लगइन स्थापित के साथ

ध्यान रखें कि Lottie नहीं है Keyshape में एक डिफ़ॉल्ट निर्यात विकल्प। आपको स्थापित करने की आवश्यकता होगी Keyshape के लिए मुफ्त Lottie प्लगइन इस नई महाशक्ति तक पहुँचने के लिए।

क्या कीशैप में कुछ याद आ रहा है?

कीशैप रिएक्ट, नोड, वीयू, या किसी अन्य लोकप्रिय देव प्लेटफॉर्म के लिए किसी भी घटक निर्यात सुविधाओं की पेशकश नहीं करता है, इसलिए आपको उस हिस्से को स्वयं हल करने की आवश्यकता हो सकती है।

यह आयातित एसवीजी कीफ्रेम जैसे फ्लो के बीच के बीच के राज्यों को ‘स्मार्ट ऑटो-जेनरेट’ करने का प्रयास नहीं करता है।

लेकिन आम तौर पर कुछ और स्पष्ट रूप से स्पष्ट नहीं था जो कि कीशैप ऐप का उपयोग करते समय मुझे याद आया।

सारांश…

मैं सामान्य रूप से एनीमेशन का आनंद लेता हूं और विशेष रूप से लोटी का, लेकिन सच्चाई यह है कि यह वह जगह नहीं है जहां मैं अपने अधिकांश काम के घंटे बिताता हूं। मैं और अधिक करना चाहता हूं, लेकिन महीनों बीत जाते हैं जब मैं किसी एनिमेशन प्रोजेक्ट को नहीं छू पाता हूं। क्या मुझे वाकई एक और मासिक सदस्यता चाहिए? शायद ऩही।

मेरे लिए, कीशैप उस शक्ति के लिए एक अद्भुत सौदा जैसा लगता है – भले ही वह इसे अच्छी तरह छुपाए।

कीशेप विवरण

एक ही लेबल लगाने का प्रयास Lottiefiles.com कोई आसान काम नहीं है क्योंकि वे बहुत कुछ प्रदान करते हैं। इसमें एक सक्रिय Lottie समुदाय, एक Lottie एसेट मार्केटप्लेस, Lottie ट्यूटोरियल और Lottie शोकेस, पूर्वावलोकन और होस्टिंग एप्लिकेशन शामिल हैं। यह कहना उचित है, वे सभी लोटी के भविष्य में चले गए हैं।

Lottiefiles संपादक
Lottiefiles संपादक

LottieFiles मुट्ठी भर साधारण Lottie संपादन उपयोगिताओं की भी पेशकश करता है। इसमे शामिल है:

  1. SVG से Lottie टूल: यह आपको अपने अपलोड किए गए SVG पर प्रीसेट एनिमेशन को ड्रैग-एंड-ड्रॉप करने की अनुमति देता है।
  2. लोटी संपादक: एक साधारण संपादक जो आपको पहले से मौजूद किसी भी Lottie फ़ाइल पर समय और आकार समायोजित करने देता है।
  3. एक अनुकूलन योग्य वेब प्लेयर: किसी भी Lottie एनिमेशन को अपनी साइट पर एम्बेड करने से पहले उसमें बदलाव करें।
Lottie Files: उनका SVG से Lottie टूल
Lottie Files: उनका SVG से Lottie टूल

आइए स्पष्ट रहें: LottieFiles टूल का उपयोग करके खरोंच से जटिल कार्य बनाना मुश्किल होगा, लेकिन आपके समय के लायक बनाने के लिए वहां पर्याप्त से अधिक उपयोगी संसाधन हैं।

उल्लेखनीय उल्लेख मैंने परीक्षण नहीं किया है

  • घुड़सवार सेना: मैं यह दिखावा नहीं करने जा रहा हूं कि मैंने कैवेलरी का परीक्षण किया है – क्योंकि मैंने नहीं किया है – लेकिन कार्यक्षमता बहुत अच्छी लगती है। एक मुफ्त योजना है (मुझे लगता है कि यह नया है) इसलिए इसे आजमाने का कोई कारण नहीं है।
  • सिनफिग: Synfig एक ओपन-सोर्स 2d एनिमेटर है। इसमें एक शानदार फीचर सेट है, लेकिन फ्लो, और कैवेलरी जैसे आधुनिक ऐप के बगल में यूआई थोड़ा पुराना और धूर्त लगता है। लेकिन अगर आप तंग बजट पर हैं, तो मुफ्त में हराना मुश्किल है।
  • लोटीलाब: Lottielab एक ब्राउज़र-आधारित एप्लिकेशन होगा जो खुद को ‘द फिग्मा ऑफ लोटी एनिमेटर’ के रूप में स्टाइल करता हुआ प्रतीत होता है। यूआई अच्छा दिखता है। उन्होंने $15-$25 मासिक सदस्यता मूल्य बिंदु का उल्लेख किया है। दुर्भाग्य से, मैं Lottielab की समीक्षा नहीं कर सकता क्योंकि यह कम से कम 12 महीनों के लिए सख्ती से सीमित निजी बीटा में बना हुआ है। मैं व्यक्तिगत रूप से सितंबर 2021 (10 महीने पहले) की शुरुआत में बीटा प्रतीक्षा सूची में शामिल हुआ था और अभी भी केवल लोटीलैब डिस्कॉर्ड चैनल तक ही पहुंच है। हम भविष्य में किसी बिंदु पर देखेंगे।

टीएलडीआर

यदि हल्के सदिश एनिमेशन बनाने में आपका बहुत समय लगता है, तो फ़्लो सबसे अधिक केंद्रित और उपलब्ध Lottie विकास उपकरण हो सकता है। इसमें एक कुरकुरा वर्कफ़्लो है और निर्यात विकल्प अधिकांश प्रतिस्पर्धियों की तुलना में अच्छे या बेहतर हैं।

यदि आप Adobe After Effects को पहले से जानते हैं और पसंद करते हैं, तो जो आप जानते हैं उसका उपयोग करें।

मेरे मामले में, मैं एनीमेशन का आनंद लेता हूं, लेकिन यह वह जगह नहीं है जहां मैं अपने अधिकांश काम के घंटे बिताता हूं। जब मैं किसी एनिमेशन प्रोजेक्ट को नहीं छूता तो महीने बीत सकते हैं। क्या मुझे वाकई एक और मासिक सदस्यता चाहिए? शायद ऩही।

मेरे लिए, कीशैप ($ 29 पर) उस शक्ति के लिए एक अद्भुत सौदे की तरह लगता है – भले ही वे इसे अच्छी तरह से अस्पष्ट करते हों।

सम्बंधित लिंक्स:

Leave a Reply