效果如图所示 外围有个带着尾巴的小球在大圈内旋转，，整个效果是纯代码实现，，中间的手机是一张图片，，首先要实现第二个图片的效果
先来看一下层级分析效果
具体的代码实现
/// 转动的圆圈
@property (nonatomic,strong)UIView *circle;
/// 小的虚线圆圈
@property (nonatomic,strong)CAShapeLayer *smallCircleLayer;
/// 渐变截取的线条圈圈
@property (nonatomic,strong)CAShapeLayer *progressLayer;
/// 旋转计时器
@property (nonatomic,strong)NSTimer *playTimer;
/// 添加旋转小球
@property (nonatomic,strong)UIView *ballView;
1. 添加三条带渐变色的直线
self.view.backgroundColor =backColor;
//// 添加三条渐变直线
[selfaddLines];
- (void)addLines{
// 画三条渐变线
UIView *line1 = [[UIViewalloc] initWithFrame:CGRectMake(0,0, Width-40,2)];
//// 顺时针旋转30度
line1.transform =CGAffineTransformRotate(line1.transform,M_PI/6);
line1.center =CGPointMake(50+(Width-100)/2,50+(Width-100)/2);
line1.backgroundColor =backColor;
[self.viewaddSubview:line1];
CAGradientLayer *gradient1 = [CAGradientLayerlayer];
gradient1.frame =CGRectMake(0,0, Width-40,2);
/// 渐变色由浅变深再变浅
gradient1.colors = [NSArrayarrayWithObjects:(id)backColor.CGColor,(id)gradientsColor.CGColor,
(id)backColor.CGColor,nil];
gradient1.startPoint =CGPointMake(0,2);
gradient1.endPoint =CGPointMake(1,2);
[line1.layerinsertSublayer:gradient1atIndex:0];
//
UIView *line2 = [[UIViewalloc] initWithFrame:CGRectMake(0,0, Width-40,2)];
line2.transform =CGAffineTransformRotate(line2.transform,M_PI/2);
line2.center =CGPointMake(50+(Width-100)/2,50+(Width-100)/2);
line2.backgroundColor =backColor;
[self.viewaddSubview:line2];
CAGradientLayer *gradient2 = [CAGradientLayerlayer];
gradient2.frame =CGRectMake(0,0, Width-40,2);
gradient2.colors = [NSArrayarrayWithObjects:(id)backColor.CGColor,(id)gradientsColor.CGColor,
(id)backColor.CGColor,nil];
gradient2.startPoint =CGPointMake(0,2);
gradient2.endPoint =CGPointMake(1,2);
[line2.layerinsertSublayer:gradient2atIndex:0];
//
UIView *line3 = [[UIViewalloc] initWithFrame:CGRectMake(0,0, Width-40,2)];
line3.transform =CGAffineTransformRotate(line3.transform,M_PI/6*5);
line3.center =CGPointMake(50+(Width-100)/2,50+(Width-100)/2);
line3.backgroundColor =backColor;
[self.viewaddSubview:line3];
CAGradientLayer *gradient3 = [CAGradientLayerlayer];
gradient3.frame =CGRectMake(0,0, Width-40,2);
gradient3.colors = [NSArrayarrayWithObjects:(id)backColor.CGColor,(id)gradientsColor.CGColor,
(id)backColor.CGColor,nil];
gradient3.startPoint =CGPointMake(0,2);
gradient3.endPoint =CGPointMake(1,2);
[line3.layerinsertSublayer:gradient3atIndex:0];
}
//// 添加旋转圆圈
self.circle = [[UIViewalloc] initWithFrame:CGRectMake(50,50, Width -100, Width -100)];
self.circle.layer.cornerRadius = (Width-100)/2;
self.circle.layer.masksToBounds = YES;
[self.viewaddSubview:self.circle];
self.circle.backgroundColor = [UIColorclearColor];
/// 左边渐变色
CAGradientLayer *gradient = [CAGradientLayerlayer];
gradient.frame =CGRectMake(0.0,0, (Width-100)/2,Width-100);
gradient.colors = [NSArrayarrayWithObjects:(id)[UIColorwhiteColor].CGColor,(id)gradientColor.CGColor,nil];
gradient.startPoint =CGPointMake(0,1);
gradient.endPoint =CGPointMake(0,0);
[self.circle.layerinsertSublayer:gradient atIndex:0];
/// 右边渐变色
CAGradientLayer *gradient2 = [CAGradientLayerlayer];
gradient2.frame =CGRectMake((Width-100)/2,0, (Width-100)/2,Width-100);
gradient2.colors = [NSArrayarrayWithObjects:(id)gradientColor.CGColor,(id)gradientColor.CGColor,nil];
gradient2.startPoint =CGPointMake(0,1);
gradient2.endPoint =CGPointMake(0,0);
[self.circle.layerinsertSublayer:gradient2atIndex:0];
/// 将渐变色结成一个圆
_progressLayer = [CAShapeLayerlayer];
_progressLayer.frame =self.circle.bounds;
_progressLayer.fillColor = [UIColorclearColor].CGColor;
_progressLayer.strokeColor = [UIColorwhiteColor].CGColor;
_progressLayer.lineWidth =10;
_progressLayer.path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,Width-100,Width-100)].CGPath;
self.circle.layer.mask = _progressLayer;
///添加旋转小球
self.ballView = [[UIViewalloc] initWithFrame:CGRectMake(40,40, Width-80,Width-80)];
self.ballView.backgroundColor = [UIColorclearColor];
[self.viewaddSubview:self.ballView];
UIImageView *ballImage = [[UIImageViewalloc] initWithFrame:CGRectMake(self.ballView.frame.size.width/2-10,self.ballView.frame.size.height-22.5,20, 20)];
ballImage.image = [UIImageimageNamed:@"球球-3"];
[self.ballViewaddSubview:ballImage];
///旋转计时器
self.playTimer = [NSTimerscheduledTimerWithTimeInterval:0.5/100target:selfselector:@selector(click)userInfo:nilrepeats:YES];
[self.playTimersetFireDate:[NSDatedistantFuture]];
- (void)click{
self.circle.transform=CGAffineTransformRotate(self.circle.transform, -0.008);
self.ballView.transform=CGAffineTransformRotate(self.circle.transform, -0.008);
}
4. 添加虚线圆环
///虚线圆
UIView *view = [[UIViewalloc] initWithFrame:CGRectMake(80,80, Width-160,Width-160)];
view.layer.cornerRadius = (Width-160)/2;
view.layer.masksToBounds =YES;
view.backgroundColor = [UIColorclearColor];
[self.viewaddSubview:view];
self.smallCircleLayer = [CAShapeLayerlayer];
self.smallCircleLayer.strokeColor = [UIColorwhiteColor].CGColor;
self.smallCircleLayer.fillColor = [UIColorclearColor].CGColor;
self.smallCircleLayer.lineWidth = 3.0;
self.smallCircleLayer.lineDashPattern = @[@6,@3];///长度 间距
self.smallCircleLayer.path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,Width-160,Width-160)].CGPath;
[view.layeraddSublayer:self.smallCircleLayer];
5.添加开始暂停按钮
////开始暂停动画按钮
UIButton *startButton = [UIButtonbuttonWithType:UIButtonTypeSystem];
[startButton setTitle:@"开始"forState:UIControlStateNormal];
[startButton addTarget:selfaction:@selector(startAction)forControlEvents:UIControlEventTouchUpInside];
startButton.frame =CGRectMake(50,400, 50,50);
[self.viewaddSubview:startButton];
UIButton *PauseButton = [UIButtonbuttonWithType:UIButtonTypeSystem];
[PauseButton setTitle:@"暂停"forState:UIControlStateNormal];
[PauseButton addTarget:selfaction:@selector(PauseButtonAction)forControlEvents:UIControlEventTouchUpInside];
PauseButton.frame =CGRectMake(200,400, 50,50);
[self.viewaddSubview:PauseButton];
- (void)startAction{
[self.playTimersetFireDate:[NSDatedistantPast]];
}
- (void)PauseButtonAction{
[self.playTimersetFireDate:[NSDatedistantFuture]];
}