前言
初心是想了解一下支付宝按钮提交的动画以及把转圈动画自定义为一个hud，中间参考了一些优秀的demo，结果发现了一些细节问题以及hud，customView时需要注意的一些问题。
要实现的初步
loading效果
参考文章：支付宝支付动画解析
这是原文的动画解析。
从图中可以看出：加载圆弧运动轨迹可分为前半段和后半段；并且圆弧的起始角度(StartAngle)和结束角度(EndAngle)在做有规律的变化；
前半段: 从-0.5π到π，这一段运动中速度较快；StartAngle不变，始终为-0.5π；EndAngle在匀速上升，一直到π；前半段中圆弧不断变长，最后形成一个3/4的圆。
后半段: 从π到1.5π，这一段运动速度较慢；StartAngle开始变化，从-0.5π变化到1.5π；EndAngle从π变化到1.5π，最后StartAngle和EndAngle重合于1.5π；后半段中圆弧不断变长，最后直至消失。
这个动画还是参考原文的，因为使用CABasicAnimation，动画的速度不好控制，原文使用定时器来控制感觉动画过渡更自然。当然你也可以使用CABasicAnimation，做一个strokeStart,strokeEnd做一个group动画，动画处理的不是很好。
定时器控制动画部分代码：
-(void)initilize{
self.roundLayer.strokeColor = BlueColor.CGColor;
self.roundLayer.fillColor = [UIColor clearColor].CGColor;
self.roundLayer.lineWidth = lineWidth;
self.roundLayer.lineCap = kCALineCapRound;
[self.layer addSublayer:self.roundLayer];
self.link = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction)];
[self.link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
self.link.paused = false;
}
-(void)layoutSubviews{
[super layoutSubviews];
self.roundLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
}
-(void)displayLinkAction{
_progress += [self speed];
if (_progress >= 1) {
_progress = 0;
}
[self updateAnimationLayer];
}
-(void)updateAnimationLayer{
//默认从-M_PI_2 开始。
_startAngle = -M_PI_2;
_endAngle = -M_PI_2 +_progress * M_PI * 2;
if (_endAngle > M_PI) {
//当完成3/4圈的时候，计算剩余完成的进度除以1/4圈，是当前剩下的1/4圈完成的进度，1 减去后就是剩余的进度
CGFloat progress1 = 1 - (1 - _progress)/0.25;
_startAngle = -M_PI_2 + progress1 * M_PI * 2;
}
CGFloat radius = self.roundLayer.bounds.size.width/2.0f - lineWidth/2.0f;
CGFloat centerX = self.roundLayer.bounds.size.width/2.0f;
CGFloat centerY = self.roundLayer.bounds.size.height/2.0f;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(centerX, centerY) radius:radius startAngle:_startAngle endAngle:_endAngle clockwise:true];
path.lineCapStyle = kCGLineCapRound;
self.roundLayer.path = path.CGPath;
}
-(CGFloat)speed{
if (_endAngle > M_PI) {
return 0.3/60.0f;
}
return 2/60.0f;
}
group动画来控制
[CATransaction begin];
[CATransaction setDisableActions:YES];
CAAnimationGroup *group = [CAAnimationGroup new];
group.repeatCount = MAXFLOAT;
CABasicAnimation *startAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
startAnimation.fromValue = @(0);
startAnimation.toValue = @(1);
startAnimation.beginTime = 0;
startAnimation.duration = ANIMATETIME;
startAnimation.fillMode = kCAFillModeBackwards;
startAnimation.removedOnCompletion = NO;
startAnimation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.1 :0.8 :0.95 :1];
CABasicAnimation *endAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
endAnimation.fromValue = @(0);
endAnimation.toValue = @(1);
endAnimation.beginTime = ANIMATETIME* 0.6;
endAnimation.duration = ANIMATETIME * 0.4;
endAnimation.fillMode = kCAFillModeBackwards;
endAnimation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0 :0.2 :0.4 :1];
group.removedOnCompletion = NO;
group.animations = @[startAnimation,endAnimation];
group.duration = ANIMATETIME;
[self.roundLayer removeAllAnimations];
[self.roundLayer addAnimation:group forKey:@"round_group"];
[CATransaction commit];
提交完成的动画
原文中提交动画是这么处理的。
- (void)start {
[self circleAnimation];
dispatch_time_t time = dispatch_time(DISPATCH_TIME_NOW, 0.8 * circleDuriation * NSEC_PER_SEC);
dispatch_after(time, dispatch_get_main_queue(), ^(void){
[self checkAnimation];
});
}
虽然也能达到效果，但是动画本身有属性可以使用。beginTime
- (void)start {
[self circleBeginAnimation];
_checkAnimation.beginTime = CACurrentMediaTime() + 0.3;
[self checkBeginAnimaiton];
}
loading展示在hud上
MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:self.view animated:YES];
hud.mode = MBProgressHUDModeCustomView;
hud.bezelView.style = MBProgressHUDBackgroundStyleSolidColor;//必须先设置这个style，才能设置背景透明。否则会有毛玻璃效果蒙版
hud.minSize = CGSizeMake(100, 100);
LXSubmitLoadingView *loadingView =[[LXSubmitLoadingView alloc]initWithFrame:CGRectMake(0, 0, 40, 40)];
hud.customView = loadingView;
// hud.label.text = @"加载中...";
//是否设置黑色背景，这两句配合使用
hud.bezelView.color = [UIColor clearColor];
hud.contentColor = [UIColor clearColor];
hud.label.textColor = [UIColor whiteColor];
hud.removeFromSuperViewOnHide = YES;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3* NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
hud.hidden = YES;
});
如果hud 需要设置为背景透明，必须设置hud.bezelView.style = MBProgressHUDBackgroundStyleSolidColor;hud.bezelView.color = [UIColor clearColor];
如果需要改变customView的大小，必须在loadingView里重新设置
- (CGSize)intrinsicContentSize {
return CGSizeMake(40, 40);
}
MBProgressHUD 提示：
* The UIView (e.g., a UIImageView) to be shown when the HUD is in MBProgressHUDModeCustomView.* The view should implement intrinsicContentSize for proper sizing. For best results use approximately 37 by 37 pixels.
demo以及效果
demo里包含了loading，提交完成的动画view，自定义提交按钮等。
demo地址：支付宝提交按钮动画以及hud