swift - CAShapelayer 从底部动画填充颜色

Question

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

我需要将 shapelayer 填充颜色设置为黄色，从曲线底部向上(在 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

我认为您可能需要创建 2 个版本的形状图层:一个使用起始颜色填充，一个使用结束颜色填充。将它们堆叠在一起，最后的颜色层在上面。然后用高度为零的矩形图层蒙版遮盖结束颜色层。 (意味着整个图层都被遮盖了。)

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

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