UIBezierPath + CAShapeLayer - 动画填充一个圆圈[重复]

我正在尝试对 CAShapeLayer 的路径进行动画处理，以便获得圆形“填充”到特定数量的效果。

问题

它“有效”，但不是AS尽管我认为它可能很顺利，但我想对其进行一些缓和。但因为我正在单独为每个 % 设置动画，所以我不确定现在是否可行。所以我正在寻找可以解决这个问题的替代方案！

视觉解释

首先——这里是我试图实现的动画的一些“帧”（参见图像——圆圈填充从 0% 到 25%）

Code

我创建绿色描边（外部）：

let ovalPath = UIBezierPath(ovalInRect: CGRectMake(20, 20, 240, 240))
let circleStrokeLayer = CAShapeLayer()
circleStrokeLayer.path = ovalPath.CGPath
circleStrokeLayer.lineWidth = 20
circleStrokeLayer.fillColor = UIColor.clearColor().CGColor
circleStrokeLayer.strokeColor = colorGreen.CGColor

containerView.layer.addSublayer(circleStrokeLayer)

我创建填充形状的初始路径（内部）：

let filledPathStart = UIBezierPath(arcCenter: CGPoint(x: 140, y: 140), radius: 120, startAngle: startAngle, endAngle: Math().percentToRadians(0), clockwise: true)
filledPathStart.addLineToPoint(CGPoint(x: 140, y: 140))
filledLayer = CAShapeLayer()
filledLayer.path = filledPathStart.CGPath
filledLayer.fillColor = colorGreen.CGColor
containerView.layer.addSublayer(filledLayer)

然后，我使用 for 循环和 CABasicAnimations 数组来制作动画。

var animations: [CABasicAnimation] = [CABasicAnimation]()

func animate() {

    for val in 0...25 {
        let morph = CABasicAnimation(keyPath: "path")
        morph.duration = 0.01
        let filledPathEnd = UIBezierPath(arcCenter: CGPoint(x: 140, y: 140), radius: 120, startAngle: startAngle, endAngle: Math().percentToRadians(CGFloat(val)), clockwise: true)
        filledPathEnd.addLineToPoint(CGPoint(x: 140, y: 140))

        morph.delegate = self
        morph.toValue = filledPathEnd.CGPath
        animations.append(morph)
    }

    applyNextAnimation()
}

func applyNextAnimation() {

    if animations.count == 0 {
        return
    }

    let nextAnimation = animations[0]
    animations.removeAtIndex(0)
    filledLayer.addAnimation(nextAnimation, forKey: nil)
}

override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
    filledLayer.path = (anim as! CABasicAnimation).toValue as! CGPath
    applyNextAnimation()
}

不要尝试创建一大堆单独的动画。 CAShapeLayer 有一个描边开始和描边结束属性。动画that.

技巧是在形状图层中安装整个圆的弧，然后创建一个 CABasicAnimation，将 shapeEnd 从 0 动画到 1（将填充动画从 0% 动画到 100%）或任何您需要的值。

您可以在该动画上应用您想要的任何时间。

我在 Github 上有一个项目（恐怕是 Objective-C 的项目），其中包含使用这种技术的“时钟擦除”动画。它看起来是这样的：

（这是一个gif，看起来有点粗糙。实际的iOS动画是相当流畅的。）

链接如下。在自述文件中查找“时钟擦除”动画。

iOS-CAAnimation-group-demo

时钟擦除动画将形状图层安装为图像视图图层上的蒙版。如果您想要这样做，您可以直接绘制形状图层。