मेरे पास इलस्ट्रेटर में किए गए कुछ चित्र हैं और मैं इसे एक वेबसाइट के लिए चेतन करने की योजना बना रहा हूं जिस पर मैं काम कर रहा हूं, मैंने Create.js टूलकिट के बारे में फ्लैश के साथ सुना है , लेकिन क्या यह जाने का सबसे अच्छा तरीका है या कोई अन्य है " बेहतर "इसे करने का तरीका?
यहाँ मैं जिस तरह के एनिमेशन का लक्ष्य रख रहा हूँ, उसका एक उदाहरण है: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
जवाबों:
वेब पर चीजों को एनिमेट करने के कई तरीके हैं। एनिमेशन बनाने के और भी तरीके हैं, फिर वेब एनिमेशन को निर्यात करें।
श्रम के विभाजन और चित्रमय संपादक के उपयोग के स्पष्ट कारणों के लिए AfterEffects या Animate CC (जो इलस्ट्रेटर और फ़ोटोशॉप फ़ाइलों दोनों को आयात कर सकते हैं) जैसे एनिमेशन में कुछ डिज़ाइन करने के बहुत बड़े लाभ हैं।
कहा जा रहा है के साथ, आप हमेशा, अंत में, निम्नलिखित में से एक को संकलित करना चाहिए :
सीमित सहभागिता क्षमता:
अधिक पूरी तरह से इंटरैक्टिव:
अब, मैं प्रत्येक में थोड़ा और विस्तार से जाऊँगा।
एक GIF जाने का एक अच्छा तरीका है जब एनिमेशन को अधिक इंटरैक्शन की आवश्यकता नहीं होती है, गतिशील रूप से आकार देने की आवश्यकता नहीं होती है, और अपेक्षाकृत छोटे होते हैं। अच्छी तरह से बनाई गई GIF किसी भी प्रदर्शन की चिंताओं के बिना आपके द्वारा लिंक किए गए चित्रण के रूप में विस्तृत हो सकती है। यहां तक कि एक पारदर्शी ओवरले का उपयोग करके मामूली बातचीत (या बस इसका एक हिस्सा) संभव है।
साइड नोट: अब Imgur द्वारा बनाया गया एक .gifvप्रारूप है जो मक्खी की GIF फ़ाइलों को WebM या MP4 वीडियो प्रारूपों में परिवर्तित करता है। यह अंतिम फ़ाइल आकार को कम करके प्रदर्शन बढ़ाता है। आप ऐसा करने पर विचार कर सकते हैं।
एक चिकनी लेकिन अत्यधिक स्टाइल वाले एनीमेशन को रखने का दूसरा तरीका स्प्राइट का उपयोग करना है। Google लोगो एनीमेशन जैसी चीजों के लिए इस दृष्टिकोण का उपयोग करता है । एक और महान उदाहरण अलेक्जेंडर एंगेल की पुरानी वेबसाइट है जो इस दृष्टिकोण का उपयोग करते हुए एक बीमार टाइपोग्राफी एनीमेशन था। यह तब इष्टतम होता है जब कोई GIF बहुत बड़ा होगा, लेकिन आपको अधिक सहभागिता की आवश्यकता नहीं है।
मैंने एक बहुत ही दिलचस्प जावास्क्रिप्ट एनीमेशन भी देखा है जो Google द्वारा उपयोग किए गए स्प्राइट या जीआईएफ से मिलता-जुलता है (बाईं ओर क्रोम छवि को हटा दें - इसे क्रोम में होने की आवश्यकता है) लेकिन इसके बजाय एक एनिमेटेड मास्क का उपयोग करता है। मैं अनुमान लगा रहा हूं कि उन्होंने कुल फ़ाइल आकार को सीमित करने के लिए इस दृष्टिकोण का उपयोग किया।
हमने हाल के वर्षों में वीडियो के बारे में शानदार क्षमताएं हासिल की हैं। <video>तत्व हमें जिस तरह से हम परस्पर प्रभाव और उपयोग वीडियो पहले कभी नहीं की तरह अनुकूलित है। अब हम फुल-स्क्रीन बैकग्राउंड वीडियो का उपयोग आसानी से कर सकते हैं और स्क्रॉल पर फ्रेम करके गो फ्रेम जैसी चीजें कर सकते हैं । मैंने यह भी देखा कि फेसबुक कुछ सरल एनिमेशन के लिए वीडियो का उपयोग करता है जब उपयोगकर्ताओं को विशेष कार्यक्रमों के आसपास उनके फ़ीड पर स्वागत करते हैं। लाभ यह है कि यह एक बहुत छोटे फ़ाइल आकार में संकुचित किया जा सकता है और एनिमेशन की अधिक विस्तृत श्रृंखला (कुछ भी जो वीडियो संपादन सॉफ्टवेयर कर सकता है) कर सकता है। जैसे, यदि कोई बीमार वीडियो बना सकता है, तो उसे वेबपृष्ठ में एक शानदार जोड़ में बदलना काफी आसान है।
जाहिर है, वीडियो वेब पर अधिकांश एनिमेशन के लिए अच्छे नहीं हैं (जैसे बटन संक्रमण, आदि), इसलिए हर जगह उनका उपयोग न करें।
इस सब के साथ कहा जा रहा है, यदि आप चाहते हैं कि एनीमेशन गतिशील रूप से उत्पन्न हो, जब आपको 3 डी वातावरण बनाने के लिए वास्तव में मूल इंटरैक्शन से अधिक की आवश्यकता हो, और कई अन्य मामलों में, GIF, स्प्राइट, या वीडियो बस नहीं होगा काट उसे। एक बार यह तय हो जाने के बाद, कई अन्य विकल्प हैं, जिनमें से सबसे अच्छा आपके एनीमेशन और जरूरतों पर निर्भर है।
मेरे पास आंकड़े नहीं हैं, लेकिन अधिकांश वेब एनिमेशन मैंने कैनवस का उपयोग करते हुए देखे हैं । कैनवस अपने प्रदर्शन और निर्माण में लचीलेपन के कारण उपयोग करने के लिए बहुत अच्छा है। यह केवल एक ब्राउज़र (DOM) तत्व का उपयोग इस तथ्य के कारण करता है कि यह सिर्फ पेंट करता है - जैसे एक असली कैनवास पर - एक दूसरे के ऊपर की चीजें। क्या चित्रित किया गया है और जावास्क्रिप्ट के साथ कहाँ का ट्रैक रखकर, हम कुछ बहुत बढ़िया एनिमेशन और गेम भी बना सकते हैं।
हालांकि, कैनवस का उपयोग करने के लिए प्राथमिक दोष इसके सापेक्ष कठिनाई है। अक्सर समय, बेशक एनीमेशन के आधार पर, अन्य उपकरणों का उपयोग करने की तुलना में एक उत्तरदायी कैनवस एनीमेशन बनाना अधिक कठिन होता है। एक और नकारात्मक पहलू यह है कि कैनवस पर बहुत अधिक सामग्री का होना बहुत ही अनुकूल नहीं है क्योंकि कैनवास के तत्व क्रॉलेबल नहीं हैं (यदि लागू हो तो सामग्री के कुछ नेत्रहीन छिपे हुए एचटीएमएल को डालकर आप इसके आसपास काम कर सकते हैं)। एक ही नोट पर, उपयोगकर्ताओं के लिए पाठ चयन जैसी चीजें कैनवस के साथ (विशेष रूप से एक पुस्तकालय जैसे CreateJS का उपयोग किए बिना) मुश्किल है।
कैनवस का एक प्रमुख उपयोग Google का डूडल है , जो अक्सर कैनवस में किया जाता है। जब उनके पास कोई गेम या इंटरैक्टिव एनीमेशन होता है, तो वे हर बार कैनवस का उपयोग करते हैं जो मैंने देखा है। यदि कोई इंटरैक्शन नहीं है, तो वे GIF या स्प्राइट का उपयोग करेंगे।
कैनवास को आसान बनाने में मदद करने के लिए बहुत सारे महान पुस्तकालय हैं, हालांकि यह निश्चित रूप से आवश्यक नहीं है कि क्या किया जाना चाहिए। सिर्फ कैनवस के लिए बने लोगों में क्रिएटजेएस (जिसे आप चेतन सीसी से निर्यात कर सकते हैं), पिक्सी.जेएस , पेपरजस , काइनेटिकजस , और फैब्रिकज (उनके प्रभाव के क्रम में रखा गया है) हैं। Lottie (पूर्व में बॉडीमोविन) नामक एक आफ्टर इफेक्ट्स प्लगइन भी कैनवस (या एसवीजी [1] ) को निर्यात कर सकता है और इसमें एनीमेशन इंजन का निर्माण होता है।
बेशक, आप GSAP जैसे बड़े एनिमेशन लाइब्रेरी को आसानी से कैनवस के साथ जोड़ सकते हैं। आपके द्वारा लिंक किए गए चित्रण के रूप में विस्तृत कुछ के लिए, मैं कुछ प्रकार की रूपरेखा का उपयोग करने की सलाह दूंगा, लेकिन बहुत सी चीजों के लिए वे वास्तव में आवश्यक नहीं हैं, बस उपयोगी हैं - खासकर यदि आप जानते हैं कि उनमें से किसी एक का उपयोग कैसे करें।
आसानी से उत्तरदायी तरीके से वेब पर चीजों को चेतन करने के लिए एक और अविश्वसनीय रूप से शक्तिशाली तरीका एसवीजी ( स्केलेबल वेक्टर ग्राफिक्स ) का उपयोग करना है। वे अपने उद्देश्य को पूरा करते हैं - स्केलेबल वैक्टर - अच्छी तरह से। कई एसवीजी का उपयोग करते हुए पहले भ्रमित होते हैं, लेकिन एसवीजी की समन्वय प्रणाली और रूपांतर जैसी अधिकांश चीजों में उन्हें समझाने वाले महान लेख हैं।
एसवीजी के बारे में कई प्यारी चीजों में से एक यह है कि यह जावास्क्रिप्ट, शुद्ध सीएसएस ( :hoverराज्यों transform, transitionएस, और animationएस सहित), या एसएमआईएल एनिमेशन (एसवीजी के साथ चीजों को एनिमेट करने का "मूल" तरीका है, लेकिन आईई doesn 'के साथ एनिमेटेड हो सकता है ' टी इसे बिल्कुल समर्थन करें और इसे धीरे-धीरे ह्रास किया जा रहा है )। जब भी यह सीएसएस में सरल (अपेक्षाकृत) नहीं है, तो मैं पहले सीएसएस और फिर जावास्क्रिप्ट का उपयोग करने की कोशिश करने की सलाह देता हूं। SVG तत्वों को मॉर्फ करने के लिए, GSAP के MorphSVG प्लगइन जैसे टूल का उपयोग करना व्यावहारिक रूप से आवश्यक है जब तक कि आप केवल आंशिक समर्थन के साथ ठीक नहीं होते हैं, उस स्थिति में SMIL स्वीकार्य हो सकता है।
चूंकि एसवीजी तत्व किसी भी आकार में हो सकते हैं, उनका उपयोग कुछ शांत प्रभाव बनाने के लिए किया जा सकता है । सारा ड्रैसनर ने एसवीजी एनिमेशन के बारे में कुछ सहायक प्रदर्शन बेंचमार्क बनाए जो बताते हैं कि एसवीजी को एनिमेट करने के कौन से तरीके सबसे अच्छा प्रदर्शन बुद्धिमान हैं।
एनीमेशन (और ब्राउज़र समर्थन की आवश्यकता) के आधार पर, Snap.svg या GSAP जैसी लाइब्रेरी उपयोगी हो सकती है, लेकिन अक्सर CSS और, यदि आवश्यक हो, तो थोड़ा कस्टम JS आवश्यक है। कहा जा रहा है कि, लूफ्टी (पहले बॉडीमोविन) नामक एक आफ्टर इफेक्ट्स प्लगइन और फ्लैश 2 एसवीजी नामक फ्लैश एक्सटेंशन एसवीजी एनिमेशन बनाने के लिए वास्तव में मददगार हो सकता है।
अधिक विवरण के लिए, विशेष रूप से एसवीजी तत्वों को एनिमेट करने वाले इस संबंधित पोस्ट पर एक नज़र डालें ।
PS यह एक <object>टैग में SVG का उपयोग करने के लिए सबसे अच्छा है या सीधे एक <svg>XML तत्व में एम्बेडेड है अगर यह इंटरैक्टिव है और पृष्ठभूमि छवि के रूप में यदि यह इंटरैक्टिव नहीं है, लेकिन इसे करने के लिए अन्य तरीके भी हैं।
मेरे अनुभव में, सीएसएस एनिमेशन और संक्रमण मुख्य रूप से यूआई तत्वों और अन्य बुनियादी बदलाव और एनिमेशन के लिए उपयोग किए जाने चाहिए। तब भी, कभी-कभी UI एनिमेशन / संक्रमण के लिए GSAP या Velocity.js जैसी JS एनीमेशन लाइब्रेरी का उपयोग करना उचित होता है। यह वास्तव में व्यवहार के प्रकार पर निर्भर करता है जिसे आप चाहते हैं और सीएसएस में करना सुविधाजनक है या नहीं।
हालांकि हम शुद्ध सीएसएस के साथ पागल चीजें बना सकते हैं , यह आम तौर पर जटिल चित्र बनाने के लिए कठिन है जैसे कि आप सीएसएस का उपयोग करके एक उदाहरण के रूप में प्रदान करते हैं, यहां तक कि जब इसके अलावा छवियों में हेरफेर करते हैं। जटिल सीएसएस एनिमेशन अक्सर अपने जावास्क्रिप्ट समकक्षों की तुलना में बनाए रखने के लिए अधिक कठिन होते हैं। अन्य नकारात्मक पहलू यह है कि सीएसएस एनिमेशन जावास्क्रिप्ट के साथ बदलने के लिए कठिन हैं और जावास्क्रिप्ट के साथ मिश्रित होने पर यह बहुत अच्छा नहीं खेलता है।
कहा जा रहा है कि, संक्रमण और एनिमेशन का उपयोग करने वाले सरल इंटरैक्शन को आमतौर पर सीएसएस का उपयोग करना चाहिए; आपको इसके लिए डिफ़ॉल्ट होना चाहिए। सीएसएस का उपयोग करके चेतन करना सीखना शुरू करने के लिए, वेब एनीमेशन से मेरा परिचय देखें ।
आप पुस्तकालयों में Animate.css जैसे सहायक एनिमेशन और सहजता वाले फ़ंक्शंस भी पा सकते हैं जिन्हें आप अपनी खुद की परियोजनाओं से खींच सकते हैं और जोड़ सकते हैं। आपको लगभग पूरी लाइब्रेरी की आवश्यकता नहीं होगी, केवल वे भाग लें जो आप चाहते हैं।
डोम आधारित जावास्क्रिप्ट एनिमेशन काफी सीधे आगे हैं। वे क्योंकि jQuery के जैसे भयानक एनीमेशन पुस्तकालयों में से एक बुरा प्रतिनिधि है animate(), लेकिन वे विशेष रूप से उच्च, प्रदर्शन किया जा सकता है, खासकर जब वेब एनिमेशन एपीआई (नीचे चर्चा), या की तरह एक विशेष एनीमेशन लाइब्रेरी का उपयोग कर GSAP , Velocity.js , या mo.js ( जीएसएपी में jQuery के विशेष रूप से प्रतिस्थापित करने के लिए एक विशेष प्लगइन भी है .animate)। इस तरह के पुस्तकालय का उपयोग करते हुए, वे अक्सर अधिक गहन एनिमेशन के लिए अन्य प्रकार के एनिमेशन को बेहतर बना सकते हैं, जैसे कि बहुत सारे तत्वों को एनिमेट करना।
यदि आपको डोम आधारित एनीमेशन का उपयोग करने की आवश्यकता है, तो इसका मुख्य कारण यह है कि आपके पास पहले से बने डोम तत्वों से युक्त उपयोगकर्ता एनीमेशन या जटिल समयसीमाएँ हैं। अक्सर यह पहले से ही निर्दिष्ट कारणों के लिए डोम पर कैनवस की तरह कुछ का उपयोग करने की कोशिश करना सबसे अच्छा है।
जीएसएपी जैसे पुस्तकालय हमें एनीमेशन मैट्रिसेस पर नज़र रखते हुए होवर पर एक एनीमेशन को धीमा करने जैसी पागल चीजें करते हैं। इस तरह, DOM आधारित एनिमेशन अच्छी तरह से किए जाने पर किसी भी अन्य प्रकार के एनिमेशन से अधिक अनुकूलित और इंटरैक्टिव हो सकते हैं। केवल नीचे का पक्ष यह है कि कभी-कभी, यह इस बात पर निर्भर करता है कि यह कैसे बनाया गया है और इसके लिए क्या करना है, यह अच्छा प्रदर्शन नहीं करेगा।
WebGL प्राथमिक रूप से 3D कार्य बनाने का एक तरीका है। इसकी कुछ भयानक परियोजनाएं हैं जिन्हें आपको जांचना चाहिए। यह स्पष्ट रूप से हर वेब पेज पर उपयोग नहीं किया जाता है, लेकिन इसका उल्लेख करना महत्वपूर्ण है।
यह वास्तव में 3 डी (और 2 डी) वातावरण बनाने के लिए डोम तत्वों को एनिमेट करता है जो कि संभावित क्षमता के कारण भयानक है। लाइब्रेरी का उपयोग करते समय, वेबलॉग कैनवस का उपयोग करने के लिए वापस आ जाता है, लेकिन फिर भी मोबाइल पर बहुत समर्थन नहीं होता है और प्रदर्शन भारी हो सकता है। आम तौर पर यह बहुत स्पष्ट होता है जब आपको वेबजीएल का उपयोग करने की आवश्यकता होती है या नहीं।
मेरे अनुभव से, WebGL लाइब्रेरी का उपयोग करना व्यावहारिक रूप से आवश्यक है। शुक्र है कि कुछ अच्छे हैं। थ्री जेएस अब तक सबसे आम है जिसे मैंने पिक्सीज के बाद देखा है । ए -फ्रेम की तरह एक WebGL फ्रेमवर्क भी इसे उठा सकता है और बुनियादी चीजों को बहुत आसान बना सकता है।
वेब एनिमेशन एपीआई मानकीकृत करने के लिए कैसे एनिमेशन लागू किया और प्रदर्शन में सुधार के साथ रखा ब्राउज़रों में रखा जाता है एक प्रयास है। इसका उपयोग एसवीजी सहित डोम तत्वों के साथ किया जाना है। यह जैसा कि एक CSS एनिमेशन संरचित है (जेएस दिखने वाले रूप में) जैसा दिखता है, लेकिन टाइमलाइन और बेहतर प्रदर्शन जैसी क्षमताओं को जोड़ता है।
यह कंपोज़िटर थ्रेड पर एनिमेशन लगाकर प्रदर्शन में सुधार करता है (अधिक विवरण के लिए इस विषय पर इस महान पोस्ट की जांच करें )। इसे कैसे उपयोग किया जाए, इसके लिए एक परिचय के लिए, मोज़िला डॉक्स या इस परिचयात्मक पोस्ट को देखें ।
आप पूछ सकते हैं, " क्या यह जावास्क्रिप्ट एनीमेशन पुस्तकालयों की जगह लेगा? " जवाब " उम्मीद है कि कुछ " है। यह देशी ब्राउज़र एनीमेशन इंजनों में सुधार करने के लिए सभी के लिए फायदेमंद है, जैसा कि वे करते हैं, कुछ कम शक्तिशाली एनीमेशन लाइब्रेरी बेकार हो जाएंगे। कहा जा रहा है कि, अधिक शक्तिशाली एनिमेशन पुस्तकालयों को अभी भी जीएसएपी नोट किए गए लोगों की तरह अतिरिक्त लाभ होगा । WAAPI को व्यापक रूप से समर्थित होने के बाद भी आपको एक पुस्तकालय की आवश्यकता है या नहीं।
WAAPI का वर्तमान में अच्छा समर्थन नहीं है, लेकिन इसका उपयोग आज उत्पादन में एक पॉलीफ़िल के साथ किया जा सकता है। ऐसा लग रहा है कि यह बेहतर होता रहेगा और अधिक समर्थन प्राप्त करेगा।
गैर-प्रदर्शनकारी गुणों का उपयोग करने से बचें या रिफ्लोज़ / रिपैट्स का कारण बनें ।
पृष्ठ पर तत्वों का एक समूह बनाने से बचें क्योंकि वे अधिक गहन हैं और बाद में बदलने के लिए दर्द भी हो सकता है।
CSS का उपयोग करते समय, transitionजब भी संभव हो (कारण के भीतर) एक एनीमेशन का उपयोग करें । वे बेहतर प्रदर्शन करते हैं और आमतौर पर उनके साथ काम करना आसान होता है।
बुद्धिमानी से उन will-changeबड़े तत्वों पर संपत्ति का उपयोग करें जिन्हें आप चेतन करने जा रहे हैं ताकि ब्राउज़र समय से पहले ही पता चल जाए। इसके बारे में अधिक जानकारी और सुझावों के लिए इस विषय पर कुछ इस तरह से SitePoint लेख पढ़ें ।
जावास्क्रिप्ट में टाइमिंग setIntervalकरने से बचें और विकल्प चुनें requestAnimationFrame(यदि आप अपनी समयसीमा का उपयोग करते हैं तो जीएसएपी जैसी अच्छी एनिमेशन लाइब्रेरी आपके लिए ऐसा करती है)।
जब आप कर सकते हैं, वेब एनिमेशन एपीआई का उपयोग करें क्योंकि इसमें जावास्क्रिप्ट में अन्य विधियों के साथ एनिमेशन करने की क्षमता नहीं है।
आपको अंतिम उत्पाद में कभी भी फ्लैश नहीं चलाना चाहिए । जावास्क्रिप्ट एनिमेशन बेहतर प्रदर्शन करते हैं, अधिक गतिशील होते हैं, अधिक आसानी से संपादित होते हैं, किसी भी डाउनलोड की आवश्यकता नहीं होती है, अधिक प्लेटफार्मों पर काम करते हैं (फ्लैश अधिकांश टैबलेट / फोन पर काम नहीं करता है), और भारी पुराने फ्लैश की तुलना में अधिक उत्तरदायी हैं। वे भी बहुत सुलभ नहीं हैं और एसईओ के अनुकूल नहीं हैं।
इसके साथ ही कहा जा रहा है, एनिमेट सीसी (फ्लैश की रीब्रांडिंग) एनिमेशन बनाने का एक उपयोगी तरीका है और Create.js का उपयोग करके कैनवस को निर्यात कर सकता है ।
एक एनीमेशन बनाने के लिए आप आमतौर पर कई तरीके अपना सकते हैं। सबसे अच्छा यह निर्भर करता है कि आप इसे क्या करना चाहते हैं, और कभी-कभी एक स्पष्ट बेहतर तरीका नहीं होता है। अक्सर बार मैं खुद को एक ही प्रोजेक्ट पर कई का उपयोग करते हुए पाता हूं। महत्वपूर्ण बात यह है कि गंभीर रूप से सोचने के लिए , यह समझने के लिए कि आप एनीमेशन को कैसे व्यवहार करना चाहते हैं, और उसके आधार पर विधि का निर्णय करें। यह भी मदद करता है अगर आप एक सा में काम किया है।
[१] - Lottie देशी Android, iOS और React Native को भी निर्यात कर सकती है ।
मेरे अनुभव में, जब स्थैतिक एनिमेशन (उपयोगकर्ता के साथ किसी भी इंटरैक्शन के लिए अभिप्रेत नहीं हैं) करते हुए मैंने पाया कि मेरे लिए सबसे अच्छा काम किसने किया था इलस्ट्रेशंस में After Effects और उसके बाद अंतिम परिणाम को एक .GIF फ़ाइल में निर्यात करना। यह एनीमेशन को पूरी तरह से ब्राउज़र के अनुकूल बनाता है और किसी भी डिवाइस में समान दृश्य की गारंटी देता है।
यदि, हालांकि, आप ऐसी किसी चीज़ की तलाश कर रहे हैं, जो उपयोगकर्ता के साथ बातचीत कर सकता है, तो मेरा मानना है कि कैनवस वास्तव में जाने का तरीका है, और इसके लिए CreateJS EaseJS लाइब्रेरी के साथ नौकरी के लिए सही प्रतीत होता है।
वैसे भी, आपके उदाहरण के अनुसार, आप बस इसे एनिमेटेड GIF फ़ाइल के साथ कर सकते हैं और ठीक उसी परिणाम प्राप्त कर सकते हैं।
यदि आप After Effects के साथ काम करते हैं तो आप Bodymovin प्लग-इन का उपयोग कर सकते हैं । यह मोबाइल और वेब उपयोग के लिए आपके काम का प्रतिपादन करता है। आपके पास .json और lottie.js फ़ाइल होगी जिसे आप अपने HTML में उपयोग कर सकते हैं। लेकिन पहले आपको सामान्य सेटिंग्स में फ़ाइलों को लिखने और नेटवर्क तक पहुंचने की अनुमति देना बंद करना होगा। जब आपने किया है कि विंडो , एक्सटेंशन पर जाएं और Bodymovin खोजें । अपनी रचना का चयन करें, बचत के लिए स्थान निर्धारित करें और रेंडर पर क्लिक करें। अपने .json और lottie.js फ़ाइलों को अपने HTML में रखें और आपका काम पूरा हो गया है। मुझे लगता है कि GIF सबसे अच्छा समाधान नहीं है क्योंकि इसे लोड करने के लिए अधिक समय चाहिए।
आप इसे यहां डाउनलोड कर सकते हैं: http://aescripts.com/bodymovin बस अपनी कीमत जोड़ें, या यदि आप इसे मुफ्त में चाहते हैं तो आप सिर्फ $ 0.00 डाल सकते हैं ...
यहाँ एक Bodymovin का उपयोग करने और विज़ुअल स्टूडियो के साथ अपनी वेबसाइट में अपना एनीमेशन सेट करने के लिए ट्यूटोरियल है: youtube.com/watch?v=YmPsCD5jRDw&t=282s
यदि आप HTML और CSS मूल बातें जानते हैं तो यह आपके लिए आसान होना चाहिए। उस ट्यूटोरियल ने मेरी मदद की, मुझे उम्मीद है कि यह आपकी मदद कर सकता है।