先看下最后基本要实现的效果
总结一下自己的实现思路与所用到的类
1.这个肯定是要自定义的View类,起名为XDColorCircle吧,最后用的时候达到这样的效果
//创建XDColorCircle的实例化对象
XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake(0 ,100,self.view.frame.size.width,200)];
//添加到视图上展示
[self.view addSubview:circle];
2.然后就是在XDColorCircle里面代码思路
3.思路捋顺代码就很方便
//先都写在这个构造方法里面吧
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
}
return self;
}
创建圈圈所在的View
self.backgroundColor=[UIColor clearColor];
UIView *circleView=[[UIView alloc]init];
circleView.frame=CGRectMake(0, 0,frame.size.width,frame.size.height);
circleView.backgroundColor=[UIColor blueColor];
[self addSubview: circleView];
创建渐变图层并添加到圈圈视图
CAGradientLayer * gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = @[(__bridge id)[UIColor whiteColor].CGColor,(__bridge id)[UIColor cyanColor].CGColor];
gradientLayer.locations = @[@0.2,@1.0];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1.0, 0);
gradientLayer.frame =CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
[circleView.layer insertSublayer:_gradientLayer atIndex:0];
添加mask属性只让图层只显示一个圈圈
CAShapeLayer *layer=[[CAShapeLayer alloc]init];
CGMutablePathRef pathRef=CGPathCreateMutable();
CGPathAddRelativeArc(pathRef, nil,frame.size.width/2.0,frame.size.height/2.0,frame.size.width<frame.size.height?frame.size.width/2.0-5:frame.size.height/2.0-5,0, 2*M_PI);
layer.path=pathRef;
layer.lineWidth=5;
layer.fillColor=[UIColor clearColor].CGColor;
layer.strokeColor=[UIColor blackColor].CGColor;
CGPathRelease(pathRef);
circleView.layer.mask=layer;
让圈圈转起来添加动画
CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; ;
// 设定动画选项
animation.duration = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.repeatCount =HUGE_VALF;
// 设定旋转角度
animation.fromValue = [NSNumber numberWithFloat:0.0]; // 起始角度
animation.toValue = [NSNumber numberWithFloat:2 * M_PI]; // 终止角度
[circleView.layer addAnimation:animation forKey:@"rotate-layer"];
添加中间的大文字Label
UILabel *label=[[UILabel alloc]init];
label.text=@"测试中";
label.font=[UIFont systemFontOfSize:32];
label.textAlignment=NSTextAlignmentCenter;
label.frame=CGRectMake(0, 0,frame.size.width,frame.size.height);
label.backgroundColor=[UIColor clearColor];
[self addSubview:label];
4.然后在controller里面使用
//创建XDColorCircle的实例化对象
XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake(0 ,100,self.view.frame.size.width,200)];
//添加到视图上展示
[self.view addSubview:circle];
只是个简单的动画实现小例子,可以看出活用CAShapeLayer和CABasicAnimation可以做出更炫的动画效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持鸟哥教程(niaoge.com)。
(夏点)
原文链接:http://www.jianshu.com/p/94450a41b10b?utm_source=tuicool&utm_medium=referral
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#niaoge.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。