android 数字画圈动画,【iOS】画圈的轨迹动画

动画

最近接到一个需求，需要做一个启动的加载动画，如下图：

load.gif

思考下，可以拆分几个部分

动画拆分

1 . 中间圆圈的旋转动画！

2 . 两边的画线轨迹！

3 . 动态变化的进度显示！

1.中间的圆圈旋转

我这边使用的4张图片，已附上:

>

02.png

03.png

juhua.png

是不是很明显，使用图片的好处就是可以是动画颜色和样式更多变！

那么怎么让它变成旋转的呢？其实很简单，Apple 就已经提供给我们很好的API 以供使用！

首先声明需要使用的图片视图:

/**

加载图

*/

@property (nonatomic,strong) UIImageView * imageView1;

@property (nonatomic,strong) UIImageView * imageView2;

@property (nonatomic,strong) UIImageView * imageView3;

@property (nonatomic,strong) UIImageView * hudImgView;

//旋转角度

@property (nonatomic,assign) CGFloat angle1;

@property (nonatomic,assign) CGFloat angle2;

@property (nonatomic,assign) CGFloat angle3;

@property (nonatomic,assign) CGFloat angle4;

/**

是否停止加载

*/

@property (nonatomic,assign) BOOL isStopLoad;

接下来UI实现部分：

- (void)loadUI

{

CGPoint point = self.center;

CGRect frame = CGRectMake(point.x - 60, point.y - 40, 120, 120);

//背景视图：

_bgImageView = [[UIImageView alloc]initWithFrame:self.bounds];

_bgImageView.image = [UIImage imageNamed:@"loading"];

[self addSubview:_bgImageView];

_imageView1 = [[UIImageView alloc]initWithFrame:frame];

// _imageView1.center = self.center;

_imageView1.image = [UIImage imageNamed:@"01"];

[self addSubview:_imageView1];

_imageView2 = [[UIImageView alloc]initWithFrame:frame];

// _imageView2.center = self.center;

_imageView2.image = [UIImage imageNamed:@"02"];

[self addSubview:_imageView2];

_imageView3 = [[UIImageView alloc]initWithFrame:frame];

// _imageView3.center = self.center;

_imageView3.image = [UIImage imageNamed:@"03"];

[self addSubview:_imageView3];

_hudImgView = [[UIImageView alloc]initWithFrame:frame];

// _hudImgView.center = self.center;

_hudImgView.image = [UIImage imageNamed:@"juhua"];

[self addSubview:_hudImgView];

}

最后一步，也就是关键的旋转动画，在需要开启的地方调用如下这个方法：

ps: 旋转角度和旋转速度可以根据需要自己进行更改！

/**

旋转动画

*/

- (void)startAnimation

{

//选择动画:

CGAffineTransform endAngle1 = CGAffineTransformMakeRotation(_angle1 * (M_PI / 180.0f));

CGAffineTransform endAngle2 = CGAffineTransformMakeRotation(_angle2 * (M_PI / 180.0f));

CGAffineTransform endAngle3 = CGAffineTransformMakeRotation(_angle3 * (M_PI / 180.0f));

CGAffineTransform endAngle4 = CGAffineTransformMakeRotation(_angle4 * (M_PI / 180.0f));

dispatch_async(dispatch_get_main_queue(), ^{

[UIView animateWithDuration:0.01 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{

_imageView1.transform = endAngle1;

_imageView2.transform = endAngle2;

_imageView3.transform = endAngle3;

_hudImgView.transform = endAngle4;

} completion:^(BOOL finished) {

_angle1 -= 4;

_angle2 += 4;

_angle3 -= 4;

_angle4 += 4;

if (!_isStopLoad) {

[self startAnimation];

}

}];

});

}

2.进度动态显示：

这个就不再赘述,直接上代码:

- (void)loadUI

{

//进度显示Lable

_progressLable = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];

_progressLable.center = _hudImgView.center;

_progressLable.textColor = CenterColor;

_progressLable.textAlignment = NSTextAlignmentCenter;

_progressLable.font = [UIFont boldSystemFontOfSize:12];

_progressLable.layer.cornerRadius = CGRectGetWidth(_progressLable.frame)/2;

_progressLable.layer.masksToBounds = YES;

_progressLable.layer.borderColor = CenterColor.CGColor;

_progressLable.layer.borderWidth = 0.8f;

_progressLable.text = @"0%";

[self addSubview:_progressLable];

}

关于进度我这里因为Demo原因，使用的假数据，用的随机数！

/**

进度显示

*/

