ios - 平滑动画 CAShapeLayer 路径

Question

我正在尝试制作 Gauge UIView 以尽可能接近地模仿以下图像

    func gradientBezierPath(percent: CGFloat) ->  UIBezierPath {
        // vary this to move the start of the arc
        let startAngle = CGFloat(180).toRadians()//-CGFloat.pi / 2  // This corresponds to 12 0'clock
        // vary this to vary the size of the segment, in per cent
        let proportion = CGFloat(50 * percent)
        let centre = CGPoint (x: self.frame.size.width / 2, y: self.frame.size.height / 2)
        let radius = self.frame.size.height/4//self.frame.size.width / (CGFloat(130).toRadians())
        let arc = CGFloat.pi * 2 * proportion / 100 // i.e. the proportion of a full circle

        // Start a mutable path
        let cPath = UIBezierPath()
        // Move to the centre
        cPath.move(to: centre)
        // Draw a line to the circumference
        cPath.addLine(to: CGPoint(x: centre.x + radius * cos(startAngle), y: centre.y + radius * sin(startAngle)))
        // NOW draw the arc
        cPath.addArc(withCenter: centre, radius: radius, startAngle: startAngle, endAngle: arc + startAngle, clockwise: true)
        // Line back to the centre, where we started (or the stroke doesn't work, though the fill does)
        cPath.addLine(to: CGPoint(x: centre.x, y: centre.y))
        
        return cPath
    }
    
    override func draw(_ rect: CGRect) {
        
//        let endAngle = percent == 1.0 ? 0 : (percent * 180) + 180
        
        path = UIBezierPath(arcCenter: CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2),
                            radius: self.frame.size.height/4,
                            startAngle: CGFloat(180).toRadians(),
                            endAngle: CGFloat(0).toRadians(),
                            clockwise: true)
        
        percentPath = UIBezierPath(arcCenter: CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2),
                                   radius: self.frame.size.height/4,
                                   startAngle: CGFloat(180).toRadians(),
                                   endAngle: CGFloat(0).toRadians(),
                                   clockwise: true)
        
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = self.path.cgPath
        shapeLayer.strokeColor = UIColor(red: 110 / 255, green: 78 / 255, blue: 165 / 255, alpha: 1.0).cgColor
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineWidth = 5.0
        shapeLayer.lineCap = .round
        self.layer.addSublayer(shapeLayer)
        
        percentLayer.path = self.percentPath.cgPath
        percentLayer.strokeColor = UIColor(red: 255 / 255, green: 93 / 255, blue: 41 / 255, alpha: 1.0).cgColor
        percentLayer.fillColor = UIColor.clear.cgColor
        percentLayer.lineWidth = 8.0
//        percentLayer.strokeEnd = CGFloat(percent)
        percentLayer.lineCap = .round
        self.layer.addSublayer(percentLayer)
        
        // n.b. as @MartinR points out `cPath.close()` does the same!

        // circle shape
        circleShape.path = gradientBezierPath(percent: 1.0).cgPath//cPath.cgPath
        circleShape.strokeColor = UIColor.clear.cgColor
        circleShape.fillColor = UIColor.green.cgColor
        self.layer.addSublayer(circleShape)
        
        gradient.frame = frame
        gradient.mask = circleShape
        gradient.type = .radial
        gradient.colors = [UIColor(red: 255 / 255, green: 93 / 255, blue: 41 / 255, alpha: 0.0).cgColor,
                           UIColor(red: 255 / 255, green: 93 / 255, blue: 41 / 255, alpha: 0.0).cgColor,
                           UIColor(red: 255 / 255, green: 93 / 255, blue: 41 / 255, alpha: 0.4).cgColor]
        gradient.locations = [0, 0.35, 1]
        gradient.startPoint = CGPoint(x: 0.49, y: 0.55) // increase Y adds more orange from top to bottom
        gradient.endPoint = CGPoint(x: 0.98, y: 1) // increase x pushes orange out more to edges
        self.layer.addSublayer(gradient)

        //myTextLayer.string = "\(Int(percent * 100))"
        myTextLayer.backgroundColor = UIColor.clear.cgColor
        myTextLayer.foregroundColor = UIColor.white.cgColor
        myTextLayer.fontSize = 85.0
        myTextLayer.frame = CGRect(x: (self.frame.size.width / 2) - (self.frame.size.width/8), y: (self.frame.size.height / 2) - self.frame.size.height/8, width: 120, height: 120)
        self.layer.addSublayer(myTextLayer)
        
    }

这会在一个非常接近我的目标的操场上产生以下内容:

当尝试对仪表值的变化进行动画处理时，问题就出现了。我可以为 percentLayer 设置动画很容易修改 strokeEnd , 但是为 circleShape.path 设置动画如果仪表的百分比值发生较大变化，渐变会导致一些不平滑的动画。这是我用来为两个图层设置动画的函数(现在每 2 秒在计时器上调用一次以模拟仪表值的变化)。

    func randomPercent() {
        let random = CGFloat.random(in: 0.0...1.0)
        
        // Animate the percent layer
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = percentLayer.strokeEnd
        animation.toValue = random
        animation.duration = 1.5
        percentLayer.strokeEnd = random
        percentLayer.add(animation, forKey: nil)
        
        // Animate the gradient layer
        let newShapePath = gradientBezierPath(percent: random)
        let gradientAnimation = CABasicAnimation(keyPath: "path")
        gradientAnimation.duration = 1.5
        gradientAnimation.toValue = newShapePath
        gradientAnimation.fromValue = circleShape.path
        circleShape.path = newShapePath.cgPath
        self.circleShape.add(gradientAnimation, forKey: nil)
        
        myTextLayer.string = "\(Int(random * 100))"
    }

请注意，当动画通过值的微小变化完成时，动画看起来不错。但是，当发生较大变化时，渐变动画看起来一点也不自然。关于如何改进这一点的任何想法？或者是否可以为不同的 keyPath 设置动画以获得更好的性能？任何帮助将不胜感激!

Answer 1

您不能使用贝塞尔路径 addArc()动画圆弧和改变圆弧距离的函数。
问题是控制点。为了使动画顺利运行，开始和结束形状必须具有相同数量和类型的控制点。在幕后，UIBezierPath(和 CGPath)对象通过组合贝塞尔曲线创建近似圆的弧(我不记得它是使用二次贝塞尔曲线还是三次贝塞尔曲线。)整个圆由多条连接的贝塞尔曲线组成(“Bezier ” 数学样条函数，而不是 UIBeizerPath，它是一个 UIKit 函数，它创建可以包含贝塞尔路径的形状。)我似乎记得圆的贝塞尔近似是由 4 条链接的三次贝塞尔曲线组成的。 (如果您有兴趣，请参阅 this SO answer 讨论它的外观。)
这是我对其工作原理的理解。 (我的细节可能有误，但无论如何它说明了问题。)当您从 <= 1/4 整圆移动到 > 1/4 整圆时，弧函数将使用前 1 个三次贝塞尔曲线部分，然后是 2。在从 <= 1/2 圆到 > 1/2 圆的过渡处，它将移动到 3 条贝塞尔曲线，并且在从 <= 3/4 圆到 > 3 的过渡处/4 圈，它会切换到 4 条贝塞尔曲线。
解决方案:
使用 strokeEnd，您走在了正确的轨道上。始终将您的形状创建为完整的圆，并将 strokeEnd 设置为小于 1 的值。这将给您一个圆的一部分，但在某种程度上，您 可以动画流畅。 (您也可以为 strokeStart 设置动画。)
我用 CAShapeLayer 和 strokeEnd 为你描述的动画圈(这是几年前的事，所以它是在 Objective-C 中的。)我写了 an article here on OS on using the approach to animate a mask on a UIImageView and create a "clock wipe" animation .如果您有完整阴影圆圈的图像，则可以在此处使用该精确方法。 (您应该能够将 mask 层添加到任何 UIView 的内容层或其他层，并像在我的时钟删除演示中那样为该层设置动画。如果您在解读 Objective-C 时需要帮助，请告诉我。
这是我创建的示例时钟删除动画:

请注意，您可以使用此效果来 mask 任何图层，而不仅仅是 ImageView 。
编辑:我用项目的 Swift 版本发布了我的时钟删除动画问题和答案的更新。
您可以通过 https://github.com/DuncanMC/ClockWipeSwift 直接访问新的 repo .
对于您的应用程序，我将设置您需要动画的仪表部分作为图层的组合。然后，您将基于 CAShapeLayer 的蒙版图层附加到该复合图层，并向该形状图层添加一个圆弧路径，并为 strokeEnd 设置动画，如我的示例项目所示。我的时钟删除动画显示图像，就像从图层中心扫过时钟指针一样。在您的情况下，您会将弧线放在图层的底部中心，并且只在形状图层中使用半圆弧。以这种方式使用蒙版将为您的合成图层提供锐利的裁剪。你会失去红色弧上的圆形端盖。要解决这个问题，您必须将红色弧线设置为它自己的形状图层(使用 strokeEnd)并分别为渐变填充的弧线 strokeEnd 设置动画。