CAShapelayer 从底部动画填充颜色答案

【问题标题】：CAShapelayer animate fill color from bottomCAShapelayer 从底部动画填充颜色
【发布时间】：2018-11-03 02:32:05
【问题描述】：

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

我需要从曲线底部向上（在 y 轴上） 将 shapelayer 填充颜色设置为黄色。（在层已经附加了路径）

这里是路径和层曲线：

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

   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)

【问题讨论】：

标签： swift uibezierpath cashapelayer

【解决方案1】：

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

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

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

【讨论】：