javascript - 螺旋动画 JavaScript

Question

我正在学习 JavaScript，发现了以下文章:http://www.html5code.nl/tutorial-canvas-animation-spiral-movement/

你能告诉我函数spiralMotion1()是如何工作的吗？我想自定义速度和距离。

编辑:将其分解为具体细节:为什么使用 cos。和罪恶。？为什么使用旋转半径？ setAngle 函数如何影响结果？ Degree 变量在哪里发挥作用？

代码:

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

它归结为基本的几何形状。如果你想象一个物体在二维中绕一个点运行，它的运动可以用半径(到绕轨道点的距离)和一个时间函数的 Angular 来表征。如果知道半径和 Angular ，就可以用 cos 和 sin 函数计算 body 位置。

] 1

通过随时间改变半径，您将获得螺旋而不是简单的圆形。