Probleme mit der Animation auf der Leinwand

Question

Ich möchte eine glatte Fahrt Kreisen auf einer Leinwand machen, aber ich kann nicht damit umgehen, wie die Geschwindigkeit, Ort zu begrenzen.

Ich bin derzeit nur in der Lage, sie zu bewegen.

Meine JS Funktion onload mit der Funktion animate:

function loader() { 
    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 100; 
    var circles=[]; 
    circles.push({ x:centerX+15, y:centerY-15, style:'rgba(104, 217, 255, 70)'}); 
    circles.push({ x:centerX, y:centerY-15, style:'rgba(104, 217, 255, 70)'}); 
    circles.push({ x:centerX-15, y:centerY, style:'rgba(104, 217, 255, 70)'}); 
    circles.push({ x:centerX-10, y:centerY, style:'rgba(0, 144, 226, 70)'}); 
    circles.push({ x:centerX+10, y:centerY+10, style:'rgba(210, 255, 0, 70)'}); 
    circles.push({ x:centerX+10, y:centerY, style:'rgba(0, 144, 226, 70)'}); 
    circles.push({ x:centerX-5, y:centerY-5, style:'rgba(210, 255, 0, 70)'}); 
    circles.push({x:centerX, y:centerY, style:'white', move:0}); 
    // start the animation loop 
    requestAnimationFrame(animate); 

    function animate(time){ 
     for(var i = 0; i < circles.length-1; i++){ 
      circles[i].x+=Math.random(); 
     } 
     // draw all in their new positions 
     drawAll(); 
     // request another frame in the animation loop 
     requestAnimationFrame(animate); 
    } 

    function drawAll(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     for(var i=0;i<circles.length;i++){  
      drawCircle(circles[i]); 
     } 
    } 

    function drawCircle(circle){ 
     ctx.beginPath(); 
     ctx.arc(circle.x,circle.y,radius,0,2*Math.PI); 
     ctx.fillStyle = circle.style; 
     ctx.fill(); 
     ctx.closePath(); 
    } 

    ctx.beginPath(); 
    ctx.moveTo(95,250); 
    ctx.lineTo(120,275); 
    ctx.lineTo(150,225); 
    ctx.fillStyle = 'rgba(0, 144, 226, 70)'; 
    ctx.fill(); 
} 

Answer 1

jeder Kreis Geben Sie eine horizontale und vertikale Geschwindigkeit:

circles.push({ 
    x:centerX+15, y:centerY-15, 
    style:'rgba(104, 217, 255, 70)', 
    speedX:Math.random()*3, 
    speedY:Math.random()*3, 
}); 

Dann während der Animation Sie glatt circle.x von Speedx ändern kann und Ändere circle.y von speedY.

circles[i].x += circles[i].speedX; 
circles[i].y += circles[i].speedY; 

Beispielcode und eine Demo:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var centerX = canvas.width/2; 
 
var centerY = canvas.height/2; 
 
var radius = 50; 
 
var circles=[]; 
 
circles.push({ x:centerX+15, y:centerY-15, style:'rgba(104, 217, 255, 70)'}); 
 
circles.push({ x:centerX, y:centerY-15, style:'rgba(104, 217, 255, 70)'}); 
 
circles.push({ x:centerX-15, y:centerY, style:'rgba(104, 217, 255, 70)'}); 
 
circles.push({ x:centerX-10, y:centerY, style:'rgba(0, 144, 226, 70)'}); 
 
circles.push({ x:centerX+10, y:centerY+10, style:'rgba(210, 255, 0, 70)'}); 
 
circles.push({ x:centerX+10, y:centerY, style:'rgba(0, 144, 226, 70)'}); 
 
circles.push({ x:centerX-5, y:centerY-5, style:'rgba(210, 255, 0, 70)'}); 
 
circles.push({x:centerX, y:centerY, style:'white', move:0}); 
 

 
// add speeds 
 
for(var i=0;i<circles.length;i++){ 
 
    circles[i].speedX=1+Math.random()*2; 
 
    circles[i].speedY=1+Math.random()*2; 
 
} 
 

 
// start the animation loop 
 
requestAnimationFrame(animate); 
 

 
function animate(time){ 
 
    for(var i = 0; i < circles.length-1; i++){ 
 
     circles[i].x += circles[i].speedX; 
 
     circles[i].y += circles[i].speedY; 
 
    } 
 
    // draw all in their new positions 
 
    drawAll(); 
 
    // request another frame in the animation loop 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function drawAll(){ 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    for(var i=0;i<circles.length;i++){  
 
     drawCircle(circles[i]); 
 
    } 
 
} 
 

 
function drawCircle(circle){ 
 
    ctx.beginPath(); 
 
    ctx.arc(circle.x,circle.y,radius,0,2*Math.PI); 
 
    ctx.fillStyle = circle.style; 
 
    ctx.fill(); 
 
    ctx.closePath(); 
 
}

<canvas id="canvas" width=512 height=512></canvas>