ios - 如何为 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

Just like changing the background color of a UIView is what I'm looking for.

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

如果您真的需要使用drawRect 和动画颜色，您可以考虑将您的UIView 分成两个UIView - 一个用于绘制背景层(您可以为其设置动画)，一个用于绘制自定义绘图。或者，您可以设置 CADisplayLink 以使用中间背景色在每一帧重新绘制 View ——但这在性能方面并不惊人。

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

如果您问这个问题是因为您使用两种不同的路径进行遮蔽和填充，请参阅我下面的(事后看来过于复杂)的回答。

---

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

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

此外，值得注意的是，您需要使用 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
}