Javascript 使用svg.js循环动画

我用svg.js制作了一个非常简单的动画，只要页面打开，我就想在循环中运行它。在浏览、或页面时，我找不到任何东西。可以找到没有循环的动画的工作版本。重要的是：

//create the svg element and the array of circles
var draw = SVG('canvas').size(300, 50);
var circ = [];

for (var i = 0; i < 5; i++) {
    //draw the circles
    circ[i] = draw.circle(12.5).attr({
        fill: '#fff'
    }).cx(i * 37.5 + 12.5).cy(20);

    //first fade the circles out, then fade them back in with a callback
    circ[i].animate(1000, '<>', 1000 + 100 * i).attr({
        opacity: 0
    }).after(function () {
        this.animate(1000, '<>', 250).attr({
            opacity: 1
        });
    });
}

//创建svg元素和圆数组
var draw=SVG（'canvas'）。大小（300,50）；
var-circ=[]；
对于（变量i=0；i<5；i++）{
//画圆圈
圈[i]=画圆（12.5）.attr({
填充：“#fff”
}).cx（i*37.5+12.5）.cy（20）；
//首先淡出圆圈，然后通过回调将其淡入
循环[i]。动画（1000，，，1000+100*i）。属性({
不透明度：0
}).在（函数（）之后{
这个.animate（1000，，，250）.attr({
不透明度：1
});
});
}

---

我知道这在没有js库的情况下很容易做到，但我认为这只是使用svg.js的第一步。后来，我计划用它制作更加健壮的动画。感谢您的建议和指点。

我不确定仅使用svg.js属性是否可行，因为从svg.js中不清楚它是否创建了典型的svg动画元素。无论如何，它可以通过一个循环来完成。所以

function anim( obj,i ) {
        obj.animate(1000, '<>', 1000 + 100 * i).attr({
            opacity: 0
        }).after(function () {
            obj.animate(1000, '<>', 250).attr({
                opacity: 1
            });
        });

};

function startAnims() {
   for( var i = 0; i< 5; i++ ) {
        anim( circ[i],i );
    }
    setTimeout( startAnims, 5000 ); // Or possibly setInterval may be better
};

功能动画（obj，i）{
对象动画（1000，，，1000+100*i）.attr({
不透明度：0
}).在（函数（）之后{
对象动画（1000，，，250）.attr({
不透明度：1
});
});
};
函数startAnims（）{
对于（变量i=0；i<5；i++）{
anim（circ[i]，i）；
}
setTimeout（startAnims，5000）；//或者setInterval可能更好
};

这里的jsfiddle不清楚它是否每次都在幕后添加元素（如果是的话，您可能希望存储动画并开始）。如果您需要，还有其他与SVG不同的库，如Raphael、snap、d3、Pablo.js，如果您需要以稍微不同的方式查看动画，您可以尝试将其作为备选库。

从版本0.38开始，在

循环（）中内置
方法：


我还计划在即将发布的版本中创建一个
reverse（）
方法。现在，
loop（）
方法从一开始就重新启动动画。
我使用after调用递归启动动画的函数。这样我就可以实现无限循环和反转。当然，您可以计数以避免无限循环，但总体思路如下：

 //custom animation function whose context is the element animated
function myCustomAnimation(pos, morph, from, to) {
    var currentVal = morph(from, to); //do morphing and your custom math
    this.attr({ 'some prop': currentVal });
}

var animationStart = 0; //just extra values for my custom animation function
var animationEnd = 1; //animation values start at 0 and ends at 1

line.attr({ 'stroke-width': 2, stroke: 'red' });
animateMeRepeatedly.apply(line);

function animateMeRepeatedly()
{
    this.animate(1500)
        .during(function (pos, morph) {
            myCustomAnimation.apply(this, [pos, morph, animationStart, animationEnd]);
        })
        .after(function () {
            this.animate(1500).during(function (pos, morph) {
                myCustomAnimation.apply(this, [pos, morph, animationEnd, animationStart]);
            }).after(animateMeRepeatedly);
        });
}

你的错误是什么？你签出d3.js了吗？没有错误，我很容易就能让它淡入淡出一次。我在寻找的是如何无限期地重复它。过去我曾在一些图表中使用过d3，但我希望使用svg.js来拓宽我的视野，因为它包含的库太小了。如果svg.js无法实现，那么我肯定会进一步研究d3。明白了，为什么你可以使用你或我的示例，使用While（x）而不是for循环，并且永远不要将x设置为false？或者简单地将for循环更改为无限循环？我试过了，但它只是冻结了页面，在你使用setInterval的小提琴中，它保持了运行，我想这就是你想要做的，而不是在这里设置超时。不管怎样，这看起来正是我处境的答案。我在js方面比较新手，所以我甚至不知道这两个函数的存在。谢谢标记作为答案。您好，是的，我想我是从setTimeout开始的，但后来认为setInterval可能更合适。我会在回答中添加一条评论，让人们知道。谢谢你发现了，很棒的东西。感谢您在这个项目上所做的工作，并花时间更新这个小问题。很高兴看到这里添加了循环函数。另请注意，v1.0版好运当前文档统计了循环（int，bool）的第二个bool参数，该参数指示循环是否应该反转。这对我不起作用：）内存消耗呢？