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;

创建遮罩层并将其添加到圆形图层,遮罩图像应该是从零阿尔法扫描到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];

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