如何实现鼠标距图片中心越近缩放比例越大的交互效果？

核心实现思路 #

我们可以通过线性映射距离到缩放值的方式实现均匀的缩放效果，提前预设好最小、最大缩放阈值和触发缩放的最大距离，避免缩放值出现异常突变。 #

优化后可运行代码 #

const scaleMin = 1; // 最小缩放比例
const scaleMax = 1.5; // 最大缩放比例，可根据需求调整
const maxDistance = 400; // 触发缩放的最大距离，超出后保持最小缩放
const element = $('.project');
let elemData = getElemData(element);

// 提前获取元素的中心坐标、尺寸信息
function getElemData(elem) {
  const offset = elem.offset();
  const width = elem.width();
  const height = elem.height();
  return {
    centerX: offset.left + width / 2,
    centerY: offset.top + height / 2,
    width,
    height
  }
}

// 计算鼠标到元素中心的距离
function calculateDistance(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}

// 窗口尺寸变化时更新元素参数，避免位置偏移
$(window).on('resize', () => {
  elemData = getElemData(element);
})

$(document).mousemove(function(e) {  
  const mouseX = e.pageX;
  const mouseY = e.pageY;
  const distance = calculateDistance(mouseX, mouseY, elemData.centerX, elemData.centerY);
  
  // 线性计算缩放值：距离越近，缩放值越接近最大阈值
  let scaling = scaleMax - ((distance / maxDistance) * (scaleMax - scaleMin));
  // 限制缩放范围，避免超出预设阈值
  scaling = Math.max(scaleMin, Math.min(scaleMax, scaling));

  gsap.to(".project", {
    duration: 0.3, 
    scale: scaling,
    ease: "power2.out"
  });
});

主要优化点 #

• 缩放计算改用线性映射逻辑，缩放比例随鼠标距离均匀变化，不会出现异常跳变
• 增加缩放值边界限制，无论距离多近/多远，缩放值永远控制在你设定的范围内
• 缓存元素的位置、尺寸数据，仅在窗口大小变化时更新，降低性能损耗
• 调整GSAP的过渡时长和缓动函数，缩放动画更顺滑自然，没有卡顿感
• 移除了距离范围判断逻辑，距离超出触发范围后自动保持最小缩放，不会出现生硬的效果切换

内容的提问来源于stack exchange，提问作者Jean mi