Vue एम्स्टर्डम 2022: भाग VII - Vue . के साथ एनिमेट करना

स्वागत! मेरी Vuejs एम्स्टर्डम सम्मेलन 2022 सारांश श्रृंखला के सातवें भाग में आपको देखकर खुशी हुई, जिसमें मैं आपके साथ सभी वार्ताओं का सारांश साझा करता हूं।

आप मेरी जेएसवर्ल्ड सम्मेलन 2022 सारांश श्रृंखला (चार भागों में) यहां पढ़ सकते हैं, जहां मैंने पहले दिन की सभी वार्ताओं का सारांश दिया था। आप मेरे ब्लॉग में Vue एम्स्टर्डम सम्मेलन 2022 की पिछली वार्ता भी पा सकते हैं।

(आवर्ती) परिचय

ढाई साल के बाद, 1 और 3 जून के बीच JSWorld और Vue एम्स्टर्डम सम्मेलन वापस थिएटर एम्स्टर्डम में थे, और मुझे पहली बार इस सम्मेलन में भाग लेने का मौका मिला। मैंने बहुत सी चीजें सीखीं, कई अद्भुत लोगों से मुलाकात की, महान डेवलपर्स के साथ बात की, और बहुत अच्छा समय बिताया। पहले दिन JSWorld सम्मेलन आयोजित किया गया था, और दूसरे और तीसरे दिन, Vue एम्स्टर्डम।

सम्मेलन महान वक्ताओं के साथ जानकारी से भरा था, जिनमें से प्रत्येक ने मुझे कुछ मूल्यवान सिखाया। वे सभी अपने ज्ञान और जानकारी को अन्य डेवलपर्स के साथ साझा करना चाहते थे। इसलिए मैंने सोचा कि यह बहुत अच्छा होगा अगर मैं इसे साझा करना जारी रख सकूं और दूसरों को इसका इस्तेमाल करने में मदद कर सकूं।

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

एक बहुत ही महत्वपूर्ण बिंदु

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

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

यहां आप सम्मेलन का कार्यक्रम देख सकते हैं।

Vue . के साथ एनिमेट करना

रमोना बिस्कोवेनु - SAP . में फ्रंटएंड डेवलपर

कभी-कभी हमारे अनुप्रयोगों को "वाह" की थोड़ी आवश्यकता होती है और हम इसे कुछ "आंदोलन" के साथ कर सकते हैं ताकि उन्हें और अधिक जीवंत बनाया जा सके।

हम देखेंगे कि कैसे अद्भुत एनिमेशन बनाने के लिए Vue मैजिक का उपयोग किया जाए, सरल से अधिक जटिल वाले तक, Vue को एनिमेशन लाइब्रेरी के साथ मिलाकर।

90 के दशक की वेबसाइटें

90 के दशक की वेबसाइटों पर, कभी-कभी बहुत सारे गति और रंग होते थे। लेकिन जिस तरह से हम वापस एनिमेशन कर सकते थे, वह gif के साथ था। जरा सोचिए कि डायल-अप इंटरनेट के युग में उन gif ने कितनी बैंडविड्थ का उपभोग किया था! इसलिए हम बैंडविड्थ खपत को सीमित करने के लिए कुछ छोटे लो-फ्रेम gifs के साथ समाप्त होते हैं, और यह परिणाम था:

चेतन क्यों?

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

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

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

दूसरी बार हमें उपयोगकर्ताओं को वहां रखने के लिए मार्केटिंग सामग्री के लिए इंटरैक्टिव सामग्री की आवश्यकता होती है।

जब आप कहानी सुनाने की कोशिश करते हैं तो एनिमेशन भी शक्तिशाली होते हैं।

व्यू <Transition />

वेनिला जावास्क्रिप्ट या jQuery में, आपको मैन्युअल रूप से समय और देरी की गणना करने की आवश्यकता होती है, और यह तय करना होता है कि कक्षाओं को कब जोड़ना या हटाना है। लेकिन Vue में, हम लक्ष्य तत्व को <Transition /> घटक में लपेटते हैं और यह उन कई कठिन चीजों को स्वचालित रूप से करता है। यहाँ एक साधारण फीका एनीमेशन है:

 <transition name="fade"> <p v-if="show">hello</p> </transition>

 .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter-from, .fade-leave-to opacity: 0; }