- (void)startProgressAnimation

{

if (_isStopLoad == YES) {

return;

}

//随机数

_progressNumber += rand()%20;

if (_progressNumber >=100)

{

_progressNumber = 100;

}

_progressLable.text = [NSString stringWithFormat:@"%ld%@",_progressNumber,@"%"];

}

最后一个，前言说到的画线轨迹动画！

很明显，动画轨迹来看，一个直线和一个半圆，

既然如此，那么就可以按照这个想法来进行实现！我们都知道，OC中有个很强大的类，UIBezierPath 轨迹画线！

可供参考的 :

UIBezierPath苹果官方API文献

简书李国安的文章

下面就是代码实现部分，先贴代码：

-(void)drawRect:(CGRect)rect

{

//上半部轨迹:

UIBezierPath * path = [UIBezierPath bezierPath];

//起点

[path moveToPoint:CGPointMake(ScreenWidth, _hudImgView.center.y)];

//直线终点

[path addLineToPoint:CGPointMake(self.center.x+60, _hudImgView.center.y)];

//圆路径

[path addArcWithCenter:_hudImgView.center radius:60.0f startAngle:M_PI*2 endAngle:M_PI*1 clockwise:NO];

//创建一个CAShapeLayer

CAShapeLayer * caShapelayer = [CAShapeLayer layer];

caShapelayer.path = path.CGPath;

//线条宽度

caShapelayer.lineWidth = 1.5f;

caShapelayer.frame = self.bounds;

//线条颜色

caShapelayer.strokeColor = CenterColor.CGColor;

//填充颜色

caShapelayer.fillColor = [UIColor clearColor].CGColor;

[self.layer addSublayer:caShapelayer];

//下半部轨迹:

UIBezierPath * path2 = [UIBezierPath bezierPath];

[path2 moveToPoint:CGPointMake(0, _hudImgView.center.y)];

[path2 addLineToPoint:CGPointMake(self.center.x-60, _hudImgView.center.y)];

[path2 addArcWithCenter:_hudImgView.center radius:60.0f startAngle:M_PI*1 endAngle:M_PI*2 clockwise:NO];

//创建一个CAShapeLayer

CAShapeLayer * caShapelayer2 = [CAShapeLayer layer];

caShapelayer2.path = path2.CGPath;

//线条宽度

caShapelayer2.lineWidth = 1.5f;

caShapelayer2.frame = self.bounds;

//线条颜色

caShapelayer2.strokeColor = CenterColor.CGColor;

//填充颜色

caShapelayer2.fillColor = [UIColor clearColor].CGColor;

[self.layer addSublayer:caShapelayer2];

//开始动画

dispatch_async(dispatch_get_global_queue(0, 0), ^{

[self drawLineAnimation:caShapelayer];

[self drawLineAnimation:caShapelayer2];

});

}

//绘制 Path轨迹

- (void)drawLineAnimation:(CALayer*)layer {

CABasicAnimation *bas = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

bas.duration = 2;

bas.delegate = self;

bas.fromValue = [NSNumber numberWithInteger:0];

bas.toValue = [NSNumber numberWithInteger:1];

[layer addAnimation:bas forKey:@"key"];

}

总体来说，上下部分轨迹，实际上是一样的，所以就分析其中一个就可以了，首先，确定path 轨迹起点，拐点，和终点！

//起点

[path moveToPoint:CGPointMake(ScreenWidth, _hudImgView.center.y)];

//直线终点

[path addLineToPoint:CGPointMake(self.center.x+60, _hudImgView.center.y)];

//圆路径

[path addArcWithCenter:_hudImgView.center radius:60.0f startAngle:M_PI*2 endAngle:M_PI*1 clockwise:NO];

直线路径无需多说，注释已经很清晰了，主要说下，半圆轨迹：

如下方法：

center : 顾名思义就是圆的中心点，学过数学的都知道！

radius: 圆的半径！

startAngle: 圆轨迹起始的弧度！

endAngle : 圆轨迹结束的弧度！

clockwise : 是否顺时针！

- (void)addArcWithCenter:(CGPoint)center

radius:(CGFloat)radius

startAngle:(CGFloat)startAngle

endAngle:(CGFloat)endAngle

clockwise:(BOOL)clockwise;

轨迹已经给出，那么其余属性见注释，可以尝试自己改动看效果！

至此所有的动画效果都已经完成，在有需要的地方进行调用，就可以了！

ps: 不当之处还请海涵，分享以及记录自己的代码,还请不喜勿喷！！