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

Posted 2023-05-08

【中文标题】如何使用 leader-line js 在 Swiper 幻灯片之间制作动画线条？

【英文标题】：How can I make animated lines between Swiper slides with leader-line js?

【发布时间】：2021-12-17 10:54:58

【问题描述】：

我正在尝试使用 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 元素移动时，线条也会随之移动。 提前致谢！

【参考方案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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。