इस प्रकार Vue इसे संभालता है:

व्यू <TransitionGroup />

<TransitionGroup> एक अंतर्निर्मित घटक है जिसे सूची में प्रस्तुत किए गए तत्वों या घटकों के सम्मिलन, हटाने और क्रम परिवर्तन को एनिमेट करने के लिए डिज़ाइन किया गया है।

स्क्रीन पर फिसलने वाली कुछ टाइलों का यह एक सरल उदाहरण है:

 <transition-group tag="div" class="tile-section" name="list" appear> <TileComp v-for="(tile, i) in tiles" :key="i + 'tile'" :header="tile.title" :content="tile.content" :footer="tile.footer" ></TileComp> </transition-group>

 .list-enter-active, .list-leave-active { transition: all 1s ease; } .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(70px); } 

जावास्क्रिप्ट हुक

CSS बहुत बढ़िया है और हम इसके साथ बहुत कुछ कर सकते हैं, लेकिन कभी-कभी यह काफी नहीं होता है।

Vue <Transition /> घटक पर कुछ हुक प्रदान करता है।

 <Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @enter-cancelled="onEnterCancelled" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" @leave-cancelled="onLeaveCancelled" > <!-- ... --> </Transition>

ग्रीनसॉक जीएसएपी

ग्रीनसॉक एनिमेशन प्लेटफॉर्म (शॉर्ट के लिए जीएसएपी ) एक शक्तिशाली जावास्क्रिप्ट लाइब्रेरी है जो फ्रंट-एंड डेवलपर्स और डिजाइनरों को मजबूत टाइमलाइन-आधारित एनिमेशन बनाने में सक्षम बनाता है।

जीएसएपी में सबसे महत्वपूर्ण चीजों में से एक जो आप सुनेंगे, वह है ट्वीन।

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

ट्वीन बनाने की सामान्य विधियाँ (ये सभी विधियाँ एक ट्वीन इंस्टेंस लौटाती हैं):

• gsap.to()

• जीएसएपी से ()

• gsap.fromTo ()

  
  

सरल एनिमेशन (कोई फैंसी अनुक्रमण नहीं) के लिए, उपरोक्त विधियों की आपको आवश्यकता है!

 gsap.to(".selector", {toVars}); gsap.from(".selector", {fromVars}); gsap.fromTo(".selector", {fromVars}, {toVars}); // special properties (duration, ease, etc.) go in toVar

अब जीएसएपी को हमारे टाइल्स उदाहरण में जोड़ते हैं:

 <div class="tile-section"> <TileComp v-for="(tile, i) in tiles" :key="i + 'tile'" :header="tile.title" :content="tile.content" :footer="tile.footer" ></TileComp> </div>

 import gsap from "gsap"; ... mounted() { gsap.from(".tile", { duration: 0.5, opacity: 0, scale: 0, y: 200, ease: "power2", stagger: 0.1, }); }, 

व्यू एनिमेशन काउंटर

अच्छा एनिमेशन बनाने के लिए जीएसएपी का उपयोग करने का एक और सरल उदाहरण एक जश्न मनाने वाला काउंटर एनीमेशन हो सकता है। यहां आप देख सकते हैं कि यह कैसा दिखेगा:

हमारे पास टेम्पलेट में केवल एक h1 तत्व है जहां हम स्वरूपित मान और एक रीसेट बटन पास करते हैं।

 <div> <h1 ref="celebrate" class="counter" :class="{ celebrate: isCelebrate }"> {{ this.numberWithCommas(value) }} </h1> <button class="restart" @click="restart">Restart</button> </div>

