d3.js实现连续动画
2019-02-13 本文已影响0人
多问Why
下面示例用的是v5.7
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>
</title>
<script language="JavaScript" src="d3.min.js">
</script>
<style>
</style>
</meta>
</head>
<body>
<svg height="400" width="500">
</svg>
<script language="JavaScript">
var group = d3.select('svg').append("g")
group.append('rect')
.attr("x", -5)
.attr("y", -50)
.attr("width", 10)
.attr("height", 100);
group.append('rect')
.attr("x", -50)
.attr("y", -5)
.attr("width", 100)
.attr("height", 10);
rectangle = d3.select('svg').append("rect")
.attr("x", -50)
.attr("y", -5)
.attr("width", 100)
.attr("height", 10)
.style("fill",'purple');
var rotate = -10
function flash(){
rotate -= 10
group.transition().ease(d3.easeLinear).attr("transform",'translate(200,200) rotate('+rotate+')');
rectangle.transition().ease(d3.easeLinear).attr("transform",'translate(300,200) rotate('+rotate+')').on("end", flash);
}
flash()
</script>
</body>
</html>
ease()使旋转动画运行连贯，translate()使图形围绕图形中心而不是坐标原点旋转。另外注意只需有一个在变形结束后调用回调函数就可以了。rotate()也可以指定旋转的中心，但试时发现矩形转动时会有晃动的效果。
