0

ページが開いている限り、ループで実行したい 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 を使用する最初のステップに過ぎないと考えています。後で、より堅牢なアニメーションに使用する予定です。アドバイスやポインタをありがとう。

4

3 に答える 3

2

メソッドのsvg.jsのバージョン 0.38 から、以下loop()が組み込まれています。

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

reverse()また、今後のリリースの 1 つでメソッドを作成することも計画しています。現在、loop()メソッドはアニメーションを最初から再開します。

于 2014-01-28T14:53:35.067 に答える
0

典型的なsvgアニメーション要素を作成するかどうかはsvg.jsから明らかではないため、svg.js属性だけで可能かどうかはわかりません。とにかく、それはループで行うことができます。そう...

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 とは異なる方法で結び付けられる他のライブラリがあり、アニメーションを少し異なる方法で見る必要がある場合に代替として試すことができます。

于 2013-11-14T10:59:14.447 に答える