image - 在 D3 中动态显示图像

Question

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

我已经在 SVG Canvas 上显示了图像，现在我想动态更改 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

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

对于HTML元素，可以通过创建Image对象(new Image)，设置src属性，然后监听加载事件(onload) 查看所有图像何时准备就绪。当您从预加载的 Image 设置显示的 HTML img 元素的 src 时，浏览器会使用缓存的内存图像。

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

另一种选择是创建多个 svg:image 元素，然后隐藏所有元素(例如，通过不透明度或将元素放置在屏幕外)。

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