Zeichnung eines Kreises animieren

Der einfachste Weg dies zu tun ist, um die Leistung des core-animation zu tun, die meiste Arbeit für Sie. Das zu tun, müssen wir, um zu bewegen, Ihren Kreis zeichnen-code von Ihrem drawRect - Funktion, um eine CAShapeLayer. Dann können wir eine CABasicAnimation zu animieren CAShapeLayer's strokeEnd Eigenschaft von 0.0 zu 1.0. strokeEnd ist ein großer Teil der Magie hier; von den docs:

Kombiniert mit der strokeStart Eigenschaft, diese Eigenschaft definiert die
subregion der Pfad zu streicheln. Der Wert dieser Eigenschaft zeigt an,
die relative Punkt entlang des Pfades, an der Oberfläche zu streicheln, während
die strokeStart-Eigenschaft definiert den Ausgangspunkt. Ein Wert von 0,0
steht am Anfang des Weges, während ein Wert von 1,0 stellt
das Ende des Weges. Werte dazwischen werden Linear interpretiert zusammen
die Länge der Strecke.

Wenn wir strokeEnd zu 0.0es wird nicht alles zeichnen. Wenn wir es zu 1.0es zeichne einen Kreis. Wenn wir es zu 0.5es zeichne einen Halbkreis. etc.

So, um zu beginnen, ermöglicht das erstellen einer CAShapeLayer in Ihrem CircleView's init - Funktion und hinzufügen, dass die Schicht zu der Ansicht sublayers (auch sicher sein, entfernen Sie die drawRect Funktion, da die Schicht wird die Zeichnung der Kreis jetzt):

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

Hinweis: Wir setzen circleLayer.strokeEnd = 0.0 so, dass der Kreis nicht gezeichnet sofort.

Nun fügen wir eine Funktion, die wir aufrufen können, um die trigger-animation Kreis:

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

Dann, alles, was wir tun müssen, ist zu ändern Sie Ihre addCircleView - Funktion, so dass es auslöst, wenn die animation, die Sie hinzufügen, die CircleView seiner 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)
}

All das zusammen sollte in etwa so Aussehen:

Hinweis: Es nicht wiederholen werde, wie, dass, wird es bleiben, ein Kreis, nachdem er animiert wird.

InformationsquelleAutor der Antwort Mike S

Mike ' s Antwort ist Super!!! Ein weiteres nettes und einfache Möglichkeit, es zu tun ist, verwenden Sie drawRect kombiniert mit setNeedsDisplay(). Es scheint laggy, aber seiner nicht 🙂

Wollen wir einen Kreis zeichnen, ausgehend von der Spitze, die -90° und endet bei 270°. Der Mitte des Kreises ist (centerX, centerY), mit einem bestimmten radius. CurrentAngle ist der aktuelle Winkel der Endpunkt des Kreises, die von minAngle (-90) zu 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

In drawRect, die wir angeben, wie der Kreis soll anzeigen :

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

Das problem ist, dass gerade jetzt, als currentAngle ist nicht zu ändern, der Kreis ist statisch, und nicht einmal zeigen, wie currentAngle = minAngle.

Erstellen wir einen timer und wenn der timer feuert, erhöhen wir currentAngle. An der Spitze Ihrer Klasse fügen Sie das timing zwischen zwei feuern :

let timeBetweenDraw:CFTimeInterval = 0.01

In Ihrer init, fügen Sie den timer :

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

Können wir die Funktion, die aufgerufen wird, wenn der timer feuert :

func updateTimer() {

    if currentAngle < maxAngle {
        currentAngle += 1
    }
}

Leider beim ausführen der app, wird nichts angezeigt, weil wir nicht angeben, das system, sollte es wieder zu zeichnen. Dies geschieht durch Aufruf von setNeedsDisplay(). Hier ist die aktualisierte timer-Funktion :

func updateTimer() {

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

_
_
_

Alle der code, den Sie benötigen, summiert sich hier :

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

Möchten Sie die Geschwindigkeit ändern, ändern Sie einfach die updateTimer-Funktion, oder die rate, mit der diese Funktion aufgerufen wird. Auch, möchten Sie vielleicht, um die Unwirksamkeit der timer sobald der Kreis vollständig ist, die ich vergaß zu tun 🙂

NB: fügen Sie den Kreis in Ihrem storyboard, nur eine Ansicht hinzufügen, wählen Sie es aus, gehen zu seinen Identity Inspectorund als Klassegeben Sie CircleClosing.

Prost! bRo

InformationsquelleAutor der Antwort bRo