类似Shazam App的加载屏幕

Question

如何在iOS中创建如下图所示的动画加载效果？有人好心地给我一个想法或指出我的任何例子。

​

Answer 1

我有一个非常好的想法是如何工作的(我为Shazam工作，并写了这个动画)，所以…

虽然我怀疑你想要一个具有Shazam版本所有微妙之处的动画，但我将解释其基本思想。

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

1. 形成圆形的CAShapeLayer
2. 保持动画效果的计时器CABasicAnimation
3. 告诉我们的形状层重新绘制
4. 遮罩层将旋转和遮罩我们的形状层
5. 位于形状层顶部的徽标(不必是shazam)

因此，首先创建CAShapeLayer

CAShapeLayer *newPieLayer = [CAShapeLayer layer];     

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

[[self layer] addSublayer:newPieLayer];

return newPieLayer;

创建遮罩层并将其添加到圆形图层，您的遮罩图像应该是一个从零alpha到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;

创建使我们保持同步的动画，并将其添加到遮罩层

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

现在你应该有了一个看起来非常相似的东西

Answer 2

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

请不要这样做，除非你真的在加载一些东西。iOS应用程序旨在尽可能快地启动。加载屏幕旨在成为您看到的第一个屏幕的近似值，以便尽快将用户定向到界面。这是，而不是，用于品牌推广。

Answer 3

嗨，为单点触控实现这个逻辑，你可以使用逻辑hope，这样你就可以得到你的解决方案

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