用圆点动画线图

时间:2017-01-29 14:00:13

标签: ios cocoa-touch core-animation cashapelayer cgpath

我偶然发现了一个有趣的问题,我不知道如何解决它。我有一个线图,数据点用圆点标记。目前,我为该行创建了一个CAShapeLayer,并为每个点创建了CAShapeLayer

使用strokeEnd动画键路径为该线条设置动画。它正在发挥作用。然而,稍微负面的影响是,一旦我打开图表,我看到已经绘制的所有数据点,然后通过它们动画一条线。

理想情况下,我希望以这样一种方式改变这种行为,即在开始时没有显示任何内容,并且当线条通过它们时,线条会被绘制动画数据点。

我正在考虑这个问题已有一段时间了,我找不到一种优雅的解决方法。在我看来,应该有一种相当简单的方法来实现我想要的。也许我应该创建一个复合路径(但是如何指定一条线需要被抚摸而点需要填充?)。

有人可以指导我朝正确的方向发展吗?

1 个答案:

答案 0 :(得分:1)

有很多方法可以解决这个问题。

假设图形的X增量是常数,并且您使用的是线性时序,您可以简单地将总动画时间除以数据点的数量,并计算需要向点添加点的时间。线进展到X位置时的图形。只需以适当的时间间隔将点形图层添加到父视图的图层中。

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