iOS动画绘制多个圆，只显示一个

Question

基于此问题的答案:Animate drawing of a circle

我现在想在同一屏幕上同时在两个不同的 View 中显示其中两个圆圈。如果我只想为一个圆制作动画，那么没有问题。但是，如果我尝试添加第二个，则只有第二个可见。

这是 Circle 类:

import UIKit

var circleLayer: CAShapeLayer!

class Circle: UIView {

init(frame: CGRect, viewLayer: CALayer) {

    super.init(frame: frame)
    self.backgroundColor = UIColor.clear

    // Use UIBezierPath as an easy way to create the CGPath for the layer.
    // The path should be the entire circle.
    let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0), radius: (frame.size.width - 10)/2, startAngle: (3.0 * .pi)/2.0, endAngle: CGFloat((3.0 * .pi)/2.0 + (.pi * 2.0)), clockwise: true)

    // Setup the CAShapeLayer with the path, colors, and line width
    circleLayer = CAShapeLayer()
    circleLayer.path = circlePath.cgPath
    circleLayer.fillColor = UIColor.clear.cgColor
    circleLayer.strokeColor = UIColor.green.cgColor
    circleLayer.lineWidth = 8.0;

    // Don't draw the circle initially
    circleLayer.strokeEnd = 0.0

    // Add the circleLayer to the view's layer's sublayers
    viewLayer.addSublayer(circleLayer)
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

func animateCircle(duration: TimeInterval) {

    // We want to animate the strokeEnd property of the circleLayer
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    // Set the animation duration appropriately
    animation.duration = duration

    // Animate from 0 (no circle) to 1 (full circle)
    animation.fromValue = 0
    animation.toValue = 1

    // Do a linear animation (i.e The speed of the animation stays the same)
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)

    // Set the circleLayer's strokeEnd property to 1.0 now so that it's the
    // Right value when the animation ends
    circleLayer.strokeEnd = 1.0

    // Do the actual animation
    circleLayer.add(animation, forKey: "animateCircle")
}

func removeCircle() {
    circleLayer.strokeEnd = 0.0
}

}

这是我从 ViewController 中调用它的方法:

var rythmTimer: Circle?
var adrenalineTimer: Circle?

override func viewDidLoad() {

// Create two timers as circles
    self.rythmTimer = Circle(frame: CGRect(x: 0, y: 0, width: 100, height: 100), viewLayer: view1.layer)
    if let rt = rythmTimer {
        view1.addSubview(rt)
        rt.center = CGPoint(x: self.view1.bounds.midX, y: self.view1.bounds.midY);
    }

    self.adrenalineTimer = Circle(frame: CGRect(x: 0, y: 0, width: 100, height: 100), viewLayer: view2.layer)

    if let at = adrenalineTimer {
        view2.addSubview(at)
        at.center = CGPoint(x: self.view2.bounds.midX, y: self.view2.bounds.midY)
    }
}

如果我删除 adrenalineTimer 的代码，我可以看到 rythmTimer 绘制的圆圈。如果我保留它，rythmTimer 将显示在 view2 而不是 view1 中，并且将具有 rythmTimer 的持续时间/颜色

Answer 1

您似乎设置了错误原点的圆形路径。此外，您可以在将圆圈放置在 View 上之前执行此操作。

将此代码添加到动画函数中:

func animateCircle(duration: TimeInterval) {

    let circlePath = UIBezierPath(arcCenter: CGPoint(x: self.frame.origin.x + self.frame.size.width / 2, y: self.frame.origin.y + self.frame.size.height / 2), radius: (frame.size.width - 10)/2, startAngle: (3.0 * .pi)/2.0, endAngle: CGFloat((3.0 * .pi)/2.0 + (.pi * 2.0)), clockwise: true)

    circleLayer.path = circlePath.cgPath

    // We want to animate the strokeEnd property of the circleLayer
    let animation = CABasicAnimation(keyPath: "strokeEnd")

    ...