Question

我目前正在尝试使用Canvas进行一些实验，这是我第一次尝试使用它。链接的CodePen是来自另一个用户的精彩代码，我已经分叉以创建我需要的样式的东西。

我尝试创建的功能是在循环中设置动画的行，直到在canvas元素中移动鼠标。我的想法是使用Math.random（）为每个x和y坐标生成数字，但是我很难弄清楚逻辑。我希望尽可能优雅和代码轻，这意味着利用现有的大部分代码 - 但只有70％准确掌握代码的运行方式会妨碍我的进步。

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

function update() {

  target.x += (mouse.x - target.x);
  target.y += (mouse.y - target.y);

  chain.update( target );
}

我相信这个函数是使线跟随光标的关键，所以我的想法是创建一个访问对象数组属性的函数，每个对象包含＆＃34; x：foo，y：bar＆＃34 ;在循环中，从而将线一个接一个地移动到那些坐标。然而，我有一种感觉，可能有一个更简单的解决方案，盯着我的脸。

有人有任何指针吗？

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;
  }
}

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

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

它非常全面，可以帮助您准确理解您使用数学所做的事情，而不仅仅是为您提供解决方案。

使用画布动画沿曲线运动路径

1 个答案: