layui菊花_ios 实现系统加载动画 红色小菊花

首先创建一个播放动画的载体view：

UIView *indicateView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];

indicateView.center = self.view.center;

[self.view addSubview:indicateView];

//获取载体的宽高

CGFloat width = indicateView.bounds.size.width;

接着在这个view上添加图层，因为小菊花明显是否很多跟竖条，所以会用到复制图层，那我们暂且设置有10根竖条。继续添加如下代码：

CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];

replicatorLayer.bounds = CGRectMake(0, 0, width, width);

//设置中点为父视图的中点

replicatorLayer.position = CGPointMake(width/2, width/2);

//复制图层次数

replicatorLayer.instanceCount = 10;

//复制延迟

replicatorLayer.instanceDelay = 0.15;

[indicateView.layer addSublayer:replicatorLayer];

接着我们需要创建出小菊花的“叶子”，就是单个的竖条，并且需要将“叶子”添加到复制图层上。如下：

CALayer *layer = [CALayer layer];

//小菊花“叶子”的宽高

layer.bounds = CGRectMake(0, 0, 2, 10);

layer.position = CGPointMake(width/2, 10);

//小菊花的颜色

layer.backgroundColor = [UIColor redColor].CGColor;

[replicatorLayer addSublayer:layer];

可是我们现在运行之后回发现咱们的界面中就一根叶子，那是因为还没有设置复制图层中每个“叶子”的偏移角度。这个也很容易计算，当然是360°/叶子个数。接下来这样添加代码即可：

CGFloat angle = (CGFloat) 2*M_PI/10;

replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);

到现在为止，我们运行程序之后回发现，咱们的小菊花已经出来了

接下来就是完成小菊花的动画效果了，系统小菊花的动画效果也很简易，只是简单的透明度动画，那么再加上动画即可：

CABasicAnimation *alphaAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];

alphaAnim.fromValue = [NSNumber numberWithFloat:0.1];

alphaAnim.toValue = [NSNumber numberWithFloat:0.8];

alphaAnim.duration = 1.5;

alphaAnim.repeatCount = HUGE;

[layer addAnimation:alphaAnim forKey:nil];

好了，效果已经实现了：

接着，如果将上述代码做些简单的改变，比如：

//创建一个播放动画的载体view 宽高大约都是50

UIView *indicateView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];

indicateView.backgroundColor = [UIColor grayColor];

indicateView.center = self.view.center;

[self.view addSubview:indicateView];

//获取载体的宽高

CGFloat width = indicateView.bounds.size.width;

CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];

replicatorLayer.bounds = CGRectMake(0, 0, width, width);

replicatorLayer.position = CGPointMake(width/2, width/2);

replicatorLayer.instanceCount = 8;

replicatorLayer.instanceDelay = 0.15;

[indicateView.layer addSublayer:replicatorLayer];

CALayer *layer = [CALayer layer];

layer.bounds = CGRectMake(0, 0, 10, 10);

layer.position = CGPointMake(width/2, 10);

layer.cornerRadius = 5;

layer.backgroundColor = [UIColor whiteColor].CGColor;

layer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1);

[replicatorLayer addSublayer:layer];

CGFloat angle = (CGFloat) 2*M_PI/8;

replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);

CABasicAnimation *scaleAnim =[CABasicAnimation animationWithKeyPath:@"transform"];

CATransform3D t = CATransform3DIdentity;

CATransform3D t2 = CATransform3DScale(t, 0.5, 0.5, 0.0);

scaleAnim.fromValue = [NSValue valueWithCATransform3D:t2];

CATransform3D t3 = CATransform3DScale(t, 1.0, 1.0, 0.0);

scaleAnim.toValue = [NSValue valueWithCATransform3D:t3];

CABasicAnimation *alphaAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];

alphaAnim.fromValue = [NSNumber numberWithFloat:0.3];

alphaAnim.toValue = [NSNumber numberWithFloat:0.7];

CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];

groupAnimation.animations = @[alphaAnim,scaleAnim];

groupAnimation.duration = 1.2;

groupAnimation.repeatCount = HUGE;

[layer addAnimation:groupAnimation forKey:nil];

那么他的动画效果就变成这样，也就是自定义的加载等待动画了：

不过我做出来的颜色效果极其丑陋就是了，可以将载体放大点，圆圈放多点，颜色调配一下，效果就比这个好看了。