optimal approach to animate radar in iOS


I'm trying to animate the heading line of a naval-style radar (the spinning part below) in iOS, like this:

radar image

My current slow, laggy, and high-overhead solution (pseudocode because the real Swift code is a little lengthy):

create NSTimer to call animate() every 1/60 sec
currentAngle = 0

animate():
    create UIBezierPath from center of circle to outside edge at currentAngle
    add path to new CAShapeLayer, add layer to views layer
    add fade out CABasicAnimation to layer (reduces opacity over time)
    increase currentAngle

What's the best way to do this without using a .gif? I have implemented the solution above, but the performance (frame rate and CPU use) is awful. How would you approach this problem?


Answers:


Your approach is too complex. Don't try to re-draw your image during the animation.

Separate out the part that rotates from the part that fades in and out and animate them separately. Make each animation draw partly transparent so the other animation shows through.

Either create a static image of the part that rotates, or build a layer that creates that image.

If you create an image, you can use UIView animation to animate the rotation on the image view.

If you create a layer that draws the heading line and gradient around it, then use a CABasicAnimation that animates the z rotation of the layer's transform.