动画绘制圆圈

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

最简单的方法是使用核心动画的强大功能为您完成大部分工作.要做到这一点,我们必须将您的圆形绘图代码从您的drawRect函数移动到CAShapeLayer.然后,我们可以用一个CABasicAnimation动画CAShapeLayer的strokeEnd从属性0.0到1.0.strokeEnd是这里神奇的重要组成部分; 来自文档:

结合strokeStart属性,此属性定义笔划路径的子区域.此属性中的值指示在strokeStart属性定义起点时沿着路径完成描边的相对点.值0.0表示路径的开头,而值1.0表示路径的结尾.其间的值沿路径长度线性解释.

如果我们设置strokeEnd到0.0,也不会画什么.如果我们设置它1.0,它将绘制一个完整的圆圈.如果我们设置它0.5,它将绘制一个半圈.等等

所以,首先,让我们CAShapeLayer在你CircleView的init函数中创建一个并将该图层添加到视图中sublayers(同样一定要删除该drawRect函数,因为图层现在将绘制圆圈):

let circleLayer: CAShapeLayer!

override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = UIColor.clearColor()

    // 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)
}

注意:我们设置circleLayer.strokeEnd = 0.0的是不立即绘制圆圈.

现在,让我们添加一个我们可以调用的函数来触发圆形动画:

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")
}

然后,我们需要做的是改变你的addCircleView功能,使得它触发当您添加动画CircleView到它superview:

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)

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

所有放在一起的东西应该是这样的:

注意:它不会像那样重复,它会在动画后保持整整一圈.

Answer 2

Mikes为Swift 3.0更新了答案

var 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)
}

Answer 3

迈克的回答太棒了!另一个很好而简单的方法是使用drawRect和setNeedsDisplay().看起来很迟钝,但不是:-)

我们想从顶部开始绘制一个圆圈,即-90°,结束于270°.圆的中心是(centerX,centerY),具有给定的半径.CurrentAngle是圆的终点的当前角度,从minAngle(-90)到maxAngle(270).

// MARK: Properties
let centerX:CGFloat = 55
let centerY:CGFloat = 55
let radius:CGFloat = 50

var currentAngle:Float = -90
let minAngle:Float = -90
let maxAngle:Float = 270

在drawRect中,我们指定圆圈应该如何显示:

override func drawRect(rect: CGRect) {

    let context = UIGraphicsGetCurrentContext()

    let path = CGPathCreateMutable()

    CGPathAddArc(path, nil, centerX, centerY, radius, CGFloat(GLKMathDegreesToRadians(minAngle)), CGFloat(GLKMathDegreesToRadians(currentAngle)), false)

    CGContextAddPath(context, path)
    CGContextSetStrokeColorWithColor(context, UIColor.blueColor().CGColor)
    CGContextSetLineWidth(context, 3)
    CGContextStrokePath(context)
}

现在的问题是,由于currentAngle没有改变,因此圆圈是静态的,甚至不显示,因为currentAngle = minAngle.

然后我们创建一个计时器,每当该计时器触发时,我们都会增加currentAngle.在班级的顶部,添加两次火灾之间的时间:

let timeBetweenDraw:CFTimeInterval = 0.01

在你的init中,添加计时器:

