如何使用leader-line.js在Swiper幻灯片之间绘制跟随移动的动画连线

实现方案 #

LeaderLine生成的连线是独立的DOM元素，不会自动监听绑定节点的位置变化，你只需要把连线实例存储起来，在Swiper的位置更新事件中主动触发连线重绘即可。

1. 修改连线初始化代码，存储所有连线实例

const items = document.querySelectorAll(".circle");
// 新增数组存储所有连线实例
const leaderLines = [];

for(let i = 0; i < items.length - 1; i++) {
  const line = new LeaderLine(items[i], items[i + 1], {
    startPlug: "behind",
    endPlug: "behind",
    size: 2,
    dash: true,
    startPlugSize: 3,
    endPlugSize: 1,
    startSocket: "right",
    endSocket: "left",
    color: "#fb8c00",
    path: 'straight',
  });
  leaderLines.push(line);
}

2. 在Swiper配置中添加事件监听，实时更新连线位置

const swiper = new Swiper('.swiper', {
  // 保留你原有的Swiper配置：滑动方向、分页、自动播放等参数不变
  on: {
    // 滑动过程中实时更新连线位置
    setTranslate: () => {
      leaderLines.forEach(line => line.position())
    },
    // 滑动过渡结束后再次校准位置
    transitionEnd: () => {
      leaderLines.forEach(line => line.position())
    },
    // 窗口尺寸变化时更新连线
    resize: () => {
      leaderLines.forEach(line => line.position())
    }
  }
})

如果你的Swiper开启了loop循环模式，需要额外处理循环生成的克隆节点，在loop切换完成后重新生成对应位置的连线即可。

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