2017-11-19 2 views
5

मैं अभी जावास्क्रिप्ट, Jquery, SVG, और SVG.js का उपयोग कर रहा हूं। मैं एनिमेटिंग के दौरान अपने मूल के बारे में एक सर्कल घुमाएगा। एनीमेशन एक ही काम कर रहा है, इसलिए मैं कुछ प्रकार के चरण समारोह का उपयोग कर सकता था लेकिन मुझे कुछ भी नहीं मिला। समस्या यह है कि मेरे वर्तमान समाधान के साथ एनीमेशन जंकी है, इसे एनीमेशन को रोकना है, सर्कल घुमाएं, और फिर इसे फिर से शुरू करें। जो अनुक्रम में बहुत अधिक देरी है और एक wiggling गति का कारण बनता है। अभी जो मैं कुछ करने के लिए बदलने की जरूरत है यहाँएसवीजी घुमावदार तत्व जबकि एनिमेटिंग svgjs

var draw = SVG('svg'); 
var innerCircle = draw.group().addClass("atom0g0").move(100,100); 
innerCircle.circle(100).addClass("atom0p0").center(0, 0).attr({ fill: "white", stroke: "blue", "stroke-dasharray": "10" }); 
innerCircle.animate(6000).rotate(360, 0, 0).loop(); 

और क्रियान्वित कोड,:: यहाँ सेटअप कोड है

var elms = $(".atom"+atom.atom_id.toString()+"g0"); 
for (var j=0; j < elms.length; j++) { 
    // this is the problem, too much of a delay, therefore causing a wiggle motion. 
    elms[j].instance.animate().stop(); 
    elms[j].instance.rotate(step, 0, 0); 
    elms[j].instance.animate(6000).rotate(360, 0, 0).loop(); 
} 

यहाँ CodePen है कि मैं पर काम कर रहा हूँ अभी इसे बनाने के लिए है : Current Version या Bugged Version

संक्षेप में (यदि आप अभी अंत में छोड़ दिए गए हैं) तो मुझे सर्कल की एनीमेशन को पूरी तरह से रोक दिए बिना एक सर्कल घुमाने की आवश्यकता है। मुझे पता है कि play(), pause() काम नहीं करता है क्योंकि एनीमेशन रोके जाने पर मैं rotate() पर कॉल नहीं कर सकता।

+2

यदि आप कोई कोडपेन उदाहरण जोड़ते हैं तो आप अपने प्रश्न का बेहतर तरीके से वर्णन कर सकते हैं जिसमें HTML, CSS और JS शामिल हैं ताकि लोग जल्दी से जवाब दे सकें। –

+0

@ भावेश बी मैंने आपके लिए कोडपेन लिंक जोड़ा, धन्यवाद। –

+0

मुझे अभी भी कुछ स्पष्टीकरण की आवश्यकता है, क्या आप लाल गेंद को काले रंग के चारों ओर घूमना चाहते हैं, जबकि उसका पथ घूर्णन कर रहा है, या क्या आप चाहते हैं कि लाल गेंद काले रंग के चारों ओर घूमने के दौरान घूमती हो और अपने आस-पास घूमती हो? – cowCrazy

उत्तर

3

स्वीकृत जवाब:

कोशिश एक और तत्व के साथ अपने तत्व लपेट और उन्हें अलग से चेतन करने के लिए।

elms[j].instance.rotate(Math.random()*360, 0, 0); 
कि में

:

elms[j].instance.animate(1000).rotate(Math.random()*360, 0, 0); 

इस तरह रोटेशन एनिमेट किया जाएगा


समाधान में से एक इस लाइन को बदलने के लिए है।

Codepen: https://codepen.io/soentio/pen/POVLYV


संभव समाधान मैं अपने संक्रमण के लिए सीएसएस का उपयोग करने के अन्य। निम्न पंक्ति जोड़कर:

#svg > g { 
    transition: transform 1s ease-in-out; 
} 

आप यह सुनिश्चित करें कि जब भी एक समूह (है कि आपके svg रूट नोड के प्रत्यक्ष बच्चों है) घुमाया जाता है, इसके लिए हम सुचारू रूप से एनिमेटेड किया जा रहा है बनाते हैं।

CodePen: https://codepen.io/soentio/pen/gXqqNQ

इस दृष्टिकोण का लाभ यह है कि जो कुछ भी अपने रोटेशन है, ब्राउज़र सबसे छोटा रास्ता चुनता है।


बोनस: मैं श्रेष्ठता आयुध डिपो सीएसएस एनिमेशन (;-)) में विश्वास करते हैं और अपने कोड से प्रेरित आप एक छोटे से codepen बेला बनाया: https://codepen.io/soentio/pen/YEBgyj हो सकता है कि अपने लक्ष्यों को केवल सीएसएस के साथ प्राप्त किया जा करने के लिए कर रहे हैं?

+0

ये दिलचस्प हैं, लेकिन दुर्भाग्यवश वे मेरी समस्या का समाधान नहीं करते हैं। समस्या यह है कि जब मैं 'एनिमेट()। स्टॉप() के माध्यम से एनीमेशन को रोकने की कोशिश करता हूं;' एनीमेशन को रोकने के लिए कुछ सेकंड लगते हैं और इसे घुमाने के लिए थोड़ा और कुछ एनीमेशन फिर से चलाते हैं। और मुझे पता है कि नाटक, विराम काम नहीं करेगा क्योंकि घुमाव एक रोके हुए एनीमेशन पर काम नहीं करता है। तो मुझे एनीमेशन को पूरी तरह से रोक दिए बिना सर्कल घुमाने के लिए एक रास्ता खोजने की जरूरत है। –

+1

@ प्रेस्टनहेगर आप कुछ कंटेनर जोड़कर इसे आंतरिक सामग्री से अलग करके एनिमेट करके इसे हल नहीं कर सकते हैं? – entio

+0

यह इतना आसान समाधान है और यह काम करता है। मैंने इसके बारे में क्यों नहीं सोचा? आपको बहुत - बहुत धन्यवाद! मैं यहां प्रश्न पोस्ट करने से 3 दिन पहले समाधान के साथ आने का प्रयास कर रहा था, और यह सब कुछ आसान था! एक बार फिर धन्यवाद। –

संबंधित मुद्दे