Shazam App喜欢加载屏幕

时间:2012-05-15 19:22:46

标签: ios animation

如何在iOS中创建类似下图的动画加载效果?有人请给我一个想法或指出我的任何例子 enter image description here

3 个答案:

答案 0 :(得分:22)

我非常清楚这是如何工作的(我为Shazam工作并编写了这个动画)所以......

虽然我怀疑你想要一部具有Shazam版本所有细微之处的动画,但我会解释基本的想法。

首先,动画由五个主要部分组成。

  1. 形成圆圈的CAShapeLayer
  2. 保持动画及时的CABasicAnimation
  3. 一个告诉我们的形状图层重绘的计时器
  4. 将旋转并遮盖我们的形状图层的遮罩层
  5. 位于形状图层顶部的徽标(不一定是shazam)
  6. 首先创建CAShapeLayer

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

    创建遮罩层并将其添加到圆形图层,遮罩图像应该是从零阿尔法扫描到100%阿尔法的圆圈

    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;
    

    创建动画,让我们保持同步并将其添加到遮罩层

        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];
    

    创建并启动我们想要从

    进行绘制的计时器
    [NSTimer scheduledTimerWithTimeInterval:kAnimationFireRate target:self selector:@selector(updateTimerFired:) userInfo:nil repeats:YES];
    

    在计时器回调中设置图层的路径

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

    现在你应该有一些非常相似的东西

答案 1 :(得分:1)

iOS中没有用于动画加载屏幕的工具。您所做的是在首次启动应用程序时创建一个最初显示加载图像的视图。然后,您可以为该视图设置动画。

除非您真正装载某些东西,否则请不要这样做。 iOS应用程序旨在尽快启动。加载屏幕旨在作为您看到的第一个屏幕的近似值,以便尽快将用户定向到界面。 用于品牌宣传。

答案 2 :(得分:0)

嗨,你可以使用逻辑希望实现这个逻辑,你可以得到你的解决方案

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