Drawsvg - 多次回调调用的问题答案

【问题标题】：Drawsvg - Problem with callback calls multiple timesDrawsvg - 多次回调调用的问题
【发布时间】：2021-09-02 23:04:09
【问题描述】：

我必须尝试使用 jquery 插件 Draw SVG 为 svg 设置动画。 https://github.com/lcdsantos/jquery-drawsvg

在我的 html 页面中，我有 2 个 SVG。我必须一个接一个地为每个 SVG 设置一次动画。

// svg 2 initialization
let svg2 = $('.outer_svg2').drawsvg({
    duration: 800
})

// svg 1 initialization
let svg1 = $('.outer_svg').drawsvg({
    duration: 2000,
    callback: function(){
        // Animating svg 2
        svg2.drawsvg('animate'); 
    }
});
// Animating svg 1
svg1.drawsvg('animate');

在完成第一个 svg 的动画后，我必须做第二个 svg 的动画。

但是，我的问题是，当我运行此代码时，第一个 SVG 动画运行正确，而第二个 SVG 动画重复运行。我只需要运行第一个第二个 SVG 动画一次。

以下是我找到的当前解决方案

setTimeout(function () {
     svg2.drawsvg('animate'); // second animation call
}, 2000); // Duration of first animation

任何帮助将不胜感激！谢谢

【问题讨论】：

能否把你的运行代码放到sn-p中
我已经用问题更新了它。你可以在那里查看。

标签： jquery svg svg-animate jquery-svg

【解决方案1】：

我也遇到了这样的问题，我想在每个动画 svg 上进行无限循环，但是回调只取 foreach 循环的最后一个元素。

这就是我现在所做的。（我在这里发布了它，我认为它可能对其他正在寻找与我相同问题的解决方案的人有所帮助）:)

var svgs = [];
$('.animated__svg').each((index,element) => {
    var svg = $(element).drawsvg({
        duration: 2000,
    });
    svgs.push(svg);
});

animateSvg();
function animateSvg(){
    $.each(svgs,(index,element) => {
        element.drawsvg('animate');
    });
    setTimeout(function(){ animateSvg();}, 2000);
}

【讨论】：