如何为 UIBezierPath 上的填充颜色变化设置动画？

Question

开始时形状已正确填充，但我不知道如何更改填充颜色，或者更好的是，如何在UIBezierPath 上设置填充颜色更改的动画。就像我正在寻找改变 UIView 的背景颜色一样。

var fillColor = UIColor()

func changeBackgroundColor() {

    let animcolor = CABasicAnimation(keyPath: "fillColor")
    animcolor.fromValue = UIColor.greenColor()
    animcolor.toValue = UIColor.orangeColor()
    animcolor.duration = 1.0;
    animcolor.repeatCount = 0;
    animcolor.autoreverses = true
    shapeLayer.addAnimation(animcolor, forKey: "fillColor")

}


var fillColor = UIColor()
let clipPath = UIBezierPath()
let shapeLayer = CAShapeLayer()

override func drawRect(rect: CGRect) {

        clipPath.moveToPoint(CGPointMake(self.bounds.minX + 7.65, self.bounds.minY - 0.25))
        clipPath.addCurveToPoint(CGPointMake(self.bounds.minX + 7.65, self.bounds.minY + 36.1), controlPoint1: CGPointMake(self.bounds.minX - 2.38, self.bounds.minY + 9.79), controlPoint2: CGPointMake(self.bounds.minX - 2.38, self.bounds.minY + 26.06))
        clipPath.addCurveToPoint(CGPointMake(self.bounds.minX + 43.99, self.bounds.minY + 36.1), controlPoint1: CGPointMake(self.bounds.minX + 17.69, self.bounds.minY + 46.13), controlPoint2: CGPointMake(self.bounds.minX + 33.96, self.bounds.minY + 46.13))
        clipPath.addLineToPoint(CGPointMake(self.bounds.minX + 43.99, self.bounds.minY + 36.1))
        clipPath.addLineToPoint(CGPointMake(self.bounds.minX + 44.01, self.bounds.minY + 0.19))
        clipPath.addLineToPoint(CGPointMake(self.bounds.minX + 7.58, self.bounds.minY + 0.19))
        clipPath.usesEvenOddFillRule = true
        fillColor = userColor
    }

clipPath.addClip()
fillColor.setFill()
clipPath.fill()
shapeLayer.path = clipPath.CGPath
self.layer.mask = shapeLayer

Answer 1

就像我要改变 UIView 的背景颜色一样。

但是为什么你不能完全做到这一点？您已经将视图蒙版到您的路径 - 因此为您的背景颜色设置动画将达到您想要的确切效果。只需摆脱 Core Graphics 路径填充 - 并像 can't use drawRect with an animation of the background 一样删除 drawRect 覆盖。

如果您真的需要使用drawRect 并为颜色设置动画，您可以考虑将UIView 拆分为两个UIViews - 一个用于绘制背景层（您可以对其进行动画处理） )，以及一个绘制自定义绘图。或者，您可以设置CADisplayLink 以使用中间背景颜色重新绘制每一帧的视图——但这在性能方面并不令人惊奇。

正如我在下面所说，您不能直接为UIBezierPath 的填充颜色设置动画。如果您只想使用现有代码更改（而不是动画）填充颜色，那么您只需使用不同的 userColor 调用 setNeedsDisplay。

如果您之所以问这个问题是因为您使用两种不同的路径进行遮罩和填充，请参阅我下面的答案（事后看来过于复杂）。

---

问题是UIBezierPath 的填充颜色不是可动画的。但是CAShapeLayer 上的填充颜色是。

因此，您想使用另一个CAShapeLayer 来代替填充。我建议您创建一个fillLayer 和一个maskLayer 属性，以明确它们的功能。现在因为您使用的是 100% 分层的方法，您可以将代码移出 drawRect，因为您不再进行任何核心图形绘图。

另外，值得注意的是，您需要使用CGColor 来实现值的动画。

这样的事情应该可以解决问题：

var fillColor = UIColor.greenColor()
let maskLayer = CAShapeLayer()
let fillLayer = CAShapeLayer()

func changeBackgroundColor() {

    let animcolor = CABasicAnimation(keyPath: "fillColor")
    animcolor.fromValue = UIColor.greenColor().CGColor
    animcolor.toValue = UIColor.orangeColor().CGColor
    animcolor.duration = 1.0;
    animcolor.repeatCount = 0;
    animcolor.autoreverses = true
    fillLayer.addAnimation(animcolor, forKey: "fillColor")

}

