ios - 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

嗨，为 monotouch 实现这个逻辑，你可以使用逻辑希望，这样你就可以得到你的解决方案

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