NSTimer.scheduledTimerWithTimeInterval(timeBetweenDraw, target: self, selector: #selector(updateTimer), userInfo: nil, repeats: true)

我们可以添加定时器触发时将调用的函数:

func updateTimer() {

    if currentAngle < maxAngle {
        currentAngle += 1
    }
}

遗憾的是,在运行应用程序时,没有任何内容显示,因为我们没有指定它应该再次绘制的系统.这是通过调用setNeedsDisplay()来完成的.这是更新的计时器功能:

func updateTimer() {

    if currentAngle < maxAngle {
        currentAngle += 1
        setNeedsDisplay()
    }
}

_ _ _

您需要的所有代码总结如下:

import UIKit
import GLKit

class CircleClosing: UIView {

    // MARK: Properties
    let centerX:CGFloat = 55
    let centerY:CGFloat = 55
    let radius:CGFloat = 50

    var currentAngle:Float = -90

    let timeBetweenDraw:CFTimeInterval = 0.01

    // MARK: Init
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

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

    func setup() {
        self.backgroundColor = UIColor.clearColor()
        NSTimer.scheduledTimerWithTimeInterval(timeBetweenDraw, target: self, selector: #selector(updateTimer), userInfo: nil, repeats: true)
    }

    // MARK: Drawing
    func updateTimer() {

        if currentAngle < 270 {
            currentAngle += 1
            setNeedsDisplay()
        }
    }

    override func drawRect(rect: CGRect) {

        let context = UIGraphicsGetCurrentContext()

        let path = CGPathCreateMutable()

        CGPathAddArc(path, nil, centerX, centerY, radius, -CGFloat(M_PI/2), CGFloat(GLKMathDegreesToRadians(currentAngle)), false)

        CGContextAddPath(context, path)
        CGContextSetStrokeColorWithColor(context, UIColor.blueColor().CGColor)
        CGContextSetLineWidth(context, 3)
        CGContextStrokePath(context)
    }
}

如果要更改速度,只需修改updateTimer函数或调用此函数的速率.此外,您可能希望在圆圈完成后使计时器无效,我忘了这样做:-)

注意:要添加圆你的故事板,只需添加一个视图,选择它,去它的身份检查,并作为类,指定CircleClosing.

干杯! BRO

Answer 4

如果你想要一个完成处理程序,这是另一个类似于Mike S的解决方案,在Swift 3.0中完成

func animateCircleFull(duration: TimeInterval) {
    CATransaction.begin()
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.duration = duration
    animation.fromValue = 0
    animation.toValue = 1
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    circleLayer.strokeEnd = 1.0
    CATransaction.setCompletionBlock {
        print("animation complete")
    }
    // Do the actual animation
    circleLayer.add(animation, forKey: "animateCircle")
    CATransaction.commit()
}

使用完成处理程序,您可以通过递归调用相同的函数再次运行动画(这看起来不太好),或者您可以使用反向函数来连续链接直到满足条件, 例如:

func animate(duration: TimeInterval){
    self.isAnimating = true
    self.animateCircleFull(duration: 1)
}

func endAnimate(){
    self.isAnimating = false
}

func animateCircleFull(duration: TimeInterval) {
    if self.isAnimating{
        CATransaction.begin()
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = duration
        animation.fromValue = 0
        animation.toValue = 1
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        circleLayer.strokeEnd = 1.0
        CATransaction.setCompletionBlock { 
            self.animateCircleEmpty(duration: duration)
        }
        // Do the actual animation
        circleLayer.add(animation, forKey: "animateCircle")
        CATransaction.commit()
    }
}

func animateCircleEmpty(duration: TimeInterval){
    if self.isAnimating{
        CATransaction.begin()
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = duration
        animation.fromValue = 1
        animation.toValue = 0
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        circleLayer.strokeEnd = 0
        CATransaction.setCompletionBlock {
            self.animateCircleFull(duration: duration)
        }
        // Do the actual animation
        circleLayer.add(animation, forKey: "animateCircle")
        CATransaction.commit()
    }
}

为了使它更加漂亮,你可以像这样改变动画的方向:

 func setCircleClockwise(){
    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)
    self.circleLayer.removeFromSuperlayer()
    self.circleLayer = formatCirle(circlePath: circlePath)
    self.layer.addSublayer(self.circleLayer)
}

func setCircleCounterClockwise(){
    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: false)
    self.circleLayer.removeFromSuperlayer()
    self.circleLayer = formatCirle(circlePath: circlePath)
    self.layer.addSublayer(self.circleLayer)
}

func formatCirle(circlePath: UIBezierPath) -> CAShapeLayer{
    let circleShape = CAShapeLayer()
    circleShape.path = circlePath.cgPath
    circleShape.fillColor = UIColor.clear.cgColor
    circleShape.strokeColor = UIColor.red.cgColor
    circleShape.lineWidth = 10.0;
    circleShape.strokeEnd = 0.0
    return circleShape
}

func animate(duration: TimeInterval){
    self.isAnimating = true
    self.animateCircleFull(duration: 1)
}

func endAnimate(){
    self.isAnimating = false
}

func animateCircleFull(duration: TimeInterval) {
    if self.isAnimating{
        CATransaction.begin()
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = duration
        animation.fromValue = 0
        animation.toValue = 1
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        circleLayer.strokeEnd = 1.0
        CATransaction.setCompletionBlock {
            self.setCircleCounterClockwise()
            self.animateCircleEmpty(duration: duration)
        }
        // Do the actual animation
        circleLayer.add(animation, forKey: "animateCircle")
        CATransaction.commit()
    }
}