// re-adjust the clipping path when the view bounds changes
override func layoutSubviews() {

    let clipPath = UIBezierPath()
    clipPath.moveToPoint(CGPointMake(self.bounds.minX + 7.65, self.bounds.minY - 0.25))
    clipPath.addCurveToPoint(CGPointMake(self.bounds.minX + 7.65, self.bounds.minY + 36.1), controlPoint1: CGPointMake(self.bounds.minX - 2.38, self.bounds.minY + 9.79), controlPoint2: CGPointMake(self.bounds.minX - 2.38, self.bounds.minY + 26.06))
    clipPath.addCurveToPoint(CGPointMake(self.bounds.minX + 43.99, self.bounds.minY + 36.1), controlPoint1: CGPointMake(self.bounds.minX + 17.69, self.bounds.minY + 46.13), controlPoint2: CGPointMake(self.bounds.minX + 33.96, self.bounds.minY + 46.13))
    clipPath.addLineToPoint(CGPointMake(self.bounds.minX + 43.99, self.bounds.minY + 36.1))
    clipPath.addLineToPoint(CGPointMake(self.bounds.minX + 44.01, self.bounds.minY + 0.19))
    clipPath.addLineToPoint(CGPointMake(self.bounds.minX + 7.58, self.bounds.minY + 0.19))

    // update layer paths
    fillLayer.path = clipPath.CGPath
    maskLayer.path = clipPath.CGPath

}

override init(frame: CGRect) {
    super.init(frame: frame)

    // configure filling
    fillLayer.fillColor = fillColor.CGColor
    fillLayer.fillRule = kCAFillRuleEvenOdd

    // add fill path to superlayer
    layer.addSublayer(fillLayer)

    // configure masking layer
    maskLayer.fillRule = kCAFillRuleEvenOdd
    layer.mask = maskLayer
}

Answer 2

Swift 4 版本，你可以在 Playground 中查看代码

var fillColor = UIColor.green
let maskLayer = CAShapeLayer()
let fillLayer = CAShapeLayer()

func changeBackgroundColor() {
    
    let animcolor = CABasicAnimation(keyPath: "fillColor")
    animcolor.fromValue = UIColor.green.cgColor
    animcolor.toValue = UIColor.orange.cgColor
    animcolor.duration = 1.0;
    animcolor.repeatCount = 0;
    animcolor.autoreverses = true
    fillLayer.add(animcolor, forKey: "fillColor")
    
}

// re-adjust the clipping path when the view bounds changes

let view = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
view.backgroundColor = UIColor.white

func createPaths() {
    let clipPath = UIBezierPath()
    clipPath.move(to: CGPoint(x: view.bounds.minX + 7.65, y: view.bounds.minY - 0.25))
    clipPath.addCurve(to: CGPoint(x: view.bounds.minX + 7.65, y: view.bounds.minY + 36.1),
                      controlPoint1: CGPoint(x: view.bounds.minX - 2.38, y: view.bounds.minY + 9.79),
                      controlPoint2: CGPoint(x: view.bounds.minX - 2.38, y: view.bounds.minY + 26.06))
    clipPath.addCurve(to: CGPoint(x: view.bounds.minX + 43.99, y: view.bounds.minY + 36.1),
                      controlPoint1: CGPoint(x: view.bounds.minX + 17.69, y: view.bounds.minY + 46.13),
                      controlPoint2: CGPoint(x: view.bounds.minX + 33.96, y: view.bounds.minY + 46.13))
    
    clipPath.addLine(to: CGPoint(x: view.bounds.minX + 43.99, y: view.bounds.minY + 36.1))
    clipPath.addLine(to: CGPoint(x: view.bounds.minX + 44.01, y: view.bounds.minY + 0.19))
    clipPath.addLine(to: CGPoint(x: view.bounds.minX + 7.58, y: view.bounds.minY + 0.19))
    
    // update layer paths
    fillLayer.path = clipPath.cgPath
    maskLayer.path = clipPath.cgPath
    
    fillLayer.fillColor = fillColor.cgColor
    fillLayer.fillRule = .evenOdd
    view.layer.addSublayer(fillLayer)
    maskLayer.fillRule = .evenOdd
    view.layer.mask = maskLayer
}

createPaths()