使用指定样式的路径平滑过渡

debugcn 发表于 Dev

阿拉什·豪伊达（Arash Howaida）

我对这个社区还很陌生，我也不是最善于表达的人。我希望我不会因发布新问题而影响自己的能力。我再次发布的原因是因为我传达的最初问题很差。即使经过反复编辑，这种混乱似乎也无法弥补。

我的问题如下：

我想使用笔触破折号（或其他方式）为路径设置动画。它基本上是一条垂直路径，没有花哨的坐标。从我所看到的所有示例中，“动画”路径是一条实线。我想为虚线样式的路径设置动画。

根据我的观察，笔触破折号数组被用作达到平滑路径动画效果的一种手段。如果我没记错的话，这是否意味着我们不能再出于样式目的而使用笔划破折号了？您是否必须选择如何像零和类型的情境一样仅利用动画或仅使用样式？

重申一下，我想使用虚线样式的路径制作动画，并且在给出当前示例/代码语法的情况下，我不确定如何做到这一点。

请告知在添加虚线样式路径条目时可以带些什么（在我的情况下，由按钮事件调用时）。我希望使用以下样式从底部到顶部绘制路径：stroke-dasharray, '5,3'。

此修订版已进行了预先修订，以最大程度地减少混乱。我已经学到了很多东西，我希望这个问题能阐明那些尚未浮出水面的小型虚拟空间。

如果仍然有困惑，请随时给我打电话，让我澄清。

感谢您的阅读

克劳耶西

您可以“增加”一行，从0px过渡到total-lenghtpx。像这样：

var points = [
  [100, 10],
  [100, 10]
];

var line = d3.svg.line()

var svg = d3.select("body").append("svg")
        .datum(points)
    .attr("width", 960)
    .attr("height", 500);

svg.append("path")
    .attr("id","grow")
    .style("stroke-dasharray", "5,3")    
    .attr("d", line)
    .transition()
      .duration(7500)                // <-- transition time
      .attr("d", "M100,400L100,10")  // <-- final lenght

这里的工作代码

不是最优化的选项。这是一个干净的：

<style>
line {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
  stroke-dasharray:5 3;
}
</style>
<script>
var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);

svg.append('line')
  .attr({
    x1: 25,
     y1: 400,
    x2: 25,
     y2: 400
  })
  .transition()
  .duration(1500)
  .attr({
    x2: 25,
    y2: 15
  })
</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。