带圆形点的动画折线图

Question

我偶然发现了一个有趣的问题，但我不知道如何解决它。我有一个折线图，上面的数据点用圆点标记。目前我正在为线本身创建一个CAShapeLayer，并为每个点创建一个CAShapeLayer。

线条正在使用 strokeEnd 动画键路径进行动画处理。它正在工作。然而，稍微负面的影响是，一旦我打开图表，我会看到所有数据点都已经绘制出来，然后一条线正在通过它们进行动画处理。

理想情况下，我想改变这种行为，这样一开始什么都不显示，并且随着线条的动画化，一旦线条穿过它们，数据点就会被绘制出来。

我一直在思考这个问题，但我找不到解决它的优雅方法。在我看来，应该有一种相当简单的方法来实现我想要的。也许我应该创建一个复合路径（但是我如何指定需要描边而需要填充点呢？）。

谁能指导我正确的方向？

Answer 1

有很多方法可以处理这个问题。

假设图表的 X 增量是恒定的，并且您使用的是线性时序，您可以简单地将总动画时间除以数据点的数量，然后计算需要将点添加到当线前进到 X 位置时绘制图表。只需在适当的时间间隔将点形状图层添加到父视图的图层即可。

您还可以更改绘图方法，在计时器上一次一个地向图形路径添加新线段，同时添加点形状。这将为您提供一步一步的动画，而不是流畅的线条绘制。