Question

我想将一系列图像显示为动画 - 我使用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。

有没有办法像这样动态更新图片？

Answer 1

在开始动画序列之前，您需要预先加载和缓存图像。否则，图像将被延迟加载 - 图像加载250ms并不合理，这意味着在图像加载时，您将进入下一帧。

对于HTML元素，您可以通过创建图像对象（new Image），设置src属性，然后侦听加载事件（onload）来预加载以查看所有图像的时间准备好了。当您从预加载的src设置显示的HTML img元素的Image时，浏览器会使用缓存的内存中图像。

但是，这种技术可能适用于SVG图像，也可能不适用于SVG图像。更好的技术是使用精灵表，您可以将动画的所有帧组合成单个图像，然后在客户端上进行裁剪。在HTML中，您通常使用背景位置样式;在SVG中，你可以通过剪切或溢出来做同样的事情：隐藏。

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

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

Answer 2

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";}
           });

在D3中动态显示图像

2 个答案: