【canvas】箭头跟随鼠标移动的动画原理

先来看动画效果：

这个动画看起来有点难，但其实要比想象中的简单。

它只是平移和旋转的简单合成，下面大致分析一下。

1. 鼠标位置

要跟随鼠标移动，首先就要获取鼠标的位置。

能够给画布绑定mousemove事件，这样拿到鼠标相对于页面的绝对位置（pageX，pageY），再减去画布自身的偏移量，就能够获得鼠标相对画布的位置。核心代码是：

canvas.addEventListener('mousemove', event => {
  mouse.x = event.pageX - canvas.offsetLeft
  mouse.y = event.pageY - canvas.offsetTop
})
复制代码

2. 鼠标相对于箭头的方向

知道鼠标和箭头的位置信息，就能够算出一些有用的值，好比两者水平和垂直距离。

根据三角函数tan的反函数就能够求出相应角度。Math对象中有两个反正切函数atan和atan2。其中比较好用的倒是不太显眼的atan2。

var dx = mouse.x - arrow.x
var dy = mouse.y - arrow.y
var angle = Math.atan2(dy, dx)
复制代码

3. 旋转动画

使用requestAnimationFrame（canvas动画常规操做），实时更新箭头角度，就能够作出跟随鼠标旋转的动画啦。

;(function drawFrame() {
  window.requestAnimationFrame(drawFrame)
  context.clearRect(0, 0, canvas.width, canvas.height)
  var dx = mouse.x - arrow.x
  var dy = mouse.y - arrow.y
  var angle = Math.atan2(dy, dx)
  arrow.angle = angle
  arrow.draw(context)
})();
复制代码

drawFrame做为浏览器下次重绘前的回调函数，每一帧都清空画布，而后画出特定角度的箭头。效果以下：

点击查看效果

4. 平移动画

要实现平移动画，只须要匀速地修改箭头地位置。

arrow.x += vx
arrow.y += vy
复制代码

这里的难点在于如何计算水平速度和垂直速度。咱们假设鼠标移动速度是v，那么三者的关系应该知足于：

所以，角度刚才已经算出来了，那么根据三角函数有：

vx = Math.cos(angle) * v
vy = Math.sin(angle) * v
复制代码

不考虑旋转的跟随移动效果以下：

点击查看效果

5. 最终效果

一边朝着鼠标移动，一边指向鼠标，就能实现文章开头的效果。

点此查看效果

注意代码里加了下面的判断，这是为了防止出现平移动画的震荡bug。

if (dx * dx + dy * dy < v * v) {
  vx = 0
  vy = 0
} else {
  vx = Math.cos(angle) * v
  vy = Math.sin(angle) * v
}
复制代码

能够分析下出现震荡的缘由。好比箭头距离鼠标1像素，下一帧加上速度2后，距离变成了-1，朝向变成了反方向。再下一帧，距离又变成了1，而后震荡不停。这里的解决办法比较生硬，一旦距离小于v（速度就是一帧内移动的距离）时，直接再也不移动了。

这个动画很常见，参考书目2里面也提到了，但没想到原理却出乎意料的简单。

另外飞机游戏中，敌机自动向你移动也是一样的逻辑。

本文只是大致分析了一下原理，但愿有所帮助。

完。

---

下面的内容是关于本系列的介绍。

2019年底，本人立了个flag，2020年要研究透canvas动画技术。

（图中二维码是个人惟一微信号，若有掘友想加的，麻烦备注下【掘金】哈。）

在这个系列，我想写一些常见动画知识，本文是第2篇，篇幅可能会长短不一。更多的请查看个人我的主页，或者《系列目录》。

由于篇幅问题，根据以往的经验，赞数不会太多，毕竟你们都喜欢给那种短期看不完的文章点赞。嗯，我好像也是这样。^_^

其实写文章，主要仍是给本身看的，算是自我进步的一个见证吧。抱着这种心态也许能好些。

另外关于canvas技术，我目前完整看完了3本书。算是过了基础一关。

1.《HTML5 Canvas核心技术》

2.《HTML5+JavaScript动画基础》

3.《WebGL编程指南》

本系列一些文章可能会参考里面的知识体系，对于一些属于领域共识知识，若有局部雷同，只能说：“本身凭本事学来的，怎能算抄袭。。。”。

开玩笑了，想法来源能提一句仍是要提一句的。特别喜欢《精英日课》文章里的一段话：

至于文章内容，canvas的API，本系列可能不会准备逐条介绍了，还请初学的童鞋见谅哈。MDN都有的，挺详细的。同时，文章中遇到的仍是会简单提下。主要核心是阐述一些技巧和原理层面的知识我的理解吧。另外也打算分析一些codepen上炫酷动画的实现原理，若是有时间可能会分析几个动画引擎，固然都是2D的。

再次感谢你阅读到这里。下一篇文章见。