ईजिंग फंक्शन प्रवंचक पत्रक
ईजिंग फंक्शन एक पैरामीटर के परिवर्तन की दर निर्दिष्ट करें अधिक समय तक।
वास्तविक वस्तुएं एक पल में शुरू और बंद नहीं होती।, और स्थिर गति से नहीं चलती। जब हम एक दराज खोलते हैं, तो हम पहले उसे जल्दी से घुमाते हैं, और जैसे ही यह बाहर आता है इसे धीमा कर देते है। फर्श पर कुछ गिरा दो, और यह होगा पहले नीचे की ओर गति करेंगा, और फिर फर्श से टकराने के बाद वापस ऊपर की ओर उछालेंगा।
यह पेज आपको सही ईजिंग फंक्शन चुनने में मदद करता है।
ओपन सोर्स
साइट को अपनी भाषा में अनुवाद करने में सहायता करें
x
t
CSS
CSS में, ट्रांज़िशन और ऐनिमेशन गुण आपको एक सहजता फ़ंक्शन निर्दिष्ट करने की अनुमति देते हैं।
.block { transition: transform 0.6s ; }
संपादित करें cubic-bezier.com.
CSS में, इस फ़ंक्शन का उपयोग करके कार्यान्वित किया जा सकता है
@keyframes:आकार
लोड हो रहा है...
स्थान
लोड हो रहा है...
पारदर्शिता
लोड हो रहा है...
PostCSS
PostCSS में, ईजिंग फंक्शन का वर्णन करना बहुत आसान है। एक प्लगइन postcss-easings है जो उस साइट से संक्रमण की जानकारी लेता है।
.block { transition: transform 0.6s ; }
उस घोषणा को ऊपर वर्णित एक में बदल दिया गया है।
दुर्भाग्य से, ईज़िंग फ़ंक्शन को किसी भी PostCSS प्लगइन के साथ सेट नहीं किया जा सकता है।
@keyframes के साथ किया जा सकता है, ऊपर देखें।ढाल
का उपयोग करके एक ढाल खींचना संभव है postcss-easing-gradients.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
गणित समारोह
नीचे आप टाइपस्क्रिप्ट में लिखे इस ईजिंग फंक्शन का कोड देख सकते हैं। चर x एनीमेशन की पूर्ण प्रगति का प्रतिनिधित्व करता है 0 (एनीमेशन की शुरुआत) और 1 (एनीमेशन का अंत) की सीमा में।
function (x: number): number {
}नीचे आप टाइपस्क्रिप्ट में लिखे इस ईजिंग फंक्शन का कोड देख सकते हैं। चर x एनीमेशन की पूर्ण प्रगति का प्रतिनिधित्व करता है 0 (एनीमेशन की शुरुआत) और 1 (एनीमेशन का अंत) की सीमा में।
function (x: number): number {
}परिवर्तनों के लिए ईजिंग की जाँच करें:
यह फंक्शन:
यह फंक्शन
रैखिक फंक्शन:
रैखिक फंक्शन