動態顯示D3中的圖像

我想要將一系列圖像顯示爲動畫 - 我會使用GIF，但我想操作特定的幀。動態顯示D3中的圖像

我已將圖像顯示在SVG畫布上，現在我想動態更改xlink:href。

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

這種方式工作得很好，如果我試圖改變像圖像高度的屬性，但它似乎並沒有與屬性xlink:href工作。

有沒有辦法像這樣動態更新圖像？

來源

2012-10-15 Amyunimus

在開始動畫序列之前，您需要預加載並緩存圖像。否則，圖像將被懶惰地加載 - 並且圖像加載250毫秒並不是不合理的，這意味着在加載圖像時，您將進入下一幀。

對於HTML元素，可以通過創建圖像對象（new Image），設置src屬性，然後偵聽加載事件（onload）以查看所有圖像何時準備就緒來預加載。當您從預加載的Image中設置顯示的HTML img元素的src時，瀏覽器使用緩存的內存映像。

雖然這種技術可能對SVG圖像起作用，也可能不起作用。一個更好的技術是使用精靈表，將動畫中的所有幀合併成一張圖像，然後在客戶機上剪切。在HTML中，您通常使用背景位置樣式;在SVG中，你可以通過剪輯或溢出來做同樣的事情：隱藏。

另一種選擇是創建多個元素，然後隱藏除一個之外的所有元素（例如，通過不透明或將元素定位在屏幕外）。

（此外，因爲您不插屬性，它可能是更容易使用的setInterval爲動畫而不是d3.transition。）

來源

2012-10-15 04:54:53 mbostock

大 - 我覺得精靈表會爲這項工作做得很好。謝謝！ – Amyunimus

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-23 05:25:19

動態顯示D3中的圖像

回答

相關問題