5 - 蜘蛛眼旋转效果

👆👆点击跳转: Bilibili📺教程视频链接

Describe📋️

鼠标移动，屏幕上的眼球会旋转朝向鼠标的指示位置，在眼球旋转结束后，蜘蛛会爬向眼球的顶端，无限重复

Notice⚠️

• 效果中所使用的是图片帧，但是也可以替换为Lottie动画，实际上原理是一样的
• 效果中的旋转是没有缓动的，当鼠标从屏幕外进来的时候会出现蜘蛛眼闪现的BUG，解决方案可以使用以下工具函数

    function calculate_angle(x1, y1, x2, y2, last_angle) {
        const slope = (x1 - x2) / (y1 - y2);
        const angle = y1 >= y2
            ? Math.atan(slope) * 180 / Math.PI + 90
            : Math.atan(slope) * 180 / Math.PI + 360 - 90;
        if (last_angle === undefined) return angle;
        let base_angle = last_angle % 360;
        if (base_angle < 0) base_angle += 360;
        let diff = angle - base_angle;
        if (diff >= 180) diff -= 360;
        else if (diff < -180) diff += 360;
        return last_angle + diff;
    };

• 以上工具函数的具体使用方法可参考该视频
• 最终优化后的效果可以参考JIEJOE的个人网站