顺序地动画SVG与d3js [英] Sequentially animate SVG with d3js

问题描述

我有一个由M＃，＃L＃，＃M＃，＃L＃，＃定义的许多段组成的复杂的SVG路径。我想动画这条路径的绘图，但是按照它们列出的顺序。我已尝试过这里列出的解决方案：无法使路径缓慢地与D3 ，但它们并行绘制路径的每个段。

解决方案

D3转换具有延迟）函数，允许您指定何时开始动画。您可以使用它在绘制前一个路径段之后开始绘制连续路径段。您还可以使用转换的 end 事件，在上一个转换完成后开始下一个转换。这样，你甚至不必指定延迟。

或者，你可以在SVG本身没有Javascript的动画路径。有关示例，请参见此处。所有你需要做的是在路径中附加一个 animate 元素，告诉它如何绘制。 p>

I've got an intricate SVG path composed of many segments defined with M#,#L#,# M#,#L#,#. I'd like to animate the drawing of this path, but in the order that they're listed. I've tried the solutions listed here: Can't make paths draw slowly with D3 , but they draw each segment of the path in parallel. How do I modify this so that they're animated sequentially?

解决方案

D3 transitions have a delay() function that allows you to specify when to start the animation. You can use this to start drawing successive path segments after the previous ones have been drawn. You could also use the transition's end event to start the next transition after the previous one finishes. This way, you don't even have to specify the delay.

Alternatively, you could animate the path in SVG itself without Javascript. See here for an example of this. All you need to do is basically append an animate element to the path that tells it how to draw it.

这篇关于顺序地动画SVG与d3js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！