7

SVG パス アニメーションの多くの例があり、どちらもネイティブです。

http://jsfiddle.net/FVqDq/

そしてRaphael.jsを使って

http://jsfiddle.net/d7d3Z/1/

p.animate({path:"M140 100 L190 60"}, 2000, function() {
    r.animate({path:"M190 60 L 210 90"}, 2000);
});

これはsvg.js ライブラリでどのように可能ですか?

4

5 に答える 5

3

svg.js を使用して線をアニメーション化する簡単で汚い方法があります: http://jsfiddle.net/c4FSF/1/

draw
    .line(0, 0, 0, 0)
    .stroke({color: '#000', width: 2})
    .animate(1000, SVG.easing.bounce) // Using svg.easing.js plugin(not required)
    .during(function(t, morph) {
        this.attr({x2:morph(0, 100), y2: morph(0, 100)})
    })

前述のように複雑な SVG パスをアニメーション化するには、プラグインが必要です。残念ながら、私は SVG について (まだ) 十分に知りませんが、SMILアニメーション タグを使用するプラグインを作成することを考えています。これは、質問の最初のリンクで使用されているものです。

于 2013-05-10T13:59:51.263 に答える
1

svg.path.jsプラグインを使用してパスをアニメーション化できます。

最初の例を参照してください (.drawAnimatedメソッドを使用)。

于 2014-11-07T22:51:30.287 に答える