Create Animation With Circles Time Dependent

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) circl

Solution 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 variablesvar canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasWidth=canvas.width;
var canvasHeight=canvas.height;

// predifine PI*2 because it's used oftenvarPI2=Math.PI*2;

// startTime is used to calculate elapsed timevar startTime;

// define 3 circles in javascript objects and put// them in the arcs[] arrayvar 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 animatingrequestAnimationFrame(animate);


functionanimate(time){

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

  // calc elapsedTimevar 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 wasMovedvar wasMoved=update(arc,elapsedTime);
    // if it wasMoved, then change assumption to continueAnimatingif(wasMoved){continueAnimating=true;}
    // draw this arc at its current positiondrawArc(arc);
  }

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

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

// create a javascript object defining this arc functionaddArc(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 animatedelay:animationDelay,
    moveX:moveByX,
    color:color,
  });
}

// draw a given arcfunctiondrawArc(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; }

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