छद्म 3 डी: ग्रहों और अन्य गोलाकार वस्तुओं के रोटेशन का एनीमेशन

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

mikrodemo




फ़ोटोशॉप (माइक्रो-सबक) में इसे कैसे करें:

• वांछित बनावट का चयन करें
• इसमें से एक सर्कल काटें
• परत के गुणों के माध्यम से "स्वाद के लिए" डिमिंग या लाइटनिंग जोड़ें (मैं लाइटनिंग का उपयोग करूंगा, और विभिन्न छायाओं के संयोजन के साथ अधिक यथार्थवादी परिणाम प्राप्त होते हैं)

लंबे समय तक कार्यान्वयन से परेशान नहीं होने के लिए (क्योंकि यह पहले से ही एक मामूली मुद्दा है), मैं js + css + html का उपयोग करूंगा। वेब पेज के लिए फ़ोटोशॉप के लिए ऊपर वर्णित "ट्यूटोरियल" इस तरह दिखाई देगा:

• हम एक अंतहीन बनावट का चयन करते हैं जो लंबवत दोहराती है (या तो क्षैतिज या दोनों दिशाओं में)
• इस बनावट को पृष्ठभूमि के रूप में सेट करें
• निश्चित अंतराल पर js का उपयोग करके पृष्ठभूमि की स्थिति बदलें

आप कैनवास का उपयोग करके भी इस समस्या को हल कर सकते हैं (उदाहरण के लिए, Pixi.js या इसी तरह के पुस्तकालयों, या शुद्ध js + कैनवास का उपयोग करके एक क्रॉस-प्लेटफ़ॉर्म त्वरित समाधान प्राप्त किया जा सकता है)।

निर्णय

स्टाइल कैसा दिखता है:

.planet2d { background: repeat-x 0 0 url(earthmap-h100.jpg); border: 1px solid #999; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; box-shadow: inset 0 0 10px rgba(255,255,255,0.9); height: 100px; width: 100px; } .planet2d.moon { background-image: url(moon-h100.jpg); } .planet2d.jupiter { background-image: url(jupiter-h100.jpg); } .planet2d.venus { background-image: url(venus-h100.jpg); } .planet2d.mercury { background-image: url(mercury-h100.jpg); } .planet2d.io { background-image: url(io-h100.jpg); } 

यानी आपको पृष्ठभूमि की प्रारंभिक स्थिति सेट करने की आवश्यकता है, फिर ब्लॉक को गोल करें (यहां मैं सिर्फ सीमा-त्रिज्या का उपयोग करता हूं, लेकिन आप टेम्पलेट छवि का उपयोग कर सकते हैं सर्कल के बाहर काट दिया गया है, और आप इस टेम्पलेट में छाया भी शामिल कर सकते हैं, इस प्रकार एक परिणाम प्राप्त करने वाले) और छाया बना सकते हैं। , फिर ब्लॉक आकार सेट करें - बस इतना ही। और फिर विभिन्न ग्रहों के लिए शैलियों का वर्णन किया गया है।

कोई और जावास्क्रिप्ट कोड:

 (function (w) { w.Planet2D = function (interval) { interval = interval || 40; var j = 0; setInterval(function () { var els = document.querySelectorAll(".planet2d"); j--; for (var i = 0; i < els.length; i++) { els[i].style.backgroundPosition = j + "px 0px"; } }, interval); } })(window); 

यानी आपको सभी तत्वों का चयन करने और उनकी पृष्ठभूमि छवि को स्थानांतरित करने की आवश्यकता है।

परिणाम

1. कोई गणित नहीं
2. कई प्लेटफार्मों के लिए चाल को आसानी से लागू किया जाता है
3. एनीमेशन 3 डी की तरह बहुत विश्वसनीय है

संदर्भ

डेमो
विभिन्न ग्रहों के परिदृश्य
विच्छेदन के लिए गितुब

UPD: omfg : आप शुद्ध css पर codepen.io/chinchang/pen/xCkus भी बना सकते हैं