jQuery.easing - easeOutCubic - आसानी से

Question

पर जोर देना मैं रॉबर्ट (http://gsgd.co.uk/sandbox/jquery/easing/) द्वारा jQuery आसान प्लगइन का उपयोग कर रहा हूं और मुझे आसानी से प्रभाव डालने या खींचने की आवश्यकता है।

असल में, मैं आसानी से प्रभाव को वास्तव में त्वरित बनाना चाहता हूं लेकिन फिर आसानी से धीमा हो जाता हूं।

मुझे विश्वास है कि मैं jQuery.easing.easeOutCubic(null, current_time, start_value, end_value, total_time) का उपयोग करके ऐसा कर सकता हूं लेकिन मुझे यह पता नहीं लगा सकता कि इसका उपयोग कैसे किया जाए।

यह कैसे प्राप्त किया जा सकता है?

Answer 1

आपको jQuery के साथ कस्टम आसान करने के लिए एक आसान प्लगइन की आवश्यकता नहीं है। आपको केवल एक आसान फ़ंक्शन के स्रोत जावास्क्रिप्ट कोड की आवश्यकता है जिसका आप उपयोग करने जा रहे हैं।

jQuery UI स्रोत कोड से प्राप्त easeOutCubic फ़ंक्शन यहां दिया गया है। this thread for more देखें।

$.easing.easeOutCubic = function (x, t, b, c, d) { 
    return c*((t=t/d-1)*t*t + 1) + b; 
} 

अब आप समारोह को संपादित करने और/या उसका नाम बदल कर सकते हैं ...

$.easing.myEasing = function (x, t, b, c, d) { 
    return c*((t=t/d-1)*t*t + 1) + b; 
} 

(निम्न उदाहरण के सभी एक 3 की slideToggle() सेकंड की अवधि के साथ एक 375 पिक्सेल नीले वर्ग का उपयोग करें। आप आपकी पसंद के प्रभाव को प्रदर्शित करने के लिए 3 सेकंड (3000 एमएस) अवधि को बदल सकते हैं। मैंने अंतर को देखने के लिए इसे धीमा करने के लिए 3 सेकंड का चयन किया।)

फिर आप इसे अपने jQuery के अंदर डाल दें, ऐसा कुछ शायद ...

$(document).ready(function(){ 

     $.easing.myEasing = function (x, t, b, c, d) { 
      return c*((t=t/d-1)*t*t + 1) + b; 
     } 

     $("#button").click(function() { 
      $('#myDiv').slideToggle(
       3000, // <-- Animation Duration (3000 ms) 
       'myEasing' // <-- the Name of your easing function 
      ); 
     }); 

}); 

यहाँ ऊपर कोड है जो easeOutCubic समारोह एक 3 सेकंड की अवधि के साथ myEasing का नाम दिया है और एक slideToggle() घन करने के लिए लागू होता है के एक डेमो है।

http://jsfiddle.net/kJZxQ/

ठीक है, अब आपकी समस्या के लिए: "। ... आसानी प्रभाव बहुत जल्दी होने के लिए, लेकिन फिर आसानी बाहर के दौरान बहुत धीमा" तुमने कहा था कि तुम चाहते

यहाँ easeOutCubic का ग्राफ है:

आपके पास दो विकल्प है, तो आप सहजता समीकरण ही में हेरफेर कर सकते हैं या कुछ अन्य आसान समारोह एक ऐसी ही वक्र है, तो हम देख सकते हैं, लेकिन ढलान (तेज) जब तक भाग बाहर आसानी।

इस डेमो पेज नेत्रहीन आप सभी को आसान घटता से पता चलता ...

http://api.jqueryui.com/easings/

आप देख सकते हैं, कई घटता करने के लिए (7) इसी प्रकार की आकृति रहे हैं - easeOutCubic अभी तक सामने के छोर पर ढलान है। यहां कई उदाहरण दिए गए हैं ...

---

(10) - easeOutQuart easeOutQuart Demo

---

(13) - easeOutQuint easeOutQuint Demo

---

(16) - easeOutExpo easeOutExpo Demo

---

यह पिछले एक तरह लगता है, easeOutExpo तेज स्टॉक उपलब्ध कार्य है। उपर्युक्त समीकरणों में मतभेदों की तुलना करके, हम वक्र को और भी आगे बढ़ाने के लिए easeOutExpo समीकरण में भी कुशलतापूर्वक उपयोग कर सकते हैं।

यह कस्टम समीकरण हास्यास्पद तेज है और उसके बाद काफी धीमा ...

http://jsfiddle.net/kJZxQ/11/

यहां तक ​​कि पिछले से अधिक चरम ...

http://jsfiddle.net/kJZxQ/12/

अवधि पिछले प्रदर्शन पर वृद्धि हुई है प्रभाव को अतिरंजित करने के लिए 6 सेकंड तक ...

http://jsfiddle.net/kJZxQ/13/

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

मुझे सच में लगता है कि easeOutExpo आपके वर्णन का वर्णन करने जैसा है। अनिवार्य रूप से, यह आपके easeOutCubic समीकरण है, लेकिन अंत में केवल तेज और धीमी गति से तेज़ है।