javascript - 使用 svg.js 循环动画

Question

我有一个非常简单的 svg.js 动画，只要页面打开，我就可以循环运行。我在查看github时找不到任何东西。 , documentation ，或stack overflow页。可以找到没有循环的动画的工作版本 here 。重要的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
        });
    });
}

我知道如果没有 js 库，这会很容易做到，但我认为这只是使用 svg.js 的第一步。后来我计划将它用于更强大的动画。感谢您的任何建议或指点。

Answer 1

来自 svg.js 的 0.38 版本loop() 方法内置:

https://github.com/wout/svg.js#loop

我还计划在即将发布的版本之一中创建一个 reverse() 方法。现在，loop() 方法从头开始重新启动动画。