iOS动画之活动指示器

1.结果展示

2.实现思路

1.创建复制图层

    CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
    replicator.frame = CGRectMake(50, 50, 200, 200);
    replicator.backgroundColor = [UIColor redColor].CGColor;

    [self.view.layer addSublayer:replicator];

2.创建一个矩形图层，设置缩放动画。

    CALayer *indicator = [CALayer layer];

    indicator.transform = CATransform3DMakeScale(0, 0, 0);
    indicator.position = CGPointMake(100, 20);
    indicator.bounds = CGRectMake(0, 0, 10, 10);
    indicator.backgroundColor = [UIColor greenColor].CGColor;

    [replicator addSublayer:indicator];

    CGFloat durtion = 1;
    CABasicAnimation *anim = [CABasicAnimation animation];

    anim.keyPath = @"transform.scale";
    anim.fromValue = @1;
    anim.toValue = @0.1;
    anim.repeatCount = MAXFLOAT;
    anim.duration = durtion;

    [indicator addAnimation:anim forKey:nil];

3.复制矩形图层，并且设置每个复制层的角度形变

    int count = 10;
    // 设置子层次数
    replicator.instanceCount = count;
    // 设置子层形变角度
    CGFloat angle = M_PI * 2 / count;
    replicator.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);

4.设置复制动画延长时间（需要保证第一个执行完毕之后，绕一圈刚好又是从第一个执行，因此需要把动画时长平均分给每个子层）
公式:延长时间 = 动画时长 / 子层总数

假设有两个图层，动画时间为1秒，延长时间就为0.5秒。当第一个动画执行到一半的时候（0.5），第二个开始执行。第二个执行完

    // 设置子层动画延长时间
    replicator.instanceDelay = durtion / count;

3.完整代码

#import "ViewController.h"

#define Count 20.0
#define DurationTime 1.0
@interface ViewController ()
@property (nonatomic,strong) CAReplicatorLayer *replicator;
@property (nonatomic,strong) CALayer *indicator;
@property (nonatomic,strong) CABasicAnimation *anim;
@end

@implementation ViewController

//懒加载，复制层
- (CAReplicatorLayer *)replicator
{
    if (_replicator == nil) {
        _replicator = [CAReplicatorLayer layer];
        _replicator.frame = CGRectMake(50, 50, 200, 200);
        _replicator.backgroundColor = [UIColor clearColor].CGColor;
        // 设置子层次数
        _replicator.instanceCount = Count;
        // 设置子层动画延长时间
        _replicator.instanceDelay = DurationTime / Count;
        // 设置子层形变角度
        CGFloat angle = M_PI * 2 / Count;
        _replicator.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
    }
    return _replicator;
}

//普通层
- (CALayer *)indicator
{
    if (_indicator == nil) {
        _indicator = [CALayer layer];
        _indicator.transform = CATransform3DMakeScale(0, 0, 0);
        _indicator.position = CGPointMake(100, 20);
        _indicator.bounds = CGRectMake(0, 0, 10, 10);
        _indicator.cornerRadius = 5;
        _indicator.backgroundColor = [UIColor greenColor].CGColor;
    }
    return _indicator;
}

//动画
- (CABasicAnimation *)anim
{
    if (_anim == nil) {
        _anim = [CABasicAnimation animation];

        _anim.keyPath = @"transform.scale";
        _anim.fromValue = @1;
        _anim.toValue = @0.1;
        _anim.repeatCount = MAXFLOAT;
        _anim.duration = DurationTime;
    }
    return _anim;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    //添加复制层
    [self.view.layer addSublayer:self.replicator];
    //添加层
    [self.replicator addSublayer:self.indicator];
    //添加动画
    [self.indicator addAnimation:self.anim forKey:nil];
}
@end

4.Demo源代码

https://github.com/Esdeath/ActiveHub