ios - Shazam应用程序喜欢加载屏幕

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

最佳答案

我有一个很好的主意，它是如何工作的(我为Shazam工作，并编写了此动画)，所以...

虽然我怀疑您想要一个具有Shazam版本所有细微之处的动画，但我将解释基本概念。

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

组成圆圈

的CAShapeLayer

一种CABasicAnimation，可让我们的动画保持及时

一个计时器，告诉我们的形状图层重绘

将旋转并 mask 形状图层的 mask 层

位于形状层顶部的徽标(不一定是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];

现在，您应该拥有看起来非常相似的东西