先来看动画效果：
这个动画看起来有点难，但其实要比想象中的简单。
它只是平移和旋转的简单合成，下面大体分析一下。
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本书。算是过了基础一关。
本系列一些文章可能会参考里面的知识体系，对于一些属于领域共识知识，如有局部雷同，只能说：“自己凭本事学来的，怎能算抄袭。。。”。
开玩笑了，想法来源能提一句还是要提一句的。特别喜欢《精英日课》文章里的一段话：
至于文章内容，canvas的API，本系列可能不会准备逐条介绍了，还请初学的童鞋见谅哈。MDN都有的，挺详细的。同时，文章中遇到的还是会简单提下。主要核心是阐述一些技巧和原理层面的知识个人理解吧。另外也打算分析一些codepen上炫酷动画的实现原理，如果有时间可能会分析几个动画引擎，当然都是2D的。
再次感谢你阅读到这里。下一篇文章见。
