基于鼠标移动的背景平滑移动脚本优化技术问询

嘿，我懂你想要让背景跟着鼠标移动的效果更丝滑的需求——只靠增大除数降低移动幅度确实有点局限，这儿有几个更实用的优化思路，能帮你做出类似参考示例那种流畅的跟随效果：

1. 给移动加上缓动（Easing）效果 #

直接让背景瞬间跳到鼠标对应的位置会显得很生硬，咱们可以用缓动算法让背景逐步趋近目标位置。最简单的就是线性插值（Lerp）：每次只移动当前位置到目标位置的一小段距离，这样动画就会有自然的“惯性”感，平滑度直接拉满。

2. 用requestAnimationFrame代替直接在mousemove里改样式 #

mousemove事件触发频率特别高，每次触发就直接修改DOM样式，容易导致浏览器重绘频繁出现卡顿。换成requestAnimationFrame的话，浏览器会在每一帧的最佳时机执行更新，保证动画帧率稳定，流畅度自然就上去了。

3. 优化坐标计算&限制移动范围 #

之前的坐标计算可以简化，同时咱们可以给背景的移动范围加个限制，避免鼠标移到边缘时背景偏移过度，导致显示异常。

改进后的完整代码 #

<body id="body"></body>

html { width: 100%; }
body {
  background-image: url("http://sherly.mobile9.com/download/media/656/49_ybQFKMAV.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 4400px;
  /* 提前设置初始背景位置，避免闪烁 */
  background-position: 45% 0;
}

$(document).ready(function(){
  const $body = $('#body');
  // 记录当前背景位置和目标位置
  let currentX = 0;
  let currentY = 0;
  let targetX = 0;
  let targetY = 0;
  // 缓动系数，越小越平滑（取值0-1）
  const easeFactor = 0.1;

  $body.mousemove(function(e){
    // 计算目标偏移量，这里可以调整除数控制移动幅度
    targetX = -(e.pageX - $(window).width()/2) / 150;
    targetY = -(e.pageY - $(window).height()/2) / 80;
  });

  // 用requestAnimationFrame做平滑更新
  function updateBackground(){
    // 缓动计算：当前位置 += (目标位置 - 当前位置) * 缓动系数
    currentX += (targetX - currentX) * easeFactor;
    currentY += (targetY - currentY) * easeFactor;
    // 设置背景位置
    $body.css('background-position', `calc(45% + ${currentX}px) ${currentY}px`);
    // 循环调用
    requestAnimationFrame(updateBackground);
  }

  // 启动动画
  updateBackground();
});

代码关键点说明 #

• 用currentX/currentY记录背景当前的位置，targetX/targetY记录鼠标对应的目标偏移量，每次只更新一小步，实现缓动效果。
• easeFactor是缓动系数，你可以自己调整：数值越小，背景移动越平缓；数值越大，跟随速度越快。
• 计算目标偏移时，用e.pageX - $(window).width()/2让鼠标在窗口中心时背景不偏移，更符合直觉。
• requestAnimationFrame保证动画和浏览器刷新同步，避免卡顿。

你可以试试调整easeFactor和除数的数值，找到最符合你预期的平滑度和移动幅度~

内容的提问来源于stack exchange，提问作者Brian Patrick