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

客官°小女子只卖身不卖艺 2022-07-14 01:15 204阅读 0赞

项目增加录制短视频功能, 需一录制功能按钮, 使用贝塞尔曲线结合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;  
\}