Sveltejs Academy · पाठ

कस्टम Easing फ़ंक्शन

एनिमेशन की गति नियंत्रित करने के लिए easing फ़ंक्शन लिखें या आयात करें।

पाठ 3, कुल 4 में से13 चरण

कस्टम Easing फ़ंक्शन, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Sveltejs Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

ईज़िंग क्या है

ईज़िंग फ़ंक्शन रैखिक समय (0 से 1) को गैर-रैखिक प्रगति वक्र में बदलता है, जिससे ऐनिमेशन को विशेष प्रभाव मिलता है।

फ़ंक्शन हस्ताक्षर

ईज़िंग फ़ंक्शन [0, 1] में t लेता है और समायोजित प्रगति लौटाता है।

function linear(t) { return t; }

अंतर्निहित लाइब्रेरी

Svelte का svelte/easing सामान्य वक्र निर्यात करता है: linear, quadIn, cubicOut, elasticOut, bounceOut आदि।

अंतर्निहित विकल्पों का उपयोग

इसे किसी ट्रांज़िशन या ट्वीन में पास करें।

import { cubicOut } from "svelte/easing";
const p = tweened(0, { easing: cubicOut });

कस्टम फ़ंक्शन

डिज़ाइन से मेल खाने वाला अपना फ़ंक्शन लिखें।

function easeInOutSine(t) { return -(Math.cos(Math.PI * t) - 1) / 2; }

बेज़ियर वक्र

सटीक नियंत्रण के लिए CSS cubic-bezier मानों को JS फ़ंक्शन में बदलें।

कब उपयोग करें

क्रिया के अनुसार ईज़िंग चुनें: प्रवेश के लिए cubic-out, निकास के लिए cubic-in और उछलते हुए दिखने वाले प्रभावों के लिए elastic-out।

संयोजन

जटिल मोशन के लिए कई ईज़िंग को मिलाएँ, जैसे तेज़ शुरुआत, धीमा अंत और समाप्ति पर उछाल।

ईज़िंग विज़ुअलाइज़र

कोड लिखने से पहले वक्रों का पूर्वावलोकन करने के लिए easings.net जैसे ऑनलाइन टूल का उपयोग करें।

सुगम्यता

मोशन के प्रति संवेदनशील उपयोगकर्ताओं के लिए अत्यधिक उछाल वाले ईज़िंग से बचें।

पुनः उपयोग

अपने पूरे ऐप में एकसमान अनुभव के लिए कस्टम ईज़िंग को साझा मॉड्यूल में परिभाषित करें।

त्वरित जाँच

ईज़िंग फ़ंक्शन की इनपुट सीमा क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति

ईज़िंग रैखिक प्रगति को एक वक्र में बदलता है। svelte/easing के अंतर्निहित विकल्पों का उपयोग करें या कस्टम फ़ंक्शन लिखें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “कस्टम Easing फ़ंक्शन” पाठ निःशुल्क है?

हाँ—“कस्टम Easing फ़ंक्शन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“कस्टम Easing फ़ंक्शन” में मैं क्या सीखूँगा?

एनिमेशन की गति नियंत्रित करने के लिए easing फ़ंक्शन लिखें या आयात करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Sveltejs Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“कस्टम Easing फ़ंक्शन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Sveltejs Academy पर वापस जाएँ