动画圆形 UIBezierPath 不四舍五入的笔划

Posted 2023-03-13

【中文标题】动画圆形 UIBezierPath 不四舍五入的笔划

【英文标题】：animating circular UIBezierPath without rounding the stroke

【发布时间】：2015-03-30 06:05:33

【问题描述】：

我正在尝试向我的UIBezierPath 添加动画，但我想保留当前fillPath 正在创建的硬边，这是结果应该是什么样子的屏幕截图：

我确实设法使用此代码的略微修改版本使一个动画正常工作：

// create an object that represents how the curve 

//应该显示在屏幕上

let progressLine = CAShapeLayer()
progressLine.path = ovalPath.CGPath
progressLine.strokeColor = UIColor.blueColor().CGColor
progressLine.fillColor = UIColor.clearColor().CGColor
progressLine.lineWidth = 10.0
progressLine.lineCap = kCALineCapRound

// add the curve to the screen
self.view.layer.addSublayer(progressLine)

// create a basic animation that animates the value 'strokeEnd'
// from 0.0 to 1.0 over 3.0 seconds
let animateStrokeEnd = CABasicAnimation(keyPath: "strokeEnd")
animateStrokeEnd.duration = 3.0
animateStrokeEnd.fromValue = 0.0
animateStrokeEnd.toValue = 1.0

// add the animation
progressLine.addAnimation(animateStrokeEnd, forKey: "animate stroke end animation")

以上代码来自：http://mathewsanders.com/animations-in-swift-part-two/

它确实有效，但它创建的笔画是圆角的。

我能找到的关于这个问题的唯一示例/教程和其他问题是使用 CAShapes。我目前没有使用 CAShapes 或图层。 （我不知道是否需要用这个来制作动画，但我想我会问）

这是我当前的代码（没有任何动画）。来画我的小圆图。

class CircleChart: UIView 

var percentFill: Float = 99.00 
    didSet 
        // Double check that it's less or equal to 100 %
        if percentFill <=  maxPercent 
            //the view needs to be refreshed
            setNeedsDisplay()
        
    


var fillColor: UIColor = UIColor.formulaBlueColor()
var chartColor: UIColor = UIColor.formulaLightGrayColor()

override func drawRect(rect: CGRect) 
    // Define the center.
    let center = CGPoint(x:bounds.width/2, y: bounds.height/2)

    // Define the radius
    let radius: CGFloat = max(bounds.width, bounds.height)

    // Define the width of the circle
    let arcWidth: CGFloat = 10

    // Define starting and ending angles (currently unused)
    let startAngle: CGFloat = degreesToRadians(-90)
    let endAngle: CGFloat = degreesToRadians(270)

    // 5
    var path = UIBezierPath(arcCenter: center,
        radius: bounds.width/2 - arcWidth/2,
        startAngle: startAngle,
        endAngle: endAngle,
        clockwise: true)

    // 6
    path.lineWidth = arcWidth
    chartColor.setStroke()
    path.stroke()

    //Draw the fill-part

    //calculate the arc for each per percent
    let arcLengthPerPercent = degreesToRadians(360/100)

    //then multiply out by the actual percent
    let fillEndAngle = arcLengthPerPercent * CGFloat(percentFill) + startAngle


    //2 - draw the outer arc
    var fillPath = UIBezierPath(arcCenter: center,
        radius: bounds.width/2 - arcWidth/2,
        startAngle: startAngle,
        endAngle: fillEndAngle,
        clockwise: true)

    //3 - draw the inner arc
    fillPath.addArcWithCenter(center,
        radius: bounds.width/2 - arcWidth/2,
        startAngle: fillEndAngle,
        endAngle: startAngle,
        clockwise: false)

    //4 - close the path
    fillPath.closePath()

    fillColor.setStroke()
    fillPath.lineWidth = arcWidth
    fillPath.stroke()

为 fillPath 设置动画的最佳方式是什么？还是我需要重做 CAShapes 和图层中的所有内容才能使其正常工作？

任何帮助将不胜感激。

【参考方案1】：

如果你想要它，为什么要使用progressLine.lineCap = kCALineCapRound？只需删除该行，您将获得默认的对接端 (kCALineCapButt)。

【讨论】：

完美运行。谢谢。几个小时以来，我都觉得自己像个白痴一样搞砸了……不过，直到超过 8 分钟，我才能接受答案。

@MarkL，有时候，它只是需要新鲜的眼睛。