1

我已经成功地实现了这个 D3 动画线条绘制示例中的一些代码，但我对它的工作原理一无所知。我真的很感激逐行分解代码的工作原理。我对 D3 比较陌生；我了解使用该库操作 DOM 的基础知识，但我觉得这需要我缺乏的中级理解。

我在下面包含了我重新设计的示例的特定部分。我怀疑聪明的部分与.attr("stroke-dashoffset", 0);&.attr("stroke-dashoffset", totalLength);部分相关，因此非常感谢您清楚地解释这些部分如何工作以及它们如何促成效果。

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

path
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(2000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

svg.on("click", function(){
  path      
    .transition()
    .duration(2000)
    .ease("linear")
    .attr("stroke-dashoffset", totalLength);
})

提前谢谢了

4

1 回答 1

2

有趣的副作用。无论如何，dasharray 和 dashoffset SVG 属性：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray https://developer.mozilla.org/en-US/docs/ Web/SVG/属性/stroke-dashoffset。

据我所知它的作用：

  1. 将路径破折号模式初始化为总长度可见，总长度不可见
  2. 首先将 dashoffset 设置为 totallength，仅使间隙部分可见
  3. 将 dashoffset 转换为 0，仅使 dash 部分可见。
  4. 单击时，再次过渡到总长度虚线偏移，再次使只有间隙部分可见。

只是为了玩，更改 dasharray 的设置： .attr("stroke-dasharray", totalLength/2 + " " + totalLength/2)

于 2013-09-17T10:37:29.880 回答