阅读 5727

【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的。

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