用圓圈時間創建動畫

Question

嗨，我嘗試製作動畫。當函數被調用時被繪製的3個圓圈之一應該在第一個隨機（黃色，藍色或橙色）圓圈上從右向左移動，然後在3秒後在下一個隨機圓圈上繪製，然後在2之後， 8秒，至今。 我該怎麼做？現在，當主循環再次開始運行時，每次都會繪製圓圈。

window.onload = window.onresize = function() { 
    var C = 1; // canvas width to viewport width ratio 
    var el = document.getElementById("myCanvas"); 


    var viewportWidth = window.innerWidth; 
    var viewportHeight = window.innerHeight; 

    var canvasWidth = viewportWidth * C; 
    var canvasHeight = viewportHeight; 
    el.style.position = "fixed"; 
    el.setAttribute("width", canvasWidth); 
    el.setAttribute("height", canvasHeight); 
    var x = canvasWidth/100; 
    var y = canvasHeight/100; 
var ballx = canvasWidth/100; 
var n; 


    window.ctx = el.getContext("2d"); 
    ctx.clearRect(0, 0, canvasWidth, canvasHeight); 
    // draw triangles 


    function init() { 
     ballx;  
     return setInterval(main_loop, 1000); 
    } 
    function drawcircle1() 
    { 
    var radius = x * 5; 
    ctx.beginPath(); 
     ctx.arc(ballx * 108, canvasHeight/2, radius, 0, 2 * Math.PI, false); 
     ctx.fillStyle = 'yellow'; 
     ctx.fill(); 
    } 
function drawcircle2() 
    { 
    var radius = x * 5; 
    ctx.beginPath(); 
     ctx.arc(ballx * 108, canvasHeight/2, radius, 0, 2 * Math.PI, false); 
     ctx.fillStyle = 'blue'; 
     ctx.fill(); 
    } 
    function drawcircle3() 
    { 
    var radius = x * 5; 
    ctx.beginPath(); 
     ctx.arc(ballx * 105, canvasHeight/2, radius, 0, 2 * Math.PI, false); 
     ctx.fillStyle = 'orange'; 
     ctx.fill(); 
    } 

    function draw() { 
     var counterClockwise = false; 

    ctx.clearRect(0, 0, canvasWidth, canvasHeight); 

    //first halfarc 
    ctx.beginPath(); 
    ctx.arc(x * 80, y * 80, y * 10, 0 * Math.PI, 1 * Math.PI, counterClockwise); 
    ctx.lineWidth = y * 1; 
    ctx.strokeStyle = 'black'; 
    ctx.stroke(); 

    //second halfarc 
    ctx.beginPath(); 
    ctx.arc(x * 50, y * 80, y * 10, 0 * Math.PI, 1 * Math.PI, counterClockwise); 
    ctx.lineWidth = y * 1; 
    ctx.strokeStyle = 'black'; 
    ctx.stroke(); 

    //third halfarc 
    ctx.beginPath(); 
    ctx.arc(x * 20, y * 80, y * 10, 0 * Math.PI, 1 * Math.PI, counterClockwise); 
    ctx.lineWidth = y * 1; 
    ctx.strokeStyle = 'black'; 
    ctx.stroke(); 



    // draw stop button 
    ctx.beginPath(); 
     ctx.moveTo(x * 87, y * 2); 
     ctx.lineTo(x * 87, y * 10); 
     ctx.lineWidth = x; 
     ctx.stroke(); 
     ctx.beginPath(); 
     ctx.moveTo(x * 95, y * 2); 
     ctx.lineTo(x * 95, y * 10); 
     ctx.lineWidth = x; 
     ctx.stroke(); 


     function drawRandom(drawFunctions){ 
    //generate a random index 
    var randomIndex = Math.floor(Math.random() * drawFunctions.length); 

    //call the function 
    drawFunctions[randomIndex](); 
} 
drawRandom([drawcircle1, drawcircle2, drawcircle3]); 


    } 

    function update() { 
    ballx -= 0.1; 


    if (ballx < 0) { 
     ballx = -radius;   


    } 

    } 







    function main_loop() { 
    draw(); 
    update(); 
    collisiondetection(); 

    } 


    init(); 

      function initi() { 
       console.log('init'); 
       // Get a reference to our touch-sensitive element 
       var touchzone = document.getElementById("myCanvas"); 
       // Add an event handler for the touchstart event 
       touchzone.addEventListener("mousedown", touchHandler, false); 
      } 

      function touchHandler(event) { 
       // Get a reference to our coordinates div 
       var can = document.getElementById("myCanvas"); 
       // Write the coordinates of the touch to the div 
       if (event.pageX < x * 50 && event.pageY > y * 10) { 
        ballx += 1; 
       } else if (event.pageX > x * 50 && event.pageY > y * 10) { 
        ballx -= 1; 
       } 

       console.log(event, x, ballx); 

       draw(); 


      } 
      initi(); 
      draw(); 
} 