func animateCircleEmpty(duration: TimeInterval){
    if self.isAnimating{
        CATransaction.begin()
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = duration
        animation.fromValue = 1
        animation.toValue = 0
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        circleLayer.strokeEnd = 0
        CATransaction.setCompletionBlock {
            self.setCircleClockwise()
            self.animateCircleFull(duration: duration)
        }
        // Do the actual animation
        circleLayer.add(animation, forKey: "animateCircle")
        CATransaction.commit()
    }
}

Answer 5

更新 @Mike S\'s 对Swift 5的回答

\n\n

适用于frame manually\xe3\x80\x81 storyboard setup\xe3\x80\x81autolayout setup

\n\n

class CircleView: UIView {\n\n    let circleLayer: CAShapeLayer = {\n        // Setup the CAShapeLayer with the path, colors, and line width\n        let circle = CAShapeLayer()\n        circle.fillColor = UIColor.clear.cgColor\n        circle.strokeColor = UIColor.red.cgColor\n        circle.lineWidth = 5.0\n\n        // Don\'t draw the circle initially\n        circle.strokeEnd = 0.0\n        return circle\n    }()\n\n    override init(frame: CGRect) {\n        super.init(frame: frame)\n        setup()\n    }\n\n    required init?(coder: NSCoder) {\n        super.init(coder: coder)\n        setup()\n    }\n\n    func setup(){\n        backgroundColor = UIColor.clear\n\n        // Add the circleLayer to the view\'s layer\'s sublayers\n        layer.addSublayer(circleLayer)\n    }\n\n    override func layoutSubviews() {\n        super.layoutSubviews()\n        // Use UIBezierPath as an easy way to create the CGPath for the layer.\n        // The path should be the entire circle.\n        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(Double.pi * 2.0), clockwise: true)\n\n        circleLayer.path = circlePath.cgPath\n    }\n\n    func animateCircle(duration t: TimeInterval) {\n        // We want to animate the strokeEnd property of the circleLayer\n        let animation = CABasicAnimation(keyPath: "strokeEnd")\n\n        // Set the animation duration appropriately\n        animation.duration = t\n\n        // Animate from 0 (no circle) to 1 (full circle)\n        animation.fromValue = 0\n        animation.toValue = 1\n\n        // Do a linear animation (i.e. the speed of the animation stays the same)\n        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)\n\n        // Set the circleLayer\'s strokeEnd property to 1.0 now so that it\'s the\n        // right value when the animation ends.\n        circleLayer.strokeEnd = 1.0\n\n        // Do the actual animation\n        circleLayer.add(animation, forKey: "animateCircle")\n    }\n}\n

\n\n

用法 ：

\n\n

frame manually\xe3\x80\x81 storyboard setup\xe3\x80\x81的示例代码autolayout setup

\n\n

class ViewController: UIViewController {\n\n    @IBOutlet weak var circleV: CircleView!\n\n    override func viewDidLoad() {\n        super.viewDidLoad()\n    }\n\n    @IBAction func animateFrame(_ sender: UIButton) {\n\n\n        let diceRoll = CGFloat(Int(arc4random_uniform(7))*30)\n        let circleEdge = CGFloat(200)\n\n        // Create a new CircleView\n        let circleView = CircleView(frame: CGRect(x: 50, y: diceRoll, width: circleEdge, height: circleEdge))\n\n        view.addSubview(circleView)\n\n        // Animate the drawing of the circle over the course of 1 second\n        circleView.animateCircle(duration: 1.0)\n\n\n    }\n\n    @IBAction func animateAutolayout(_ sender: UIButton) {\n\n        let circleView = CircleView(frame: CGRect.zero)\n        circleView.translatesAutoresizingMaskIntoConstraints = false\n        view.addSubview(circleView)\n        circleView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true\n        circleView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true\n        circleView.widthAnchor.constraint(equalToConstant: 250).isActive = true\n        circleView.heightAnchor.constraint(equalToConstant: 250).isActive = true\n        // Animate the drawing of the circle over the course of 1 second\n        circleView.animateCircle(duration: 1.0)\n    }\n\n    @IBAction func animateStoryboard(_ sender: UIButton) {\n        // Animate the drawing of the circle over the course of 1 second\n        circleV.animateCircle(duration: 1.0)\n\n    }\n\n}\n

\n