Shazam app as loading screen

Question

How to create an animated loading effect as shown below in iOS? Someone kindly give me an idea or call me for any examples.

Answer 1

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

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

Firstly, animation consists of five main parts.

• CAShapeLayer that forms a circle
• A CABasicAnimation that supports animation over time
• A timer that tells our form layer to redraw
• The mask that will rotate and mask our shape layer
• A logo that sits on top of the form layer (it doesn't have to be shazam)

So first create a CAShapeLayer

CAShapeLayer *newPieLayer = [CAShapeLayer layer]; [newPieLayer setFillColor:[UIColor blackColor].CGColor]; [[self layer] addSublayer:newPieLayer]; return newPieLayer; 

Create a mask layer and add it to the circle layer, your mask image should surround a circle 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 an animation that helps us 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 run the timer that we want to do with

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

The timer callback sets the path for the layer

 float rotation = [[[maskLayer presentationLayer] valueForKeyPath:@"transform.rotation.z"] floatValue]; decibelPath = CGPathCreateArc(animationCenter, inRadius, endAngle, rotation); [self.layerOne setPath:decibelPath]; 

You should now have something similar to

Answer 2

In iOS, there is no option for animated boot screens. What you do is create a view the first time you launch an application that initially displays the loaded image. Then you animate this view.

Please do not do this unless you are really downloading something. IOS apps are designed to run as quickly as possible. The loading screen is designed to approximate the first screen that you see in order to orient the user to the interface as quickly as possible. It is not for branding purposes.

Answer 3

Hi, implement this logic for monotouch, you can use logical 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