圆形路径动画不适用于脉动运动

Question

我正在尝试用 HTML5 中的画布实现一种脉动的月亮效果。我有脉动效果，但我的 requestAnimation 函数似乎没有沿着我定义的圆形路径更新框架。这是javascript。

window.requestAnimFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame 
||
window.mozRequestAnimationFrame || window.oRequestAnimationFrame
|| window.msRequestAnimationFrame ||
  function(a) {
   window.setTimeout(a, 1E3 / 60)
  }
}();


var canvas = document.getElementById('canvas');       
var context = canvas.getContext('2d');

 function Ball(radius, color) {
  if (radius === undefined) {
   radius = 40;
   }
  if (color === undefined) {
  color = "#ff0000";
   }

  this.x = 0;
  this.y = 0;
  this.radius = radius;
  this.rotation = 0;
  this.scaleX = 1;
  this.scaleY = 1;
  this.lineWidth = 1;
  }

  Ball.prototype.draw = function(context) {
  context.save();
  context.translate(this.x, this.y);
  context.rotate(this.rotation);
  context.scale(this.scaleX, this.scaleY);
  context.lineWidth = this.lineWidth;
  context.fillStyle = "#e50000";
  context.beginPath();
  //x, y, radius, start_angle, end_angle, anti-clockwise
  context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
  context.closePath();
  context.fill();
 if (this.lineWidth > 0) {
  context.stroke();
  }
  context.restore();
  };

  window.onload = function() {    
  var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        ball = new Ball(),
        angle = 0,
        centerScale = 1,
        range = 0.5,
        speed = 0.02,
 
pathX = canvas.width / 2,
pathY = canvas.height / 2,
pathRadius = 150,
pathAngle = 0;
ball.x = Math.cos(pathAngle) * pathRadius + pathX;
ball.y = Math.sin(pathAngle) * pathRadius + pathY;  

   (function drawFrame() {      
   window.requestAnimationFrame(drawFrame, canvas);      
   context.clearRect(0, 0, canvas.width, canvas.height);      
  ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;  
  angle += speed;    
  pathAngle += speed;
  ball.draw(context);    
  }());  
};

Answer 1

您正在围绕它自己的中心点旋转一个圆圈，因此它不会相对于它的中心点进行轨道运行。

// offset the circles rotation by 100px off its centerpoint
context.arc(100, 0, this.radius, 0, (Math.PI * 2), true);

示例代码和演示：

window.requestAnimFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame 
||
window.mozRequestAnimationFrame || window.oRequestAnimationFrame
|| window.msRequestAnimationFrame ||
  function(a) {
   window.setTimeout(a, 1E3 / 60)
  }
}();


var canvas = document.getElementById('canvas');       
var context = canvas.getContext('2d');

 function Ball(radius, color) {
  if (radius === undefined) {
   radius = 40;
   }
  if (color === undefined) {
  color = "#ff0000";
   }

  this.x = 0;
  this.y = 0;
  this.radius = radius;
  this.rotation = 0;
  this.scaleX = 1;
  this.scaleY = 1;
  this.lineWidth = 1;
  }

  Ball.prototype.draw = function(context) {
  context.save();
  context.translate(this.x, this.y);
  context.rotate(this.rotation);
  context.scale(this.scaleX, this.scaleY);
  context.lineWidth = this.lineWidth;
  context.fillStyle = "#e50000";
  context.beginPath();
  //x, y, radius, start_angle, end_angle, anti-clockwise
  context.arc(50, 0, this.radius, 0, (Math.PI * 2), true);
  context.closePath();
  context.fill();
 if (this.lineWidth > 0) {
  context.stroke();
  }
  context.restore();
  };

  window.onload = function() {    
  var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        ball = new Ball(),
        angle = 0,
        centerScale = 1,
        range = 0.5,
        speed = 0.02,
 
        pathX = canvas.width / 2,
        pathY = canvas.height / 2,
        pathRadius = 50,
        pathAngle = 0;
        ball.x = canvas.width/2;  // Math.cos(pathAngle) * pathRadius + pathX;
        ball.y = canvas.height/2; //Math.sin(pathAngle) * pathRadius + pathY;  

   (function drawFrame() {      
   window.requestAnimationFrame(drawFrame, canvas);      
   context.clearRect(0, 0, canvas.width, canvas.height);      
  ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;  
  angle += speed;    
  pathAngle += speed;
  ball.rotation+=Math.PI/180;
  ball.draw(context);    
  }());  
};

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

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