时间戳

首页 > 解决方案 > Drawsvg - 多次回调调用的问题

jquery - Drawsvg - 多次回调调用的问题

问题描述

我必须尝试使用​​ 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

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

标签： jquerysvgsvg-animatejquery-svg

解决方案

我也有这样的问题，我想在每个动画 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);
}

推荐阅读