Create animation with circles time dependent

Question

Hi I try to make a animation. One of the 3 circles which become drawed when the function is called should move from right to left at first one random (yellow, blue or orange

Answer 1

I'm a bit confused by your code, but I think I understand that you want to know how to delay when each circle will start animating to the left.

Here's how to animate your yellow, blue & orange circles with different delays:

• Define the 3 circles using javascript objects and store all definintions in an array.
• Inside an animation loop:
  • Calculate how much time has elapsed since the animation began
  • Loop through each circle in the array
  • If a circle's delay time as elapsed, animate it leftward
• When all 3 circles have moved offscreen-left, stop the animation loop.

Here's annotated code and a Demo:

// 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=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; }