录制短视频的录制按钮边框计时效果

项目增加录制短视频功能, 需一录制功能按钮, 使用贝塞尔曲线结合shapelayer绘制按钮边框的计时功能

代码如下:

#import "YGRecordView.h"

#define BeforeRecord_LineWidth 2.0
#define BeforeRecord_LineColor UIColorFromRGBA(0xffffff, 1)
#define Record_LineWidth 5.0
#define Record_LineColor UIColorFromRGBA(0xffffff, 0.3)
#define Record_TotalTime 30.0

@interface YGRecordView ()

@property (nonatomic, strong) UIButton *closeButton;//返回按钮
@property (nonatomic, strong) UIButton *cameraButton;//切换相机按钮
@property (nonatomic, strong) UIButton *alertButton;//提示按钮
@property (nonatomic, strong) UIButton *recordButton;//录制按钮

@property (nonatomic, strong) CAShapeLayer *borderLayer;//录制边框
@property (nonatomic, strong) CAShapeLayer *progressLayer;//设置路径
@property (nonatomic, strong) CABasicAnimation *strokeAnimationStart;//动画

@property (nonatomic, strong) NSTimer *timer;//定时器
@property (nonatomic, assign) NSInteger times;//录制时间

@end

@implementation YGRecordView

- (instancetype)init
{
self = [super init];
if (self) {
[self setUI];
[self setFrame];
}
return self;
}

- (void)setUI {

for (int i = 0; i < 4; i ++) {
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[self addSubview:button];

button.tag = 31 + i;
[button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];

if (i == 0) {
self.closeButton = button;
[_closeButton setImage:[UIImage imageNamed:@"record_close"] forState:UIControlStateNormal];
} else if (i == 1) {
self.cameraButton = button;
[_cameraButton setImage:[UIImage imageNamed:@"record_camera"] forState:UIControlStateNormal];
} else if (i == 2) {
self.alertButton = button;
_alertButton.hidden = YES;
_alertButton.userInteractionEnabled = NO;
[_alertButton setBackgroundImage:[UIImage imageNamed:@"record_alert_bg"] forState:UIControlStateNormal];

_alertButton.titleLabel.font = [UIFont systemFontOfSize:11.0];
[_alertButton setTitle:@"录制至少八秒以上" forState:UIControlStateNormal];
[_alertButton setTitleColor:UIColorFromRGBA(0xffffff, 0.8) forState:UIControlStateNormal];
_alertButton.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 9, 0);
} else if (i == 3) {
self.recordButton = button;
_recordButton.backgroundColor = UIColorFromRGBA(0xffffff, 0.6);
[_recordButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
_recordButton.titleLabel.font = [UIFont systemFontOfSize:15.0];
}

}

}

- (void)setFrame {
self.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

//返回 && 切换摄像头
for (int i = 0; i < 2; i ++) {
UIButton *button = (UIButton *)[self viewWithTag:31 + i];
[button mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self).offset(0.06 * SCREEN_HEIGHT);
make.height.equalTo(self).multipliedBy(0.06);
make.width.equalTo(button.mas_height);
if (i == 0) {
make.left.equalTo(self).offset(13);
} else {
make.right.equalTo(self).offset(-13);
}
}];
}

//录制按钮
[_recordButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self);
make.bottom.equalTo(self).offset(- 0.052 * SCREEN_HEIGHT);
make.height.equalTo(self).multipliedBy(0.099);
make.width.equalTo(_recordButton.mas_height);
}];

//提示按钮
[_alertButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(self);
make.bottom.equalTo(_recordButton.mas_top).offset(-0.02 * SCREEN_HEIGHT);
make.width.equalTo(self).multipliedBy(0.35);
make.height.equalTo(_alertButton.mas_width).multipliedBy(0.24);
}];

}

//设置圆角, 添加图层
- (void)layoutSubviews {

[super layoutSubviews];

CGFloat H = _recordButton.frame.size.height;

_recordButton.layer.masksToBounds = YES;
_recordButton.layer.cornerRadius = H / 2.0;

[self.layer addSublayer:self.borderLayer];
}

- (void)buttonClick:(UIButton *)sender {
if (sender.tag == 31 || sender.tag == 32) {

//点击返回或切换摄像头按钮
if (self.recordViewBlock) {
_recordViewBlock(sender.tag);
}

} else if (sender.tag == 34) {

//点击录制按钮
[self dealRecordWithSender:sender];

}
}
- (void)dealRecordWithSender:(UIButton *)sender {
sender.selected = !sender.selected;

if (sender.selected) {
//开始录制
[self startRecord];

} else {
//结束录制
[self stopRecordIsEnterBackground:NO];
}
}

