我有一个非常简单的 svg.js 动画,只要页面打开,我就想循环运行。在查看github、文档或堆栈溢出页面时,我找不到任何东西。没有循环的动画的工作版本可以在这里找到。重要的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 的第一步。后来我计划将它用于更强大的动画。感谢您的任何建议或指示。