घुमावदार पथ में एक div को ले जाएं (जैसे पुराने पुराने दिनों में ट्विनिंग)?

Question

मैं की तरह

fromHeretoThere(x1,y1,x2,y2){ 
    //.... 
} 

एक समारोह का निर्माण करने की तो यह है कि मैं एक वक्र में एक और बात करने के लिए HTML पृष्ठ पर एक बिंदु से एक <div> या एक छवि स्थानांतरित कर सकते हैं करना चाहते हैं।

क्या यह केवल कैनवास का उपयोग करने योग्य है? एचटीएमएल 5? कोई प्लगइन/स्क्रिप्ट्स आप सुझाव देते हैं?

Answer 1

संपादित: यहाँ पर कार्य चल रहा है कि एक फिर से प्रयोग करने योग्य जे एस वस्तु के रूप में नीचे वर्णित दूसरी अवधारणा को पैकेज है। आप कोड संपादित कर सकते हैं या नेत्रहीन वक्र जिसके परिणामस्वरूप कोड को देखने के लिए खींचें:

http://phrogz.net/SVG/animation_on_a_curve.html

---

मैं व्यक्तिगत रूप से एसवीजी, जो बात की इस तरह बना देता है का उपयोग करें (एक मनमाना Bézier वक्र साथ एनिमेट) तुच्छ <animateMotion> तत्व का उपयोग कर। बोनस के रूप में, आप इसे अपने लिए रोटेशन की गणना भी कर सकते हैं। कुछ उदाहरण:

• http://www.w3.org/TR/SVG/images/animate/animMotion01.svg
• https://developer.mozilla.org/en/SVG/Element/animateMotion
• http://devfiles.myopera.com/articles/76/SolarSystem.svg

नोट आप भी वास्तव में उपयोग एसवीजी परिणाम प्रदर्शित करने के लिए की जरूरत नहीं है कि; आप इस एनीमेशन के साथ बस ऑफ-स्क्रीन एसवीजी बना सकते हैं और एनिमेटेड तत्व के परिवर्तन को वांछित बिंदु/रोटेशन प्राप्त करने के लिए नमूना बना सकते हैं।

वैकल्पिक रूप से जहां पर मार्ग के किनारे होना चाहिए (यदि आप रोटेशन नहीं करना चाहते, या ट्रेवर्सल की दर को नियंत्रित करने, जबकि यह अपने आप गणना करना चाहते हैं) आप एक एसवीजी पथ बना सकते हैं और बस का उपयोग getPointAtLength()/getTotalLength() को खोजने के लिए कुल ट्रैवर्सल दूरी का एक दिया प्रतिशत।

// Moving along an S curve from 0,0 to 250,450 
var p = document.createElementNS('http://www.w3.org/2000/svg','path'); 
p.setAttribute('d','M0,0 C350,20 -200,400 250,450'); 
var len = p.getTotalLength(); 
for (var i=0;i<=100;i+=10){ 
    var pct = i/100; 
    var pt = p.getPointAtLength(pct*len); 
    console.log(i, pt.x, pt.y); 
} 

// 0 0 0 
// 10 65.54324340820312 10.656576156616211 
// 20 117.17988586425781 49.639259338378906 
// 30 120.2674789428711 114.92564392089844 
// 40 100.49604034423828 178.4400177001953 
// 50 78.06965637207031 241.1177520751953 
// 60 63.526206970214844 305.9412841796875 
// 70 74.59959411621094 370.6294860839844 
// 80 122.1227798461914 415.8912658691406 
// 90 184.41302490234375 438.8457336425781 
// 100 250 450 

अब तुम सब करने की है .style.top और अपने <div> या <img> की .style.left सेट किया गया है उचित रूप से: इस के साथ आप भी एक एसवीजी दस्तावेज़ जरूरत नहीं है। एकमात्र 'कड़ी' हिस्सा यह तय कर रहा है कि आप where to put the handles को दिखने और परिभाषित करने के लिए वक्र को क्या चाहते हैं।

Answer 2

आप उपयोग कर सकते हैं कम से कम:

• जावास्क्रिप्ट()
• CSS3 के संक्रमण (http://www.the-art-of-web.com/css/css-animation/)
• कैनवास (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)

CSS3 के शायद सबसे आसान है, लेकिन जावास्क्रिप्ट होगा सबसे ब्राउज़र संगत हो।

तुम भी कुछ इस तरह को देखने के लिए चाहते हो सकता है:

• http://jsanim.com/
• http://processingjs.org/

क्या यह संभव है कि आप क्या करने की कोशिश कर रहे हैं?

Answer 3

कभी कभी googling आसान है:

http://yuilibrary.com/yui/docs/anim/curve.html

Answer 4

jQuery एनिमेट के चरण फ़ंक्शन का उपयोग करके आप किसी भी वक्र में एनिमेट कर सकते हैं।

कैनवास का उपयोग करने वाली कुछ चीजों के लिए बेहतर है, लेकिन अधिकांश छोटे और सरल एनिमेशन के लिए बस jQuery के साथ सीएसएस मूल्यों को बदलना (यह वही है जो एनिमेट करता है) तेज़ और सरल है। http://jsfiddle.net/zVddG/