Animer le dessin d'un cercle

La façon la plus simple pour ce faire est d'utiliser le pouvoir de core animation à faire la plupart du travail pour vous. Pour ce faire, nous allons avoir à déplacer votre cercle de dessin de votre code d' drawRect fonction à un CAShapeLayer. Ensuite, nous pouvons utiliser une CABasicAnimation pour animer CAShapeLayer's strokeEnd propriété de 0.0 à 1.0. strokeEnd est une grande partie de la magie ici, de la les docs:

Combiné avec le strokeStart de la propriété, cette propriété définit la
sous-région de la trajectoire de course. La valeur de cette propriété indique
le point relatif le long du chemin pour finir tout en se caressant
le strokeStart propriété définit le point de départ. Une valeur de 0,0
représente le début de la voie, alors qu'une valeur de 1,0 représente
la fin du chemin. Les valeurs intermédiaires sont interprétées de façon linéaire le long
la longueur du chemin.

Si l'on strokeEnd à 0.0, il ne sera pas dessiner n'importe quoi. Si nous avons choisi 1.0, il dessine un cercle complet. Si nous avons choisi 0.5, il va dessiner un demi-cercle. etc.

Donc, pour commencer, permet de créer un CAShapeLayer dans votre CircleView's init fonction et d'ajouter la couche à la vue du sublayers (assurez-vous également de supprimer la drawRect fonction depuis la couche de dessin le cercle maintenant):

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

Remarque: On circleLayer.strokeEnd = 0.0 de sorte que le cercle n'est pas dessiné tout de suite.

Maintenant, permet d'ajouter une fonction que l'on peut appeler pour déclencher le cercle d'animation:

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

Ensuite, tout ce que nous devons faire est de changer votre addCircleView fonction de sorte qu'il déclenche l'animation lorsque vous ajoutez le CircleView à son 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)
}

Tous les qui rassemble devrait ressembler à quelque chose comme ceci:

Remarque: Il ne se répétera pas comme ça, il va rester un cercle complet après qu'il anime.

Réponse de Mike est grand! Une autre manière agréable et simple à faire est d'utiliser drawRect combiné avec setNeedsDisplay(). Il semble lag, mais ce n'est pas 🙂

Nous voulons dessiner un cercle en partant du haut, qui est à 90° et se termine à 270°. Le centre du cercle est (centerX, centerY), avec un rayon donné. CurrentAngle est l'angle actuel du point final du cercle, passant de 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

Dans drawRect, nous indiquons comment le cercle est censé afficher :

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

Le problème est que maintenant, comme currentAngle est de ne pas changer, le cercle est statique, et ne s'affiche même pas, comme currentAngle = minAngle.

Nous avons ensuite créer un timer, et à chaque fois que le compte à rebours incendies, nous augmentons currentAngle. En haut de votre classe, ajouter la synchronisation entre deux feux :

let timeBetweenDraw:CFTimeInterval = 0.01

Dans votre init, ajouter le minuteur :

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

Nous pouvons ajouter la fonction qui sera appelée lorsque le compte à rebours est déclenché :

func updateTimer() {
if currentAngle < maxAngle {
currentAngle += 1
}
}

Malheureusement, lors de l'exécution de l'application, rien ne s'affiche parce que nous n'avons pas spécifier le système qu'il doit tirer de nouveau. Ceci est fait en appelant setNeedsDisplay(). Voici la mise à jour de la fonction de minuterie :

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

_
_
_

Tout le code dont vous avez besoin est résumée ici :

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

Si vous souhaitez modifier la vitesse, juste modifier le updateTimer de la fonction, ou la vitesse à laquelle cette fonction est appelée. Aussi, vous pouvez invalider la minuterie une fois que le cercle est complet, j'ai oublié de le faire 🙂

NB: Pour ajouter le cercle dans votre scénario, il suffit d'ajouter une vue, sélectionnez-la, allez à sa Identité de l'Inspecteur, et comme Classe, spécifiez CircleClosing.

Cheers! bRo