Swift 中的动画 drawRect 圆

Question

对于初始问题，请查看此 post 的 edit-log。

我主要使用 here 中的代码，现在不确定要在 outerCircleView(frame: ???): 中放入什么，以便显示正确地在我为 outerCirvleView: 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

post你link说的详细点。

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

编辑：

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

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

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

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

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

Swift 中的动画 drawRect 圆

animate drawRect circle in Swift

animation

geometry

drawrect

ios

swift

编辑：