画圆的动画

Question

我正在寻找一种动画制作圆图的方法。我已经能够创建圆，但是将其全部绘制在一起。

这是我的CircleView课：

import UIKit

class CircleView: UIView {

  override init(frame: CGRect) {

    super.init(frame: frame)

    self.backgroundColor = UIColor.clearColor()

  }

  required init(coder aDecoder: NSCoder) {

    fatalError("init(coder:) has not been implemented")

  }

  override func drawRect(rect: CGRect) {

    // Get the Graphics Context

    var context = UIGraphicsGetCurrentContext();

    // Set the circle outerline-width

    CGContextSetLineWidth(context, 5.0);

    // Set the circle outerline-colour

    UIColor.redColor().set()

    // Create Circle

    CGContextAddArc(context, (frame.size.width)/2, frame.size.height/2, (frame.size.width - 10)/2, 0.0, CGFloat(M_PI * 2.0), 1)

    // Draw

    CGContextStrokePath(context);

  }

}

这是我将其添加到视图控制器中的视图层次结构中的方法：

func addCircleView() {

    let diceRoll = CGFloat(Int(arc4random_uniform(7))*50)

    var circleWidth = CGFloat(200)

    var circleHeight = circleWidth

    // Create a new CircleView

    var circleView = CircleView(frame: CGRectMake(diceRoll, 0, circleWidth, circleHeight))

    view.addSubview(circleView)

}

是否可以在1秒钟内使圆的绘制动起来？

Answer 1

Mikes答案已更新为Swift 3.0var circleLayer: CAShapeLayer!override init(frame: CGRect) {    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: 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.clear.cgColor    circleLayer.strokeColor = UIColor.red.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) {        fatalError("init(coder:) has not been implemented")}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 addCircleView() {    let diceRoll = CGFloat(Int(arc4random_uniform(7))*50)    var circleWidth = CGFloat(200)    var circleHeight = circleWidth    // Create a new CircleView    let circleView = CircleView(frame: CGRect(x: diceRoll, y: 0, width: circleWidth, height: circleHeight))    //let test = CircleView(frame: CGRect(x: diceRoll, y: 0, width: circleWidth, height: circleHeight))    view.addSubview(circleView)    // Animate the drawing of the circle over the course of 1 second    circleView.animateCircle(duration: 1.0)}