CAShapelayer从底部开始为动画填充颜色

Question

我有一个CAShapelayer，它是由贝塞尔曲线路径构成的，但是路径很复杂，而不仅仅是正方形。

我需要将形状层填充颜色从曲线的底部向上（沿y轴）设置为黄色。 （之后已与路径相连的图层）

这是路径和图层曲线：

如果我使用此代码，它将立即为所有区域设置动画。

   let animation = CABasicAnimation(keyPath: "fillColor")
    animation.fromValue = UIColor.white.cgColor
    animation.toValue = curveFillColor!.cgColor
    animation.duration = 4
    animation.fillMode = .forwards
    animation.isRemovedOnCompletion=false
    shapeLayer.add(animation, forKey: "fillColor")

形状层代码为：

let shapeLayer = CAShapeLayer()
shapeLayer.fillColor =  UIColor.yellow.cgColor
shapeLayer.strokeColor = UIColor.yellow.cgColor
shapeLayer.lineWidth = 2.0
shapeLayer.lineJoin = CAShapeLayerLineJoin.round
shapeLayer.lineCap = CAShapeLayerLineCap.round
shapeLayer.strokeStart = 0
shapeLayer.path = path.cgPath
self.layer.addSublayer(shapeLayer)

Answer 1

我认为您可能必须创建两个形状图层版本：一个使用起始颜色填充，一个使用结束颜色填充。将它们堆叠在一起，并在顶部放置结束颜色层。然后，使用高度为零的矩形图层蒙版对最终颜色图层进行蒙版。 （这意味着整个图层都被遮罩了。）

现在添加一个动画，将形状图层蒙版动画化为形状图层的整个高度。这将揭示结束颜色层并覆盖开始颜色层，从而产生结束颜色层从底部开始绘制的效果。

另一种选择是重新加工形状图层，使其从底部绘制到顶部。为此，我想您将创建一个由一系列从底部到顶部绘制的垂直线组成的图层。然后可以为形状的strokeStart或strokeEnd属性设置动画，但是将形状转换为一系列垂直线会很痛苦，而且我不知道如何对任意形状执行此操作。