javascript - 创建与时间相关的圆圈动画

Question

嗨，我尝试制作动画。调用函数时绘制的 3 个圆圈之一应从右向左移动，首先应在 Canvas 上绘制一个随机(黄色、蓝色或橙色)圆圈，然后在 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 个圆圈，并将所有定义存储在一个数组中。
• 在动画循环内:
  • 计算动画开始后经过了多长时间
  • 循环遍历数组中的每个圆圈
  • 如果圆的延迟时间已过，则将其向左设置动画
• 当所有 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>