【iOS】画圈的轨迹动画
2017-10-23 本文已影响143人
独酌丿红颜
动画
最近接到一个需求，需要做一个启动的加载动画，如下图：
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: 不当之处还请海涵，分享以及记录自己的代码,还请不喜勿喷！！
