कैनवास और जावास्क्रिप्ट का उपयोग कर नेस्टेड एनिमेशन

Question

कैनवास और जावास्क्रिप्ट का उपयोग कर घोंसला वाले एनिमेशन संभव हैं? उदाहरण के लिए, एक तितली एक पंख के साथ एक साथ चलते हुए अपने पंख फहराते हुए।

इस तरह की एनीमेशन बनाने के बारे में जाने का सबसे अच्छा तरीका क्या होगा? अलग-अलग दिशाओं में चलने वाली तितली के कई उदाहरण होंगे।

मिनट में मैं कैनवास पर तितली आकार खींच रहा हूं, दो हिस्सों में, बाएं और दाएं पंख, जिन्हें मैं अलग से एनिमेट कर दूंगा। तब मैं पथ पर पूरी तितली को एनिमेट कर दूंगा।

ऐसा लगता है कि एकाधिक चित्रों और एनिमेशन पर बहुत सी प्रसंस्करण का उपयोग किया जाएगा, क्या इसे आकार के बजाय पीएनजी का उपयोग करके सहेजा जा सकता है, या यहां तक ​​कि एनिमेटेड जीआईएफ भी?

किसी भी सलाह की सराहना की जाएगी! धन्यवाद!

Answer 1

अपने पहले प्रश्न का उत्तर देने के लिए: हाँ, वे संभव हैं। अपने दूसरे प्रश्न का उत्तर देने के लिए: कैनवास संदर्भ पर परिवर्तनों के मनमाने ढंग से घोंसले का उपयोग करने का एक 'सर्वश्रेष्ठ' तरीका होगा।

मैंने एक उदाहरण बनाया है कि आप संदर्भ पर ड्राइंग कमांड कैसे जारी कर सकते हैं, यह नहीं पता कि आपका वर्तमान परिवर्तन क्या है, और उसके बाद उन आदेशों को ट्रांसफॉर्मेशन में लपेटें जो परिणाम को एनिमेट करते हैं। निर्मित परिवर्तन ढेर जाने का रास्ता उपयोग कर रहा है,

// Draw a bug with animated legs 
function drawBug(){ 
    ctx.save(); 
    // Issue drawing commands, assuming some 0,0 center and an unrotated bug 
    // Use the current time, or some frame counter, to change how things are drawn 
    ctx.restore(); 
} 

// Move the (animated) bug around 
function drawMovingBug(){ 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 

    ctx.save(); 
    // Adjust the bug's location/rotation based on some animation path 
    // and the current time or frame counter. 
    var bugPosition = findCurrentBugPosition(); 
    ctx.rotate(bugPosition.angle); 
    ctx.translate(bugPosition.x,bugPosition.y); 

    // Draw the bug using the new transformation 
    drawBug();   
    ctx.restore(); 
}