ios - Shazam 应用程序像加载屏幕

Question

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

Answer 1

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

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

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

1. 形成圆圈的 CAShapeLayer
2. 一个 CABasicAnimation 使我们的动画保持及时
3. 告诉我们的形状层重绘的计时器
4. 将旋转并遮盖我们的形状层的 mask 层
5. 位于形状层顶部的 Logo (不一定是 shazam)

所以首先创建CAShapeLayer

CAShapeLayer *newPieLayer = [CAShapeLayer layer];     

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

[[self layer] addSublayer:newPieLayer];

return newPieLayer;

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

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

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

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