卑微幻想家

实现一个小飞机一直追随鼠标移动的效果，效果如下：

screenshots

上代码

let plane = document.createElement('div')
plane.style.backgroundImage = 'url(plane.png)'
plane.style.backgroundRepeat = 'no-repeat'
plane.style.backgroundSize = 'cover'
plane.style.width = '50px'
plane.style.height = '50px'
plane.style.position = 'absolute'
plane.style.top = window.innerHeight / 2 + 'px'
plane.style.left = window.innerWidth / 2 + 'px'
plane.style.transitionProperty = 'top,left'
plane.style.transitionDuration = '.5s,.5s'
plane.style.transitionTimingFunction = 'linear, linear'

document.body.style.position = 'relative'
document.body.style.height = '100vh'

document.body.appendChild(plane)

let mx = 0, my = 0, deg = 0;
let x, y;
window.addEventListener('mousemove', function (e) {
    x = e.x
    y = e.y
    mx = e.x - plane.offsetLeft - plane.clientWidth / 2
    my = e.y - plane.offsetTop - plane.clientHeight / 2
    deg = Math.atan(my / mx) * (180 / Math.PI) + 45
    if (mx < 0) {
        deg += 180
    }
})

move()

function move() {
    plane.style.left = (mx > 0 ? x - plane.clientWidth : x) + 'px';
    plane.style.top = (my > 0 ? y - plane.clientHeight : y) + 'px';
    plane.style.transform = 'rotate(' + deg + 'deg)'
    requestAnimationFrame(move)
}

plane元素我使用js创建的，样式也是通过js设置的。当然，也可以在Html中定义。

代码解释

其实这个效果的主要逻辑就是，监听鼠标的移动事件，然后改变plane相对定位的left,top到鼠标的当前坐标即可。但是其中还是有一些要点要注意。

飞机的方向根据鼠标位置不同而改变

如果我们只改变坐标位置，那么不会出现上图的效果，我们要根据鼠标移动的位置，改变plane的旋转角度。

mx，my分别是鼠标相对plane的位置移动的距离。mx就是相对于plane的x轴移动的位置，my就是y轴的。

有了mx，my那么根据下面这个图，不难发现我们能到得到偏移角度 $\alpha$ 的正切值就是 $\tan\alpha=\frac{my}{mx}$

然后我们可以通过Mat.atan(my/mx)计算出 $\alpha$ 的正切值，但是这个是弧度制的，通过转化为角度制（可以去看我三角函数的文章三角函数笔记），我们就得到了偏移角度。

为什么要加45°呢？是因为，我们的飞机图片原本大概就偏转了45°（如下图），再加45°，那么就是飞机头指向鼠标的角度。如果是垂直向上的飞机图片，那么就要偏转90°

代码中还有一句判断，mx<0时，会将当前的计算的角度再加180°。这是为什么呢？这是因为在mx<0时，相当于飞机头从向左转到向右，我们观察角度如何变化，除去本身飞机图片偏转45°加上我们修正的45°。偏转的绝对角度过程如下：0°→90°→180°，我们发现，偏转绝对角度超过了90°，我们观察 $\tan$ 的函数图像：