Question

我想为这个海克斯康的绘画制作动画。第一次使用D3仍试图弄清楚它是如何工作的。

jsfiddle.net/p4ezs3ar /

Answer 1

使用stroke-dasharray和stroke-dashoffset svg属性设置动画是一种技巧。

基本上你可以使用

找到你的线的长度

var totalLength = path.node().getTotalLength();

然后你创建一条虚线，它是路径大小的两倍，其中一半是虚线，另一条是空的。

attr("stroke-dasharray", totalLength + " " + totalLength)

最后，你会为它制作动画。从totalLength的大小开始。这是虚线的明显部分：

.attr("stroke-dashoffset", totalLength)

将动画结束为0，以便只显示虚线的填充部分：

.attr("stroke-dashoffset", 0)

代码段：

var _s32 = (Math.sqrt(3)/2);
var A = 55;
var diff = 100;
var pointData = [
  [105+diff, 10+diff],
  [25+diff, 60+diff],
  [25+diff, 150+diff],
  [100+diff, 190+diff],
  [175+diff,150+diff],
  [175+diff,60+diff],
  [95+diff, 10+diff]
];
var svgContainer = d3.select("#animation") //create container
  .append("svg")
  .attr("width", 1000)
  .attr("height", 1000);
var line = d3.svg.line()
	.interpolate('linear')
  .x(function(d,i) { return d[0];})
  .y(function(d) { return d[1];});
  
var path = svgContainer.append('path')
	.attr('d', line(pointData))
  .attr('stroke', '#92c8a1')
  .attr('stroke-width', '22')
  .attr('fill', 'none');

var totalLength = path.node().getTotalLength();

path
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
  .duration(2000)
  .ease("linear")
  .attr("stroke-dashoffset", 0);

svgContainer.on("click", function(){
  path      
    .transition()
    .duration(2000)
    .ease("linear")
    .attr("stroke-dashoffset", totalLength);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>

<div id="animation"></div>

D3请帮助我为Hexagon制作动画

1 个答案: