平滑地动画 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）对象通过组合贝塞尔曲线创建近似圆的弧（我不记得它是否使用二次贝塞尔曲线或三次贝塞尔曲线。）整个圆由多个连接的贝塞尔曲线组成（“贝塞尔曲线”） “数学样条函数，而不是 UIBeizerPath，它是一个 UIKit 函数，可以创建可以包含贝塞尔路径的形状。）我似乎记得圆形的贝塞尔近似是由 4 个链接的三次贝塞尔曲线组成的。（如果您有兴趣，请参阅此答案以讨论其外观。）

这是我对其工作原理的理解。（我的细节可能有误，但无论如何它都说明了问题。）当您从 <= 1/4 整圆移动到 > 1/4 整圆时，arc 函数将使用第一个 1 三次贝塞尔曲线部分，然后2。在从<= 1/2圆过渡到> 1/2圆时，它将移动到3条贝塞尔曲线，并且在从<= 3/4圆过渡到> 3时/4 圆，将切换到 4 条贝塞尔曲线。

解决方案：

使用中风结束你走在正确的轨道上。始终将形状创建为完整的圆形，并将中风结束设置为小于 1 的值。这将为您提供圆形的一部分，但以一种可以平滑制作动画的方式。（您也可以为中风开始设置动画。）

我已经制作了动画圆圈，就像您使用 CAShapeLayer 和StrokeEnd 所描述的那样（这是很多年前的事，所以它是在 Objective-C 中。）我在这里写了一篇关于操作系统的文章，介绍了如何使用该方法在 UIImageView 上对蒙版进行动画处理，并且创建“时钟擦除”动画。如果您有完整阴影圆圈的图像，您可以在此处使用确切的方法。（您应该能够向任何 UIView 的内容层或其他层添加遮罩层，并为该层设置动画，如我的时钟擦除演示中所示。如果您需要破译 Objective-C 的帮助，请告诉我。

这是我创建的示例时钟擦除动画：

请注意，您可以使用此效果来遮罩任何图层，而不仅仅是图像视图。

编辑：我用该项目的 Swift 版本发布了时钟擦除动画问题和答案的更新。

您可以直接在https://github.com/DuncanMC/ClockWipeSwift访问新的存储库。

对于您的应用程序，我将设置您需要将其动画化为图层复合体的仪表部分。然后，您将基于 CAShapeLayer 的遮罩层附加到该复合层，并向该形状层添加圆弧路径，并为 StrokeEnd 设置动画，如我的示例项目中所示。我的时钟擦除动画显示的图像就像时钟指针从图层中心扫过一样。在您的情况下，您会将弧线置于图层底部中心的中心，并且仅在形状图层中使用半圆弧。以这种方式使用蒙版会给你的合成图层带来锐边裁剪。你会失去红色弧上的圆形端盖。要解决此问题，您必须将红色圆弧设置为动画，因为它自己的形状图层（使用描边结束）并单独设置渐变填充的圆弧描边结束动画。