Shazam App like loading screen

Question

How can I create a animated loading effect like the below image in iOS? Someone kindly give me an idea or point me to any examples.

Answer 1

I have a very good idea how this works (I work for Shazam and wrote this animation) so...

Whilst I doubt you want an animation that has all the subtleties of the Shazam version, I will explain the basic idea.

Firstly the animation is composed of five main parts.

1. A CAShapeLayer that forms the circle
2. A CABasicAnimation that keeps our animation in time
3. A timer that tells our shape layer to redraw
4. A mask layer that will rotate and mask our shape layer
5. A Logo that sits on top of the shape layer (It doesn't have to be shazam)

So firstly create the CAShapeLayer

CAShapeLayer *newPieLayer = [CAShapeLayer layer];     

[newPieLayer setFillColor:[UIColor blackColor].CGColor];

[[self layer] addSublayer:newPieLayer];

return newPieLayer;

Create the mask layer and add it to the circle layer, your mask image should a circle that sweeps from zero alpha to 100% alpha

self.maskLayer = [CALayer layer];
[self.maskLayer setBounds:self.bounds];
[self.maskLayer setPosition:CGPointMake(self.bounds.size.width/ 2, self.bounds.size.height/2)];
[self.maskLayer setContents:(id)[UIImage imageNamed:kMaskImageName].CGImage];

newPieLayer.mask = self.maskLayer;

Create the animation that will keep us in sync and add it to the mask layer

    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    anim.fromValue = [NSNumber numberWithFloat:startRadians];
    anim.toValue = [NSNumber numberWithFloat:M_PI * 2];
    anim.duration = timeInterval;
    anim.delegate = delegate;
    anim.TimingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

    [maskLayer addAnimation:anim forKey:kMaskRotationAnimationKey];

Create and start the timer that we want to do our drawing from

[NSTimer scheduledTimerWithTimeInterval:kAnimationFireRate target:self selector:@selector(updateTimerFired:) userInfo:nil repeats:YES];

In the timer callback set the path for the layer

float rotation = [[[maskLayer presentationLayer] valueForKeyPath:@"transform.rotation.z"] floatValue];

decibelPath = CGPathCreateArc(animationCenter, inRadius, endAngle, rotation);

[self.layerOne setPath:decibelPath];

Now you should have something that looks very similar

Answer 2

There's no facility in iOS for animated loading screens. What you do is you create a view when your application is first launched that initially shows the loading image. You then animate that view.

Please do not do this unless you are genuinely loading something. iOS applications are intended to start up as quickly as possible. The loading screen is intended to be an approximation of the first screen you see to orient the user to the interface as quickly as possible. It's not there for branding purposes.