在D3中动态显示图像

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元素,您可以通过创建Image对象(new Image),设置src属性,然后侦听加载事件(onload)来预加载,以查看所有图像何时准备就绪.当您从预加载设置src显示的HTML img元素时,浏览器使用缓存的内存中图像Image.

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

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

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