3

我想将一系列图像显示为动画——我会使用 GIF，但我想操纵特定的帧。

我已经在 SVG 画布上显示了图像，现在我想xlink:href动态更改。

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 毫秒并不是不合理的，这意味着当图像加载时，您将进入下一帧。

new Image对于 HTML 元素，您可以通过创建 Image 对象src（onload当您从src预img加载的Image.

不过，这种技术可能适用于 SVG 图像，也可能不适用。一种更好的技术是使用精灵表，将动画的所有帧组合成一个图像，然后在客户端上对其进行裁剪。在 HTML 中，您通常为此使用 background-position 样式；在 SVG 中，您可以通过裁剪或溢出来做同样的事情：隐藏。

另一种选择是创建多个svg:image元素，然后隐藏除一个之外的所有元素（例如，通过不透明度或将元素定位在屏幕外）。

（此外，由于您没有插入属性，因此对动画使用 setInterval 而不是 d3.transition 可能更简单。）

于 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 回答