在 Swift 中为 drawRect 圆设置动画

Question

对于最初的问题，请查看这篇文章的edit-log。

我主要使用来自here 的代码，现在不确定在 outerCircleView(frame: ???): 中放入什么，以便它在我设置的约束内正确显示outerCircleView: UIButton.

var circleLayer: CAShapeLayer!

@IBDesignable // enables rendering in StoryBoard
class outerCircleView: UIButton {

override init(frame: CGRect) {
    super.init(frame: frame)

    // 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: 0.0, endAngle: CGFloat(M_PI * 2.0), clockwise: true)

    // Setup the CAShapeLayer with the path, colors, and line width
    circleLayer = CAShapeLayer()
    circleLayer.path = circlePath.CGPath
    circleLayer.fillColor = UIColor.clearColor().CGColor
    circleLayer.strokeColor = UIColor.redColor().CGColor
    circleLayer.lineWidth = 5.0;

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

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

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

func animateCircle(duration: NSTimeInterval) {
    // 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.addAnimation(animation, forKey: "animateCircle")
    }
}

func addCircleView() {

    // Create a new CircleView
    var circleView = outerCircleView(frame: ???)

    view.addSubview(circleView)

    // Animate the drawing of the circle over the course of 1 second
    circleView.animateCircle(1.0)
}

Answer 1

您链接的帖子详细说明了要做什么。

正如那篇文章中所解释的，您不需要使用 drawRect。 （所以调整你的代码的方法是用一种新的方法重新开始。） 相反，您需要创建一个 CAShapeLayer 并将其安装为视图的子层。然后，您可以使用 CABasicAnimation 为形状图层的 strokeEnd 属性设置动画。

编辑：

在您编辑的代码中，您没有设置形状图层的框架。

将以下代码添加到您的 layoutSubviews 方法中：（如果您还没有，请创建一个。）

override func layoutSubviews()
{
  var frame = self.layer.bounds
  circleLayer.frame = frame
}

将创建 circlePath 的代码留在 init 中，因为您只想执行一次。

将创建圆路径的代码移至layoutSubviews。您的视图的大小在初始化后经常发生变化。如果您的视图大小发生变化，layoutSubviews 会被调用，这正是您想要的。 （当用户旋转他们的手机时，您的视图可能会改变大小。如果发生这种情况，layoutSubviews 将再次被调用，您将生成一个新的、大小正确的圆形路径，这就是您想要做的。您想要调整您的圆圈每次你的视图改变大小时，分层并重建你的圆形路径。）