javascript - 如何使用 leader-line js 在 Swiper 幻灯片之间制作动画线条？

Question

我正在尝试使用 Swiper 和 leader-line.js 构建时间线。我尝试将它与 Swiper 的转换功能一起使用，但它不能正常工作。这是我的领导行代码；

const items = document.querySelectorAll(".circle");
const options = {
  startSockets: ["top", "bottom", "right", "bottom", "left", "right"],
  endSockets: ["top", "bottom", "top", "top", "top", "top"]
};

for(let i = 0; i < items.length - 1; i++) {
  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',
  });
}

我做了一个codepen例子来说明清楚。

https://codepen.io/Xteripus/pen/yLopBNp?editors=1010

我想让线条粘在 Swiper 的容器上，所以当 swiper 元素移动时，线条会随之移动。提前致谢！

标签： javascriptlineswiper

Answer 1

插件开发者 Anseki 提出了这个解决方案，希望对您有所帮助！

这是js：

     $(".circle").each(function (index, el) {
    $(el).css({
        top: Math.random() * ($(".swiper-slide ").height() - 300 - $(this).height())
    });
    });
    const items = document.querySelectorAll(".circle");
    const options = {
    startSockets: ["top", "bottom", "right", "bottom", "left", "right"],
    endSockets: ["top", "bottom", "top", "top", "top", "top"]
    };

    const lines = [];
    for (let i = 0; i < items.length - 1; i++) {
    lines.push(
        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"
        })
    );
    }

    swiper.on("sliderMove", () => {
    lines.forEach((line) => {
        line.position();
    });
    });
    let req;
    function position(stop) {
    cancelAnimationFrame(req);
    lines.forEach((line) => {
        line.position();
    });
    if (stop !== true) {
        req = requestAnimationFrame(position);
    }
    }
    swiper.on("slideChangeTransitionStart", position);
    swiper.on("slideResetTransitionStart", position);
    swiper.on("slideChangeTransitionEnd", () => {
    position(true);
    });
    swiper.on("slideResetTransitionEnd", () => {
    position(true);
    });
    

https://codepen.io/anseki/pen/qBXpEWV?editors=1010