Question

我正在尝试使用D3过渡和图像，我似乎遇到了麻烦。

我试图让图像消失，让图像的顶部和底部靠近，直到它到达中间，如快门效果，或从顶部和底部擦除线条，直到它全部消失。我根本不想要图像缩放，我只是希望它能够关闭。

到目前为止，我已经将图像缩小到0，但这不是我想要的。

同样在第一次转换时，它会在图像开始转换之前将图像放到框的中间，最后是什么？

var svgContainer = d3.select("#box").append("svg")
.style("width", '100%')
.style("height", '100%')
.style("background-color","blue");

var imgs = svgContainer.append("svg:image")
.attr("xlink:href", "http://guiaavare.com/img/upload/images/Aishwarya-Rai-face.jpg")
.attr("width", "400")
.attr("height", "400");

d3.select("#inbutton").on("click", function () {
imgs
    .attr("height",400)
    .transition()
    .attr({
        height: 0,
        y: 200
    })
    .duration(500);
});

d3.select("#outbutton").on("click", function () {
imgs
    .transition()
    .attr({
        height: 400,
        y: 0
    })
    .duration(500);
});

提前致谢

Answer 1

使用clipPath：http://jsfiddle.net/Qda6B/5/

后，您可以达到效果

var clipRect = svgContainer.append('svg:defs')
                .append('svg:clipPath')
                .attr('id', 'shutter-clip')
                .append('rect')
                .attr({
                    x: 0,
                    y: 0,
                    height: 400,
                    width: 400
                })


var imgs = svgContainer.append("svg:image")
    // ...
    .attr("clip-path", "url(#shutter-clip)");

然后在transitions内的height的{{1}}上执行rect。

顺便说一句，虽然这可以与clipPath一起使用，但这很可能属于CSS3过渡或jQuery或GASP动画的领域。

仅D3高度的图像过渡

1 个答案: