我正在将一个元素从一个点移动到另一个点。但具体来说我想实现这个动画:
http://carto.net/svg/samples/path_animation.svg
我在 d3.js 方面的知识有些有限,我不知道如何生成这条曲线,也不知道如何进行 3D 透视,其中应该出现圆圈,然后变得很小并长大,最终变小直到消失,以及所附链接中的情况。我该怎么做?
var circle = svg.append("circle")
.attr("fill", "blue")
.attr("r", 4)
.attr("cx", centroids.ANTIOQUIA[0])
.attr("cy", centroids.ANTIOQUIA[1]);
circle.transition()
.delay(1000)
.duration(2000)
.attr("cx", centroids.BOYACA[0])
.attr("cy", centroids.BOYACA[1]);
最佳答案
我的回答包含 3 个主要步骤:
首先,我们必须创建一条从 A 点到 B 点的路径,模拟一条弧线。有多种方法可以做到这一点,但你的问题不清楚。在这里,我使用二次曲线:
var arc = svg.append("path")
.style("fill", "none")
.style("stroke", "yellow")
.style("stroke-width", 2)
.attr("d", "M" + centroids.ANTIOQUIA[0] + "," +
centroids.ANTIOQUIA[1] + " Q" + centroids.BOYACA[0] +
"," + centroids.ANTIOQUIA[1] + " " +
centroids.BOYACA[0] + "," + centroids.BOYACA[1]);
这条路径可以有颜色或透明,这并不重要。
其次,我们使用Bostock著名的translate along path沿该弧平移元素的代码。我更改了函数以将元素与路径一起传递,因此我们可以更改其大小:
circle.transition()
.duration(5000)
.attrTween("transform", translateAlong(arc.node(), circle.node()));
//the second argument is the circle -----------------^
function translateAlong(path, circle) {
var l = path.getTotalLength();
return function(d, i, a) {
return function(t) {
d3.select(circle).attr("r", circleSize(t))
//here we can change circle's size
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
最后,我使用线性比例再次放大和缩小圆圈:
var circleSize = d3.scale.linear()
.domain([0, 0.5, 1])
.range([4, 10, 4]);
此处的域从 0 到 1,因为这是参数 t
可以采用的值范围。
这是更新后的 fiddle :http://jsfiddle.net/zkc2wton/
这是第二个 fiddle ,改变运动开始和结束时的不透明度:http://jsfiddle.net/4pdusase/
关于javascript - 使用d3.js实现元素的过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44642330/