Answer 1

我有點被你的代碼混淆，但我想我明白，你想知道如何拖延時每圈將開始動畫左邊。

以下是如何與不同的延遲動畫的黃色，藍色&橙色圓圈：

• 定義使用JavaScript對象3圈和所有definintions存儲在數組中。
• 內的動畫循環：
  • 計算多少時間已經過去了，因爲動畫開始
  • 循環遍歷數組
  • 在每個圓圈。如果一個圓的延遲時間流逝，動畫它向左
• 當所有3個圓圈都離開屏幕左側時，停止動畫循環。

這裏的註釋代碼和演示：

// canvas related variables 
 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var canvasWidth=canvas.width; 
 
var canvasHeight=canvas.height; 
 

 
// predifine PI*2 because it's used often 
 
var PI2=Math.PI*2; 
 

 
// startTime is used to calculate elapsed time 
 
var startTime; 
 

 
// define 3 circles in javascript objects and put 
 
// them in the arcs[] array 
 
var arcs=[]; 
 
addArc(canvasWidth,canvasHeight/2,20,0,PI2,0,-1,'yellow'); 
 
addArc(canvasWidth,canvasHeight/2+40,20,0,PI2,3000,-1,'blue'); 
 
addArc(canvasWidth,canvasHeight/2+80,20,0,PI2,8000,-1,'orange'); 
 

 
// begin animating 
 
requestAnimationFrame(animate); 
 

 

 
function animate(time){ 
 

 
    // set startTime if it isn't already set 
 
    if(!startTime){startTime=time;} 
 

 
    // calc elapsedTime 
 
    var elapsedTime=time-startTime; 
 

 
    // clear the canvas 
 
    ctx.clearRect(0,0,canvasWidth,canvasHeight); 
 

 
    // assume no further animating is necessary 
 
    // The for-loop may change the assumption 
 
    var continueAnimating=false; 
 
    for(var i=0;i<arcs.length;i++){ 
 
    var arc=arcs[i]; 
 
    // update this circle & report if it wasMoved 
 
    var wasMoved=update(arc,elapsedTime); 
 
    // if it wasMoved, then change assumption to continueAnimating 
 
    if(wasMoved){continueAnimating=true;} 
 
    // draw this arc at its current position 
 
    drawArc(arc); 
 
    } 
 

 
    // if update() reported that it moved something 
 
    // then request another animation loop 
 
    if(continueAnimating){ 
 
    requestAnimationFrame(animate); 
 
    }else{ 
 
    // otherwise report the animation is complete 
 
    alert('Animation is complete'); 
 
    } 
 
} 
 

 
function update(arc,elapsedTime){ 
 
    // has this arc's animation delay been reached by elapsedTime 
 
    if(elapsedTime>=arc.delay){ 
 
    // is this arc still visible on the canvas 
 
    if(arc.cx>-arc.radius){ 
 
     // if yes+yes, move this arc by the specified moveX 
 
     arc.cx+=arc.moveX; 
 
     // report that we moved this arc 
 
     return(true); 
 
    } 
 
    } 
 
    // report that we didn't move this arc 
 
    return(false); 
 
} 
 

 
// create a javascript object defining this arc 
 
function addArc(cx,cy,radius,startAngle,endAngle, 
 
       animationDelay,moveByX,color){ 
 

 
    arcs.push({ 
 
    cx:cx, 
 
    cy:cy, 
 
    radius:radius, 
 
    start:startAngle, 
 
    end:endAngle, 
 
    // this "delay" property is what causes this 
 
    // circle to delay before it starts to animate 
 
    delay:animationDelay, 
 
    moveX:moveByX, 
 
    color:color, 
 
    }); 
 
} 
 

 
// draw a given arc 
 
function drawArc(a){ 
 
    ctx.beginPath(); 
 
    ctx.arc(a.cx,a.cy,a.radius,a.start,a.end); 
 
    ctx.fillStyle=a.color; 
 
    ctx.fill(); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=400 height=300></canvas>