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