创建鼠标跟随及指向屏幕中心的元素动画

本文将介绍如何使用 JavaScript 和 css 创建一个元素，使其跟随鼠标移动，并始终指向屏幕中心。通过监听 mousemove 事件，计算元素与屏幕中心之间的角度，并使用 CSS transform 属性动态调整元素的位置和旋转角度，实现鼠标跟随和指向中心的效果。

实现原理

实现该效果的核心在于以下几点：

1. 监听鼠标移动事件： 使用 document.addEventListener(‘mousemove’, callback) 监听鼠标在文档中的移动。
2. 计算角度： 在 mousemove 事件的回调函数中，获取鼠标的坐标 (x, y)，并计算屏幕中心坐标。然后，使用 math.atan2(deltaY, deltaX) 计算元素与屏幕中心之间的角度。
3. 调整位置和旋转： 使用 CSS transform 属性的 translate() 和 rotate() 函数，动态调整元素的位置和旋转角度。translate() 用于使元素跟随鼠标移动，rotate() 用于使元素指向屏幕中心。

代码实现

以下是实现该效果的完整代码：

html:

<div id="myDiv"></div>

CSS:

#myDiv {   cursor:none; /* 隐藏鼠标 */   overflow:hidden; /* 隐藏滚动条 */   position: absolute;   top: 0;   left: 0;   width: 100px;   height: 100px;   background-color: lightgray;   transform-origin: center center;   transform: rotate(-100deg); /* 初始旋转角度 */   background: url(https://upload.wikimedia.org/wikipedia/commons/8/89/Flashlight.svg) no-repeat center / contain; /* 使用图片作为背景 */ } body{   overflow:hidden; /* 隐藏滚动条 */ }

JavaScript:

const centerX = window.innerWidth / 2; const centerY = window.innerHeight / 2; const myDiv = document.getElementById('myDiv');  document.addEventListener('mousemove', (event) => {   const x = event.clientX;   const y = event.clientY;   const deltaX = (centerX - event.clientX);   const deltaY = (centerY - event.clientY);    let angle = Math.atan(deltaY/deltaX) * 180 / Math.PI;   // 根据象限调整角度   if((x>centerX && y<centerY) || (y>centerY && x>centerX))angle+=180    const distance = 50; // 调整跟随鼠标的距离    const translateX = event.clientX - distance;   const translateY = event.clientY - distance;    const extraRotationForSVG = 210; // 调整 SVG 图片的初始方向    myDiv.style.transform = `translate(${translateX}px, ${translateY}px) rotate(${angle+extraRotationForSVG}deg)`; });

代码解释:

• centerX 和 centerY: 获取屏幕中心坐标。
• deltaX 和 deltaY: 计算屏幕中心与鼠标位置的距离差。
• angle: 使用 Math.atan(deltaY/deltaX) 计算角度，并将弧度转换为角度。需要根据鼠标所在的象限调整角度，以确保指向屏幕中心。
• distance: 调整元素跟随鼠标的距离。
• translateX 和 translateY: 计算元素的位置，使其跟随鼠标移动。
• extraRotationForSVG: 调整 SVG 图片的初始方向，使其正确指向屏幕中心。 这是因为SVG本身的方向可能不是正上方。
• myDiv.style.transform: 使用 CSS transform 属性更新元素的位置和旋转角度。

注意事项

• 性能优化： 频繁的 dom 操作可能会影响性能。如果性能成为问题，可以考虑使用 requestAnimationFrame 来优化动画。
• 初始旋转角度： 根据使用的图片或元素的初始方向，可能需要调整 extraRotationForSVG 的值。
• 兼容性： 该代码在现代浏览器中运行良好。如果需要支持旧版本的浏览器，可能需要添加兼容性代码。
• 隐藏滚动条和鼠标： CSS 中 overflow:hidden; 用于隐藏滚动条， cursor:none; 用于隐藏鼠标，可以根据实际情况选择是否使用。

总结

通过本文，你学习了如何使用 JavaScript 和 CSS 创建一个跟随鼠标移动并指向屏幕中心的元素动画。 该技术可以应用于各种交互式 Web 应用，例如游戏、可视化工具等。 掌握这种技巧，可以为你的 Web 应用增加更丰富的交互体验。 调整 distance 和 extraRotationForSVG 可以定制动画效果，使其更符合你的需求。