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

loop()方法的svg.js版本0.38内置于：

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

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

Answer 2

我不确定它是否可能仅仅使用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
};

jsfiddle here http://jsfiddle.net/8bMBZ/7/因为不清楚它是否每次都在幕后添加元素（你可能想要存储动画，如果是这样的话就开始）。如果你需要Raphael，snap，d3，Pablo.js，你可以尝试作为替代方案，如果你需要以稍微不同的方式查看动画，还有其他与SVG不同的库。

Answer 3

我用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);
        });
}

使用svg.js循环动画

3 个答案: