स्वेल्ट में बदलाव और एनिमेशन को समझना

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

एक व्यापक परियोजना की स्थापना

स्वेल्ट के साथ उठने-बैठने के लिए, आपको यह सुनिश्चित करना चाहिए Node.js रनटाइम और नोड पैकेज मैनेजर (एनपीएम) आपके कंप्यूटर पर ठीक से इंस्टॉल हैं. अपना टर्मिनल खोलें और निम्नलिखित कमांड चलाएँ:

npm create vite

यह एक मचान होगा नया Vite.js प्रोजेक्ट. अपने प्रोजेक्ट को नाम दें, चुनें दुर्बल रूपरेखा के रूप में, और संस्करण को सेट करें जावास्क्रिप्ट. फिर प्रोजेक्ट निर्देशिका पर स्विच करें और आवश्यक निर्भरताएँ स्थापित करने के लिए निम्नलिखित कमांड चलाएँ:

npm install

बॉयलरप्लेट कोड को हटाकर हटाएँ संपत्ति और उदारीकरण फ़ोल्डर्स, और की सामग्री को साफ़ करना App.svelte और ऐप.सीएसएस फ़ाइलें.

स्वेल्ट में ट्विनिंग का उपयोग कैसे करें

ट्विनिंग एनीमेशन और कंप्यूटर ग्राफिक्स में एक तकनीक है जो सुचारू और यथार्थवादी गति या बदलाव बनाने के लिए कीफ्रेम के बीच मध्यवर्ती फ्रेम उत्पन्न करती है। Svelte एक ऑफर करता है tweened उपयोगिता जो आपको संख्यात्मक मानों का उपयोग करके तत्वों को चेतन करने की अनुमति देती है, जिससे आपके वेब अनुप्रयोगों में द्रव संक्रमण और एनिमेशन बनाना आसान हो जाता है।

ट्वीन उपयोगिता का एक हिस्सा है व्यापक/गति मापांक। अपने घटक में ट्वीन्ड का उपयोग करने के लिए, आपको इसे इस प्रकार आयात करना होगा:

import { tweened } from'svelte/motion'

हुड के तहत, ट्वीन उपयोगिता सिर्फ एक लिखने योग्य स्वेल्ट स्टोर है। स्वेल्ट स्टोर मूल रूप से एक जावास्क्रिप्ट ऑब्जेक्ट है जिसका उपयोग आप राज्य प्रबंधन को संभालने के लिए कर सकते हैं। ट्वीन्ड स्टोर की दो विधियाँ हैं: तय करना और अद्यतन. बुनियादी स्तर पर, ट्वीन्ड स्टोर का सिंटैक्स कुछ इस तरह दिखता है:

const y = tweened(defaultValue, {
 duration: [time-in-milliseconds],
 easing: [easing-function],
})

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

स्वेल्ट में आसान कार्य एक ट्वीन के व्यवहार को परिभाषित करते हैं। ये फ़ंक्शन का हिस्सा हैं व्यापक/सुगम मॉड्यूल जिसका अर्थ है कि आपको मॉड्यूल से एक विशिष्ट फ़ंक्शन को ट्वीन्ड स्टोर में भेजने से पहले आयात करना होगा। स्वेल्ट के पास एक ईज़िंग विज़ुअलाइज़र है जिसका उपयोग आप विभिन्न ईज़िंग कार्यों के व्यवहार का पता लगाने के लिए कर सकते हैं।

पूरी तरह से यह समझाने के लिए कि आप ट्वीन उपयोगिता का उपयोग कैसे कर सकते हैं, यहां स्वेल्ट में एक तत्व के आकार को बढ़ाने के लिए ट्वीन स्टोर का उपयोग करने का एक उदाहरण दिया गया है।