使用画布沿弯曲运动路径设置动画

Question

我目前正在尝试用Canvas做一个实验，这是我第一次尝试使用它。链接的CodePen是来自另一个用户的一些出色的代码，我用它来创建我需要的样式。

http://codepen.io/anon/pen/utgvb

我试图创建的功能是在循环中设置动画的行，直到鼠标在画布元素中移动为止。我的想法是使用Math.random（）为每个x和y坐标生成数字，但我很难弄清楚逻辑。我想让它尽可能优雅和代码轻，这意味着要利用大部分现有代码——然而，对代码运行方式只有70%的准确把握阻碍了我的进步。

我认为可以创建一个与已经在使用的功能类似的功能：

function update() {
  target.x += (mouse.x - target.x);
  target.y += (mouse.y - target.y);
  chain.update( target );
}

我相信这个函数是使线跟随光标的关键，所以我的想法是创建一个函数，访问对象数组的属性，每个对象在循环中都包含"x:foo，y:bar"，从而将线一个接一个地移动到这些坐标。然而，我有一种感觉，也许有一个简单得多的解决方案摆在我面前。

有人有指针吗？

Answer 1

为了透明起见，我将发布我为创建动画添加的代码，感谢nepeo的建议：

function animLoop() {
  var speed = 5,    
      rad = (degree * Math.PI / 180);
  degree += 1;  
  mouse.x += speed * Math.sin(rad);
  mouse.y += speed * Math.cos(rad);
  //reset degrees
  if (degree == 360) {
      degree = 0;
  }
}

如果有人需要更多关于在画布中沿曲线设置动画的信息，我建议从这里开始：

http://chimera.labs.oreilly.com/books/1234000001654/ch05.html#uniform_circular_motion

它真的很全面，可以帮助你准确地理解你在做什么，而不仅仅是给你答案。