//开始录制
- (void)startRecord {
_times = 0;
_alertButton.hidden = NO;

//修改录制按钮
_recordButton.backgroundColor = UIColorFromRGBA(0xff0000, 0.8);

//修改边框layer
_borderLayer.lineWidth = Record_LineWidth;
_borderLayer.strokeColor = Record_LineColor.CGColor;

//开启定时器
[self addTimer];

//开启动画
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

[self.layer addSublayer:self.progressLayer];
[self.progressLayer addAnimation:self.strokeAnimationStart forKey:nil];

});

//回调33 开始录制
if (self.recordViewBlock) {
_recordViewBlock(33);
}
}

//停止录制
- (void)stopRecordIsEnterBackground:(BOOL)is {
//移除动画
[self.layer removeAllAnimations];
[_progressLayer removeAllAnimations];
[_progressLayer removeFromSuperlayer];

//取消定时器
[self cancleTimer];

_alertButton.hidden = YES;
//恢复录制按钮
_recordButton.selected = NO;
_recordButton.backgroundColor = UIColorFromRGBA(0xffffff, 0.6);
[_recordButton setTitle:@"" forState:UIControlStateNormal];
//恢复边框layer
_borderLayer.lineWidth = BeforeRecord_LineWidth;
_borderLayer.strokeColor = BeforeRecord_LineColor.CGColor;

//回调 <=30 录制结束
if (self.recordViewBlock) {

//如果是进入后台调用的此方法则不回调
if (!is) {
_recordViewBlock(_times);
}

}
}

#pragma mark -
//添加定时器
- (void)addTimer {

if (_timer == nil) {

_timer = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(saveRecordTime) userInfo:nil repeats:YES];

}

[[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSDefaultRunLoopMode];
}

- (void)saveRecordTime {
self.times ++;

//8s后隐藏提示
if (_times >= 8) {
[UIView animateWithDuration:0.3 animations:^{
_alertButton.alpha = 0;
} completion:^(BOOL finished) {
_alertButton.hidden = YES;
_alertButton.alpha = 1.0;
}];
}

//30s录制完成 停止录制
if (self.times >= 30) {
[self stopRecordIsEnterBackground:NO];
} else {
[_recordButton setTitle:[NSString stringWithFormat:@"%lds",(long)_times] forState:UIControlStateNormal];
}
}

//取消定时器
- (void)cancleTimer {

if ([_timer isValid]) {
[_timer invalidate];
_timer = nil;
}
}

#pragma mark - 懒加载方法
- (CAShapeLayer *)borderLayer {
if (!_borderLayer) {

_borderLayer = [CAShapeLayer layer];
CGMutablePathRef solidPath = CGPathCreateMutable();

_borderLayer.lineWidth = BeforeRecord_LineWidth;
_borderLayer.strokeColor = BeforeRecord_LineColor.CGColor;
_borderLayer.fillColor = [UIColor clearColor].CGColor;
CGPathAddEllipseInRect(solidPath, nil, CGRectMake(CGRectGetMinX(_recordButton.frame) - 5, CGRectGetMinY(_recordButton.frame) - 5, 0.099 * SCREEN_HEIGHT + 5*2, 0.099 * SCREEN_HEIGHT + 5*2));
_borderLayer.path = solidPath;
CGPathRelease(solidPath);

}
return _borderLayer;
}

- (CAShapeLayer *)progressLayer {
if (!_progressLayer) {

_progressLayer = [CAShapeLayer layer];
_progressLayer.frame = self.borderLayer.frame;
_progressLayer.path = [UIBezierPath bezierPathWithArcCenter:self.recordButton.center
radius:(0.099 * SCREEN_HEIGHT + 5*2)/2.0
startAngle:-M_PI_2
endAngle:-M_PI_2-2*M_PI
clockwise:NO].CGPath;

_progressLayer.fillColor = [UIColor clearColor].CGColor;
_progressLayer.lineWidth = Record_LineWidth;
_progressLayer.strokeColor = UIColorFromRGBA(0xffeb45, 1).CGColor;

_progressLayer.lineCap = kCALineCapRound;
}

return _progressLayer;
}
//动画
- (CABasicAnimation *)strokeAnimationStart {

if (!_strokeAnimationStart) {

_strokeAnimationStart = [CABasicAnimation animationWithKeyPath:@"strokeStart"];

_strokeAnimationStart.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
_strokeAnimationStart.duration = Record_TotalTime;
_strokeAnimationStart.fromValue = @1;
_strokeAnimationStart.toValue = @0;
_strokeAnimationStart.speed = 1.0;

_strokeAnimationStart.removedOnCompletion = NO;
}

return _strokeAnimationStart;
}