3

一連の画像をアニメーションとして表示したい - 特定のフレームを操作したい場合を除いて、GIF を使用します。

xlink:hrefSVG キャンバスに画像を表示しましたが、動的に変更したいと考えています。

function startAnimation(){
    c += 1;
    d3.select(this)
        .transition()
        .attr("xlink:href", "images/image-" + c.toString() +".png")
        .each("end", startAnimation);       
};

画像の高さなどの属性を変更しようとすると、このアプローチはうまく機能しますが、属性では機能しないようですxlink:href。

このような画像を動的に更新する方法はありますか?

4

2 に答える 2

7

アニメーション シーケンスを開始する前に、イメージをプリロードしてキャッシュする必要があります。それ以外の場合、画像は遅延して読み込まれます。画像の読み込みに 250 ミリ秒かかることは不合理ではありません。つまり、画像が読み込まれるまでに、次のフレームに進んでいるということです。

HTML 要素の場合、Image オブジェクトを作成し ( new Image)、属性を設定し、srcロード イベントをリッスンして ( onload)、すべての画像の準備ができたことを確認することで、プリロードできます。プリロードされた からsrc表示される HTML 要素のを設定すると、ブラウザはキャッシュされたメモリ内イメージを使用します。imgImage

ただし、この手法は SVG 画像では機能する場合と機能しない場合があります。さらに優れた手法は、スプライト シートを使用することです。この場合、アニメーションのすべてのフレームを 1 つの画像に結合し、クライアントでトリミングします。HTML では、一般的にこれに background-position スタイルを使用します。SVG では、クリッピングまたはオーバーフローによって同じことができます。

さらに別のオプションは、複数のsvg:image要素を作成してから、1 つを除くすべてを非表示にすることです (たとえば、不透明度または要素を画面外に配置することによって)。

(また、属性を補間していないため、アニメーションには d3.transition ではなく setInterval を使用する方が簡単な場合があります。)

于 2012-10-15T04:54:53.070 に答える
0 
nodeEnter.append("svg:image")
     .attr('x',-9)
     .attr('y',-12)
     .attr('width', 15)
     .attr('height', 24)    
     .attr("xlink:href", function(d) { 
      if(d.Type=="name"){
       return "/images/icon-1.png";}
      else{
           return "/images/icon-2.png";}
           });
于 2013-08-23T05:25:19.610 に答える