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

本文将介绍如何使用 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 可以定制动画效果，使其更符合你的需求。

以上就是创建鼠标跟随及指向屏幕中心的元素动画的详细内容，更多请关注php中文网其它相关文章！