1

I'm writing a timer, similar to the timer available in the horizontal version of the Clock app, except that it starts full and runs down to empty.

I implemented the timer, and it works great for larger times, but it's unable to animate fast enough for quick animations (I'm aiming for 400ms total animation time at its fastest) because I animate using the drawRect method. To illustrate, here's my timer code:

class SSTimerView: UIView {
    var timer: NSTimer?
    var startAngle: CGFloat = (CGFloat) (M_PI * 1.5)
    var endAngle: CGFloat = (CGFloat) (M_PI * 1.5) + (CGFloat) (M_PI * 2)
    var percent: CGFloat? = 100 

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func drawRect(rect: CGRect) {
        var bezierPath = UIBezierPath()
        //Create our arc with the correct angles
        bezierPath.addArcWithCenter(CGPointMake(rect.size.width/2, rect.size.height/2),
            radius: 130,
            startAngle: startAngle,
            endAngle: (endAngle - startAngle) * (percent! / 100.0) + startAngle,
            clockwise: true
        )
        //Set the display for the path and stroke it.
        bezierPath.lineWidth = 20
        Slide.sharedInstance.currentInstruction!.colorFamily.lighterColor.setStroke()
        bezierPath.stroke()
    }
}

I've been reading up on CADisplayLink, and I think it may be a viable option, but I've also heard that CADisplayLink is not appropriate in all circumstances. Is this one of them? If CADisplayLink is not appropriate here, what CA class should I be using?

1 Answer 1

1

As you know, when manually animating CADisplayLink is always better than NSTimer. (For a discussion why, see WWDC 2014 video Building Interruptible and Responsive Interactions, starting about 14 minutes into the video.) So, if you stick with your existing pattern, definitely shift to CADisplayLink.

But if you want to animate the drawing of this path, CABasicAnimation is far easier:

var shapeLayer: CAShapeLayer!

func addShapeLayer() {
    shapeLayer     = CAShapeLayer()
    let startAngle = CGFloat(M_PI * 1.5)
    let endAngle   = startAngle + CGFloat(M_PI * 2)

    let bezierPath = UIBezierPath()

    bezierPath.addArcWithCenter(CGPointMake(view.bounds.size.width/2, view.bounds.size.height/2),
        radius: 130.0,
        startAngle: startAngle,
        endAngle: endAngle,
        clockwise: true
    )

    shapeLayer.path        = bezierPath.CGPath
    shapeLayer.strokeColor = UIColor.blueColor().CGColor
    shapeLayer.fillColor   = UIColor.clearColor().CGColor
    shapeLayer.lineWidth   = 20.0

    view.layer.addSublayer(shapeLayer)
}

func animateShapeLayer() {
    let animation       = CABasicAnimation(keyPath: "strokeEnd")
    animation.duration  = 0.4
    animation.fromValue = 0.0
    animation.toValue   = 1.0
    shapeLayer.addAnimation(animation, forKey: "strokeEndAnimation")
}

The CADisplayLink approach is great if you need more customized behavior, but if you just want to animate the drawing of a path over a certain duration, CABasicAnimation is easiest (and is likely to offer the best performance).

1
  • I like your suggestion a lot. I used it initially, but I was pretty unhappy with the implicit animations. So, I modified your solution to include CADisplayLink, wherein I'm calculating and animating the percentage of fill that the timer should have for each frame. This works pretty well for me, because I can add control logic to the timer ("if the timer runs out and this set of conditions is met then...), pause and restart the timer, and it runs CONSIDERABLY more efficiently ( < 1/3 CPU usage of NSTimer). Jun 23, 2015 at 16:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.