Anime.js实现absolute定位div沿三角路径循环移动的位置对齐问题

• 坐标计算逻辑错误：你为el1设置的left目标值el1.left - el2.left逻辑完全错误，目标位置应该是左侧顶点的坐标而非差值
• 坐标体系不匹配：你给元素加了transform: translate(-50%, -50%)实现居中，这意味着top/left属性控制的是元素中心点的位置，而getBoundingClientRect()返回的是元素左上角相对于视口的像素坐标，直接混用必然会出现偏移
• 缺失循环切换逻辑：现有代码仅实现了单个元素的单次移动，没有三个元素循环切换顶点、以及动画循环触发的逻辑

直接预定义三个顶点的定位参数，和你初始CSS的定位值保持一致，通过维护元素与顶点的映射关系实现循环切换，完全避免坐标换算带来的误差：

完整JS代码 #

// 预定义三个顶点的定位参数，和初始CSS配置完全一致
const points = [
  { top: '30%', left: '50%' }, // 顶部顶点
  { top: '70%', left: '15%' }, // 左侧顶点
  { top: '70%', left: '85%' }  // 右侧顶点
]
// 三个元素对应的当前顶点索引，初始顺序为el1在顶部、el2在左侧、el3在右侧
let currentIndexes = [0, 1, 2]
const elements = ['.el1', '.el2', '.el3']

// 定义移动动画函数
function moveElements() {
  // 索引循环右移一位，实现三个元素轮换位置
  currentIndexes = currentIndexes.map(idx => (idx + 1) % 3)
  // 为每个元素设置对应顶点的动画
  elements.forEach((selector, i) => {
    anime({
      targets: selector,
      top: points[currentIndexes[i]].top,
      left: points[currentIndexes[i]].left,
      duration: 1000,
      easing: 'linear',
      // 最后一个元素动画结束后触发下一轮移动，实现循环
      complete: i === elements.length - 1 ? moveElements : undefined
    })
  })
}

// 延迟1秒启动首次动画
setTimeout(moveElements, 1000)

效果说明 #

• 三个元素会沿着三角形顶点顺时针循环切换位置，不会出现任何偏移，因为定位参数和你初始配置完全一致
• 动画时长可以通过修改duration参数调整，循环间隔可以通过修改setTimeout的延迟值调整
• 如果需要逆时针循环，把索引更新逻辑改为(idx - 1 + 3) % 3即可

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