एसवीजी घुमावदार तत्व जबकि एनिमेटिंग svgjs

Question

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

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() पर कॉल नहीं कर सकता।

Answer 1

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

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

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 हो सकता है कि अपने लक्ष्यों को केवल सीएसएस के साथ प्राप्त किया जा करने के लिए कर रहे हैं?