जावास्क्रिप्ट का उपयोग करके छद्म 3 डी या लंबन

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

मूल बातें

वीडियो देखने और एप्लिकेशन से कुछ अनुप्रयोगों को घुमा देने के बाद, मैं इस निष्कर्ष पर पहुंचा: स्प्राइट (परत) मानो किसी घन में हो। इसलिए, जब हम डिवाइस को चालू करते हैं, तो निकट की परतें एक दिशा में चलती हैं और दूसरी में सबसे दूर की परतें। कहीं बीच में मुख्य परत है, जिस पर हमारा ध्यान जाता है।

सिद्धांत से निपटा, हम विकास के लिए आगे बढ़ें।

परतें लगाएं

हम दूर नहीं जाएंगे और DIV का उपयोग करेंगे, और CSS z-index संपत्ति भी हमारे लिए उपयोगी है।

<div id="background_scene" class="flow" style="background-image:url(res/images/moun.jpg);z-index:2;top:-20px;left:-150px;width:200%;height:200%"></div> <div id="clouds" class="flow" style="background-image:url(res/images/clouds.png);opacity: 0.5;z-index:3;top:120px;left:400px;"></div> <div id="dragon" class="flow" style="background-image:url(res/images/dragon.png);z-index:5;top:120px;left:500px;"></div> 

ऊपर, मैंने .flow वर्ग, प्रारंभिक निर्देशांक और चित्रों के साथ 3 स्प्राइट दिए। अब उन्हें हिलाने का समय आ गया है।

उपकरण का घूमना

अंतरिक्ष में एक स्थान प्राप्त करने के लिए हमारी सभी आवश्यकताओं को घटना से संतुष्ट किया जाएगा: window.ondevicemotion।

 window.ondevicemotion = function(event) { X = event.accelerationIncludingGravity.x; Y = event.accelerationIncludingGravity.y; Z = event.accelerationIncludingGravity.z; } 

मैं इस घटना को चित्रित नहीं करूंगा, उत्सुक को संदर्भों की सूची में भेजें।
हमें इस घटना से 2 मान चाहिए: X और U।
ऑफसेट डेल्टा की गणना करें:

  deltaX = lastX - X; deltaY = lastY - Y; lastY = Y; lastX = X; 

वर्ग नाम .flow द्वारा सभी स्प्राइट का पता लगाएं
क्योंकि एक छोटे z- इंडेक्स 'के साथ स्प्राइट सबसे "दूरस्थ" होते हैं और उन्हें विपरीत दिशा में बढ़ना चाहिए, प्रत्येक समूह के लिए आंदोलनों की गणना अलग से की जाती है:

 elements = $('div.flow'); elements.each(function (key, layer) { zIndex = layer.style.zIndex; sprite = $('#' + layer.id); if (zIndex > 9) { //        z-index < 10 anim = {"left":"-=" + deltaX * zIndex * 2, "top":"+=" + deltaY * zIndex * 0.5}; //0.5      ,         } else { anim = {"left":"+=" + deltaX * zIndex * 2, "top":"-=" + deltaY * zIndex * 2}; } sprite.animate(anim, 100); //   jQuery } 

अपने सामान्य कार्य के अलावा, जेड-इंडेक्स स्प्राइट्स की गति को तेज करने के लिए गुणांक के रूप में भी कार्य करता है।
खैर, यह मूल रूप से है।

सुधार

1. लेयर मोशन विधि की ट्रिगरिंग की संख्या को कम करने के लिए, टाइमर सक्रियण जोड़ा गया है। इससे वृद्धि हुई, लेकिन अंतराल में वृद्धि एनीमेशन में एक चिकोटी का कारण बनती है।
2. झटकों को कम करने के लिए, डेल्टा की गणना अलग तरह से की जाती है: डेल्टा = एक्स - एक्सस्रेडन; Xredn - टाइमर अंतराल के क्षणों पर गणना की जाती है। यहां तक ​​कि अगर अंतिम क्षण में आप अपना हाथ हिलाते हैं, तो सब कुछ सुचारू हो जाएगा।
3. स्क्रीन ओरिएंटेशन के लिए जोड़ा गया समर्थन

समस्याओं

1. झटकों को अभी भी ध्यान देने योग्य है, मैं नहीं जानता कि क्या यह कैलिब्रेट करना या पूरी तरह से अलग एल्गोरिथ्म लिखना आवश्यक है
2. मैं वास्तव में स्प्राइट्स की गति को कॉन्फ़िगर नहीं कर सकता

किया जा सकता था

1. लेवल कंट्रोल के साथ ड्रैग एंड ड्रॉप स्प्राइट का एक साधारण डिज़ाइनर
2. एक्सेलेरोमीटर के साथ न केवल काम करें, बल्कि माउस के साथ भी स्क्रॉल बार (उपलब्धता या सेटिंग्स के आधार पर)
3. कैमरे से काम संभव है, लेकिन ...

मैं पढ़ने की सलाह देता हूं

डेमो (यदि डिवाइस विचलन का समर्थन नहीं करता है, तो यादृच्छिक झुकाव जनरेटर चालू होगा)

एक कोड और उदाहरण के रूप में, एक विचार से कार्यान्वयन तक का कम समय दोषी है। एक राय, टिप्स जानना उत्सुकता होगी। अगर रुचि है, तो मैं लाइब्रेरी को खत्म करने की कोशिश करूंगा।

UPD : यह Andriod उपकरणों पर परीक्षण करना संभव नहीं था। और, दुर्भाग्य से, कोड उन पर काम नहीं करता है। मैं एक समाधान खोजने की कोशिश करूंगा।