使用 Canvas 沿曲线运动路径制作动画答案

【问题标题】：Animating Along Curved Motion Path Using Canvas使用 Canvas 沿曲线运动路径制作动画
【发布时间】：2014-12-16 22:16:32
【问题描述】：

我目前正在尝试用 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”，从而将线一个接一个地移动到这些坐标。然而，我有一种感觉，可能有一个更简单的解决方案正盯着我看。

有人指点一下吗？

【问题讨论】：

所以功能是在鼠标不动时让蓝线围绕鼠标旋转一圈？
它可能是移动到随机坐标或（可能更明智地）在预定义坐标的设定路径上，抱歉，我的帖子中不清楚，完全脑残！跨度>
鼠标移动事件正在设置 mouse.x 和 mouse.y，然后由 update() 使用。因此，要像您想要的那样覆盖该方法，您只需要一个新的循环来更新我认为的鼠标对象，以及一种在鼠标移动事件方法和新循环之间进行交换的可靠方法
我昨晚设法解决了这个问题 - codepen.io/williamrenwick/pen/xlhjb
但是，像往常一样，我决定我想要的不仅仅是一个圆周运动，也许是一个数字 8，我想知道是否唯一的方法是使用贝泽曲线并设置 8 个 x,y 位置让它四处移动？

标签： javascript html animation canvas

【解决方案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;
  }
}

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

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

它非常全面，可帮助您准确了解您在数学方面所做的工作，而不仅仅是为您提供解决方案。

【讨论】：