jQuery के साथ "उड़ान मलबे" प्रभाव बनाने के साथ कोई कैसे होगा?

Question

मैं कुछ एनीमेशन पर काम कर रहा हूं और jQuery लाइब्रेरी का उपयोग कर रहा हूं।

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

यहाँ अब तक मेरी विधि है ...

var parent = this.element.parent(), 
    direction = this.element.position().left < parent.width()/2 ? '-' : '+'; 

this.element.animate({ 
    left: direction + '=300', 
    top: '-=200' 
}, duration); 

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

मैं बॉक्स 2 डी जैसे पूर्ण भौतिकी इंजन को लागू नहीं करना चाहता हूं।

मुझे पता है कि मेरी कोड अनिवार्य रूप से करना चाहिए, जो मेरा मानना ​​है कि है ...

1. elment अप (नकारात्मक top) उड़ना और दिशा में सेट (नकारात्मक या सकारात्मक left), कुछ मूल्य खस्ताहाल साथ पवन प्रतिरोध आदि के कारण क्षैतिज आंदोलन के नुकसान को अनुकरण करने और गुरुत्वाकर्षण के कारण लंबवत आंदोलन के नुकसान को अनुकरण करने के लिए।
2. विस्फोट से तत्व की ऊपरी बल की तुलना में गुरुत्वाकर्षण बल कुछ चरण में मजबूत हो जाएगा, इस मामले में तत्व को गिरने की आवश्यकता होगी।

मुझे वास्तव में इस समस्या से संपर्क करने का तरीका नहीं पता है। मैं उम्मीद कर रहा था कि मैं jQuery के animate() का लाभ उठा सकता हूं, लेकिन मुझे क्षय मान को शामिल करने के बारे में पता नहीं है।

इस प्रभाव को बनाने का सबसे अच्छा तरीका क्या होगा?

Answer 1

(मैं एक जवाब के रूप में इस पोस्ट करेंगे के बाद से है कि ’ क्या यह वास्तव में है।)

तुम सिर्फ आंख कैंडी के लिए एक मलबे एनीमेशन की जरूरत है, या ठीक गणना की जा करने के लिए इसे है? मैंने पाया कि यादृच्छिक मूल्यों का उपयोग वास्तव में यथार्थवादी बना सकता है। देखें http://jsfiddle.net/minitech/fSaGk

Answer 2

आप शायद animate() कॉल की easing संपत्ति का उपयोग करें, और jQuery Easing Plugin लाभ उठाने के लिए एक प्रभाव कुछ अधिक jQuery में डिफ़ॉल्ट रूप से की पेशकश की ढील मानक linear से सूक्ष्म प्राप्त करने की आवश्यकता के लिए जा रहे हैं।

अन्य चाल कि कई चरण प्रभाव आप के बाद कर रहे हैं पाने के लिए श्रृंखलाanimate() के लिए कॉल करने के लिए है।

यहाँ एक वास्तव में (और मैं वास्तव में मतलब) त्वरित mockup कि kinda- sorta आप एक विचार देता है।

इसके बारे में हिम्मत:

debris.animate({ 
    left: direction + '=150', 
    easing: 'linear', 
}, { 
    queue: false, 
    duration: duration 
}) 
.animate({ 
    top: '-=100', 
    easing: 'easeOutQuint', 
}, { 
    queue: true, 
    duration: vduration 
}) 
.animate({ 
    top: '+=100', 
    easing: 'easeInQuint', 
}, { 
    queue: true, 
    duration: vduration 
}); 

कुंजी तत्व हैं:

• बाएं-दाएं एनीमेशन linear है - यह क्षय आप देख रहे हैं नहीं है बल्कि यह इस बात के लिए पर्याप्त है mockup
• बाएं-दाएं एनीमेशन स्पष्ट रूप से कतारबद्ध नहीं है, इसलिए श्रृंखला में अगले animate() तुरंत शुरू होता है
• ऊपर-नीचे एनीमेशन होते हैं दो पंक्तिबद्ध की (यह डिफ़ॉल्ट रूप है, लेकिन मैं इसे वैसे भी स्पष्टता के लिए निर्दिष्ट किया है) एनिमेशन, प्रत्येक बाएं-दाएं एनीमेशन के आधे पर समय समाप्त हो गया
• मैं easeOutQuint आसान समारोह का उपयोग किया है Easing प्लगइन से गुरुत्वाकर्षण प्रभाव ऐसा करने के लिए - यह सही के पास कहीं भी नहीं है, लेकिन आप एक्स एक साथ के साथ विचार

पर्याप्त कतार और इस तरह animate() कॉल की श्रंखला के साथ आप एक बहुत अच्छा खस्ताहाल प्राप्त करने में सक्षम होना चाहिए मिल एक अच्छी लग रही गुरुत्वाकर्षण-प्रेरित वाई ...

Answer 3

मैं minitech के कोड बड़े पैमाने पर ...

var element = $('div'), 
    parent = element.parent(), 
    position = element.position(), 
    offset = element.offset(), 
    directionOver180 = false, 
    flyAnimation; 

$('body').css('overflow', 'hidden'); 

var angle = (Math.random() * 180) + (directionOver180 ? 180 : 0), 
    angleCalc = angle * Math.PI/180, 
    velocityX = Math.cos(angleCalc), 
    velocityY = Math.sin(angleCalc), 
    currentX = offset.left, 
    currentY = offset.top, 
    gravity = -20; 

flyAnimation = setInterval(function() { 

    currentX += velocityX * 5 * (directionOver180 ? -1 : 1); 
    currentY += velocityY * 3 + ++gravity; 

    velocityX += 0.02; 
    velocityY += 0.1 * Math.random(); 

    element.css({ 
     left: currentX, 
     top: currentY 
    }); 

    if (currentY + element.height() > $(window).height()) { 
     $('body').css('overflow', 'visible'); 
     clearInterval(flyAnimation); 
     element.remove(); 
    } 

}, 20); 

jsFiddle को संशोधित करने समाप्त हो गया।