9

I want to creat a simple circular loader animation circle and border around it which is disappearing

I found great frameworks but they use SKShapeNode and SKShapeNode performance is terrible for actual deployed app

ProgressNode: Very cool framework

grape1
  • 759
  • 2
  • 8
  • 19
  • 2
    This may not be the best solution, but you could easily animate an array of textures. Or if you are looking for something more dynamic you could use a crop node (although crop nodes can be expensive as well) with SKActions to produce a similar effect. Keep in mind, while SKShapeNode performance is bad, if you are only using the circular loader for your UI then performance shouldn't be an issue. Only if you need to use it in-game should you possibly decide against using it. – Epic Byte May 14 '15 at 22:04
  • unfortunately I need it for a game, but the circle color and border are dynamic – grape1 May 15 '15 at 05:10
  • One way to do this might be a conversion of CCProgressTimer from cocos2D to Metal/SpriteKit. It uses a four triangle square's progressive reveal to "mask" a texture. It's a very elegant and performant solution: http://fancyratstudios.com/2010/02/programming/progresstimer-for-cocos2d/ – Confused Sep 29 '16 at 20:53
  • @grape1 Describe terrible performance? I use SKShapeNodes for loaders in my game and performance is fine. Few draws here and there doesn't really change anything. How many loaders you are using on screen at the same time? – Whirlwind Oct 01 '16 at 07:45
  • it's well known that SKShapeNode has performance problems. Search google for "skshapenode performance" if you're unsure of this. As to the need for performance, despite this being called a "loader", imagine using it for many other things, many of them, at the same time, for visual effect, instruments and other desired use of circular animations. – Confused Oct 01 '16 at 20:04
  • Is there a specific reason why you don't use a UIImageView and let it rotate with a CABasicAnimation? – mbachm Oct 02 '16 at 17:56
  • If the loader is always on top you can use CAShapeLayer instead of SKShapeNode – suyama Oct 03 '16 at 20:50

1 Answers1

0

You could use a UIView within a UIImageView with a "loading circle" as image and just let rotate it. Here is a example class:

import UIKit

class CircularLoadingView: UIView {

    @IBOutlet weak var rotatingImage: UIImageView!
    let duration: Double = 1

    func startAnimation() {
        let animation = CABasicAnimation(keyPath: "transform.rotation.z")
        animation.toValue = NSNumber(floatLiteral:  M_PI * 2.0 * duration)
        animation.duration = duration
        animation.isCumulative = true
        animation.repeatCount = Float(CGFloat.greatestFiniteMagnitude)
        rotatingImage.layer.add(animation, forKey: "animationKey")

        UIView.animate(withDuration: duration, animations: {
            self.alpha = 1
        })
    }
}

Just add a UIView and set CircularLoadingView as custom class. Add a UIImageView, set the image you want to rotate, set the outlets and constraints and see what happens.

But with this attempt you need an image, which you have to create or to find.

If this does not help you, perhaps this old raywenderlich tutorial can. There they show how to make a circular indicator with CAShapeLayer.

mbachm
  • 444
  • 5
  • 8