हमें जीएसएपी के timeline फ़ंक्शन का उपयोग करने की आवश्यकता है। इसे अपने एनिमेशन को अनुक्रमित करने के लिए एक उपकरण के रूप में सोचें।

 import gsap from "gsap"; import confetti from "canvas-confetti"; const tl = gsap.timeline(); const start = 100000; const end = 3240074; export default { props: { msg: String, }, data() { return { isCelebrate: false, value: start, }; }, mounted() { tl.fromTo( ".counter", { innerText: start, scale: 0.8, }, { innerText: end, snap: { innerText: 1 }, duration: 4, ease: "linear", onUpdate: () => { this.$refs.celebrate.innerText = this.numberWithCommas( this.$refs.celebrate.innerText ); }, onComplete: () => { this.celebrate(); }, } ); }, methods: { celebrate() { this.isCelebrate = true; confetti({ particleCount: 150, spread: 100, origin: { y: 0.6 }, colors: ["#647eff", "#42d392"], disableForReducedMotion: true, }); }, numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }, restart() { tl.restart(); this.isCelebrate = false; }, }, };

पृष्ठ संक्रमण

Vue राउटर 4 में पृष्ठों को बदलने के लिए सिंटैक्स थोड़ा बदल गया है। हम राउटर को अब ट्रांजिशन कंपोनेंट में नहीं लपेटते हैं। इसके बजाय, हम v-slot का उपयोग करते हैं:

 <router-view v-slot="{ Component }"> <transition name="fade"> <component :is="Component" /> </transition> </router-view>

पृष्ठ संक्रमण का एक उदाहरण यहां दिया गया है:

इस पृष्ठ संक्रमण के निर्माण के लिए, हमें एंटर हुक की आवश्यकता है:

 <router-view v-slot="{ Component }"> <transition :key="$route.path" @enter="onEnter" :css="false" > <component :is="Component" /> </transition> </router-view>

फिर हमें जीएसएपी से SplitText प्लगइन को पंजीकृत करने की आवश्यकता है:

 import gsap from "gsap"; import SplitText from "gsap/SplitText"; gsap.registerPlugin(SplitText); gsap.defaults({ duration: 1, ease: "power3.inOut", });

और फिर प्लगइन का उपयोग करके हम टेक्स्ट को एनिमेट करने में सक्षम होने के लिए विभाजित करते हैं:

 mySplitText(el) { return new SplitText(el, { type: "words,chars,lines" }); },

आइए एक नजर डालते हैं onEnter हुक पर:

 onEnter(el, done) { const masterTL = gsap.timeline({ onComplete: () => { done; }, }); masterTL.add( this.enterContentTextAnimation( mySplitText(".content-text-header").chars ) ); masterTL.add( this.enterContentTextAnimation(".content-text-body"), "-=0.9" //overlap with previous by 0.9s ); masterTL.add(this.imgScaleOut(".content img"), "<"); //The start of previous animation },

और यहां आप देख सकते हैं कि आप जीएसएपी समय-सारिणी कैसे नेस्ट कर सकते हैं और enterContentTextAnimation और imgScaleOut फ़ंक्शन क्या करते हैं:

 enterContentTextAnimation(id) { const tl = gsap.timeline(); tl.fromTo( id, { yPercent: "100", opacity: 0, }, { yPercent: "0", opacity: 1, stagger: 0.03, } ); }, imgScaleOut(id) { const tl = gsap.timeline(); tl.from(id, { scale: 1.5, }); return tl; },

एसवीजी

एनिमेटेड चार्ट SVG एनिमेशन का एक अच्छा उदाहरण हो सकता है:

यहाँ कोड का वह भाग है जो इस चार्ट एनीमेशन को संभव बनाता है:

 watch: { data(newValue, oldValue) { newValue.map((data, index) => { var id = "#arc" + index; var d = this.calculateArc(data, index); var oldValueD = this.calculateArc(oldValue[index]); const tl = gsap.timeline(); tl.fromTo( id, { attr: { d: oldValueD }, }, { duration: 0.5, attr: { d: d }, yoyo: true, } ); }); }, },

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

सातवीं वार्ता का अंत

मुझे आशा है कि आपको यह भाग पसंद आया होगा और यह आपके लिए उतना ही मूल्यवान हो सकता है जितना कि यह मेरे लिए था।

अगले कुछ दिनों में, मैं बाकी की बातचीत आपके साथ साझा करूँगा। बने रहें…