CODEWITHSUNDEEP
iosanimation
Rachit
Rachit

Reputation: 1189

Shazam App like loading screen

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.
enter image description here

Upvotes: 7

Views: 4766

Answers (3)

user1421044
user1421044

Reputation:

Hi implement this logic for monotouch you can use the logic hope so you can get your solution

private UIImageView splashScreen;
public override void ViewDidLoad () {
#region Splash Screen
// get the Height & Width of device Screen
float mainSrcWidth = this.View.Bounds.Width;
float mainSrcHeight = this.View.Bounds.Height;
splashScreen = new UIImageView (UIImage.FromFile ("Images/loading.gif"));
splashScreen.Frame = new RectangleF (0, 0, mainSrcWidth, mainSrcHeight);    
//Start the thread;
ThreadPool.QueueUserWorkItem (delegate {
Load ();
}
        );
#endregion
#region Load() splashscreen
private void Load ()
{
        //Sleep for 5 seconds to simulate a long load.
Thread.Sleep (new TimeSpan (0, 0, 0, 5));
        this.BeginInvokeOnMainThread (delegate {
splashScreen.RemoveFromSuperview ();
            splashScreen = null;
            });
    }
    #endregion

Upvotes: 0

Neil Foley
Neil Foley

Reputation: 1773

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

Upvotes: 22

Jim
Jim

Reputation: 73966

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.

Upvotes: 1

Related Questions