CAShapelayer animate fill color from bottom

Question

I have a CAShapelayer that's made from a bezier path, but the path is complex and not just a square.

I need to animate the shapelayer fill color to Yellow starting from the bottom of the curve and up (over y axis). (after the layer already attached with the path)

here is the path and layer curve:

If I use this code, it will animate all of the area at once.

   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")

Shape layer code is :

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

I think you will probably have to create 2 versions of your shape layer: One filled using the starting color, and one filled with the ending color. Stack them on top of each other with the ending color layer on top. Then mask the ending color layer with a rectangular shape layer mask that has zero height. (meaning that the entire layer is masked.)

Now add an animation that animates the shape layer mask to the full height of your shape layer. That will reveal the ending color layer and cover the starting color layer, creating the effect that the ending color layer paints up from the bottom.

An alternative might be to rework your shape layer so that it that draws from the bottom to the top. To do that I guess you'd create a layer that was composed of a series of vertical lines drawn from bottom to top. Then you could animate the strokeStart or strokeEnd properties of your shape, but transforming your shape into a series of vertical lines would be a pain, and I don't know how you would do that for an arbitrary shape.