码迷,mamicode.com
首页 > 移动开发 > 详细

iOS动画之活动指示器

时间:2015-07-20 06:55:42      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:ios   动画   layer   复制层   指示器   

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

iOS动画之活动指示器

标签:ios   动画   layer   复制层   指示器   

原文地址:http://blog.csdn.net/supersonico/article/details/46961471

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!