使用 svg.js 循环动画答案

【问题标题】：Loop animation with svg.js使用 svg.js 循环动画
【发布时间】：2013-11-14 03:46:51
【问题描述】：

我有一个非常简单的 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 的第一步。后来我计划将它用于更强大的动画。感谢您的任何建议或指示。

【问题讨论】：

你的错误是什么？你签出 d3.js 了吗？
没有错误，我很容易让它淡入淡出一次。我正在寻找的是如何无限期地重复它。过去我在一些图表中使用过 d3，但我希望专门使用 svg.js 来拓宽我的视野广告，因为它是一个很小的库。如果它不能用 svg.js 完成，那么我肯定会再研究一下 d3。
知道了，您为什么可以使用您或我的示例，并使用 While(x) 而不是您的 for 循环，并且从不将 x 设置为 false？
或者干脆把你的for循环改成无限循环？
我试过了，但它只是冻结了页面，

标签： javascript svg svg.js

【解决方案1】：

从svg.js 0.38 版开始，loop() 方法内置：

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

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

【讨论】：

好东西。感谢您在这个项目上所做的工作并花时间更新这个小问题。很高兴看到那里添加了循环功能。附言祝你在 v1.0 上好运
文档目前统计 loop(int, bool) 接受第二个 bool 参数，指示循环是否应该反转。这对我不起作用:)

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

【讨论】：

在小提琴中你使用 setInterval 来保持它的运行，我认为这就是你想要做的，而不是这里的 setTimeout。无论哪种方式，这看起来正是我的情况的答案。我对 js 比较陌生，所以我什至不知道这两个函数的存在。谢谢。标记为答案。
嗨，是的，我想我从 setTimeout 开始，但后来认为 setInterval 可能更合适。我会在答案中添加评论，以便人们知道。感谢您发现它。

【解决方案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);
        });
}

【讨论】：

内存消耗呢？