螺旋動畫 JavaScript

Question

我正在學習 JavaScript，我發現了以下文章： http : //www.html5code.nl/tutorial-canvas-animation-spiral-movement/

你能告訴我函數spiralMotion1()是如何工作的嗎？ 我想自定義速度和距離。

編輯：將其分解為具體內容：為什么使用 cos。 和罪。？ 為什么使用rotationRadius？ setAngle 函數如何影響結果？ 度數變量在哪里發揮作用？

編碼：

function spiralMotion1(){
  var degrees = 0;
  var Angle;
  var rotationRadius=2;
  var rotationRadiusIncrease = 1;
  var ballRadius=20
  var centerX;
  var centerY;
  var x;
  var y;
  var animate=true;
  var breadcrumbs = new Array();
  var crumbRadius=1;
  var canvas = jQuery("#spiral_motion1");
  var context = canvas.get(0).getContext("2d");
  //function Ball(x,y,radius,color,strokeColor,lineWidth) in ball.js
  var ball_3 = new Ball(-10,-10,20,'#f00','#000',7);
  var parentWidth=jQuery(canvas).parent().width();
  var canvasWidth=context.canvas.width = parentWidth;
  var canvasHeight=context.canvas.height= 288;

  if (!checkForCanvasSupport) {
  return;
  }

  (function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);


  if(animate){
  context.clearRect(0,0,canvasWidth,canvasHeight); // clear canvas
  //Make the Canvas element responsive for desktop, tablet and smartphone.
  centerX = canvasWidth/2;
  centerY = canvasHeight/2
  Angle = degrees * (Math.PI / 180);
  degrees = degrees + 1;
  ball_3.x=rotationRadius * Math.cos(setAngle()) + centerX;
  ball_3.y=rotationRadius * Math.sin(setAngle()) + centerY;
  ball_3.draw(context);

  //add a breadcrumb to the breadcrumbs array
  breadcrumbs.push({x:ball_3.x,y:ball_3.y});
  //draw the breadcrumbs that shows the track of the movement
  context.globalCompositeOperation = "destination-over";
  showBreadcrumbs(breadcrumbs);

  rotationRadius += rotationRadiusIncrease/5
  if ((ball_3.y + ballRadius+4) > canvas.height()){
  animate=false;
  }
  }
  }());//end drawFrame
 function setAngle(){
  Angle = degrees * (Math.PI / 180);
  degrees = degrees + 2;
  return Angle;
  }//end setAngl()

  function showBreadcrumbs(breadcrumbs){
  for (var i = 0; i< breadcrumbs.length; i++) {
  context.beginPath();
  context.arc(breadcrumbs[i].x,breadcrumbs[i].y,crumbRadius,0, 2*Math.PI,false);
  context.closePath();
  context.fillStyle="#999";
  context.fill();
  }
  }//end showBreadcrumbs()
}//end spiralMotion1()

Answer 1

它歸結為基本幾何。 如果您考慮一個物體在 2D 中繞一個點運行，則它的運動可以用半徑（與被繞軌道點的距離）和作為時間函數的角度來表征。 如果您知道半徑和角度，那么您可以使用 cos 和 sin 函數計算身體位置。

] 1

通過隨時間改變半徑，您將獲得一個螺旋而不是一個簡單的圓。