高仿抖音拍摄视频按钮动画

先看效果图：

shot.gif

一：原理分析

• 首先，整个视图可分为四部分：

1. button（SGShootControlView对象继承于UIControl）：负责手势交互和作为视图容器，作为borderLayer、 centerlayer、 titleLB的父视图。
2. borderLayer： 红色的边框视图borderLayer(CALayer对象)。
3. centerlayer：红色的圆形居中视图centerlayer(CALayer对象)。
4. titleLB：还有“按住拍”提示文字titleLB（UILabel）（当然这个可有可无,其实和动画效果无关）

• 其次，视图动画效果分为两个部分：按住时,松开时

1. 按下时borderLayer做放大动画，centerlayer做缩小并变成矩形，titleLB隐藏，borderLayer做放大动画结束后，再做borderLayer的边框重复进行变宽，变窄，再变宽的循环动画。
2. 松开手时，先移除borderLayer边框进行变宽，变窄，再变宽的循环动画，再同时做borderLayer，centerlayer的还原动画，显示titleLB。

二：源代码

自定义SGShootControlView继承自UIControl

SGShootControlView.h:

#import 
@interface SGShootControlView : UIControl
- (void)scaleAnimation;
- (void)resetAnimation;
@end

SGShootControlView.m:

#import "SGShootControlView.h"
static const CGFloat BORDERLAYER_WIDTH = 80;
static const CGFloat CENTERLAYER_WIDTH = 60;
static const CGFloat BORDERWIDTH_FROM = 5;
static const CGFloat BORDERWIDTH_TO = 10;
static NSString *const BORDERWIDTH_ANIMATION_KEY = @"borderWidthAnimation";

@interface SGShootControlView()
@property (nonatomic ,strong) CALayer *centerlayer;
@property (nonatomic, strong) CALayer *borderLayer;
@property (nonatomic, strong) UILabel *titleLB;
@end
@implementation SGShootControlView
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
        [self setupUI];
    }
    return self;
}
#pragma mark - 私有方法
- (void)borderAnimaton{
    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"borderWidth";
    animation.repeatCount = FLT_MAX;
    animation.removedOnCompletion = NO;
    animation.duration = 0.5;
    animation.fromValue = @(BORDERWIDTH_FROM);
    animation.toValue = @(BORDERWIDTH_TO);
    animation.fillMode = kCAFillModeBackwards;
    animation.autoreverses = YES;
    [self.borderLayer addAnimation:animation forKey:BORDERWIDTH_ANIMATION_KEY];
}
#pragma mark - 公开方法
- (void)scaleAnimation{
    
    _titleLB.hidden = YES;
    
    [UIView animateWithDuration:0.25 animations:^{
        self.centerlayer.cornerRadius = BORDERWIDTH_TO;
        self.centerlayer.transform = CATransform3DMakeScale(0.7, 0.7, 1);
        self.borderLayer.transform = CATransform3DMakeScale(1.8, 1.8, 1);
    } completion:^(BOOL finished) {
        [self borderAnimaton];
    }];
}
- (void)resetAnimation{
    
    [self.borderLayer removeAnimationForKey:BORDERWIDTH_ANIMATION_KEY];
    
    [UIView animateWithDuration:0.25 animations:^{
        self.centerlayer.cornerRadius = CENTERLAYER_WIDTH / 2.0;
        self.borderLayer.borderWidth = BORDERWIDTH_FROM;
        self.borderLayer.transform = CATransform3DIdentity;
        self.centerlayer.transform = CATransform3DIdentity;
    }completion:^(BOOL finished) {
        self.titleLB.hidden = NO;
    }];
}
#pragma mark - 初始化视图
- (void)setupUI{
    
    // 红色边框
    CALayer *borderLayer = [CALayer layer];
    borderLayer.backgroundColor = [UIColor clearColor].CGColor;
    borderLayer.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    borderLayer.bounds = CGRectMake(0, 0, BORDERLAYER_WIDTH, BORDERLAYER_WIDTH);
    borderLayer.cornerRadius = BORDERLAYER_WIDTH / 2.0;
    borderLayer.masksToBounds = YES;
    borderLayer.borderColor = [UIColor colorWithRed:251/255.0 green:49/255.0 blue:89/255.0 alpha:0.5].CGColor;
    borderLayer.borderWidth = BORDERWIDTH_FROM;
    [self.layer addSublayer:borderLayer];
    _borderLayer = borderLayer;
    
    // 红色中心
    CALayer *centerlayer = [CALayer layer];
    centerlayer.backgroundColor = [UIColor colorWithRed:251/255.0 green:49/255.0 blue:89/255.0 alpha:1].CGColor;
    centerlayer.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    centerlayer.bounds = CGRectMake(0, 0, CENTERLAYER_WIDTH, CENTERLAYER_WIDTH);
    centerlayer.cornerRadius = CENTERLAYER_WIDTH / 2.0;
    centerlayer.masksToBounds = YES;
    [self.layer addSublayer:centerlayer];
    _centerlayer = centerlayer;
    
    // 标签
    [self addSubview:self.titleLB];
}
#pragma mark - 懒加载
- (UILabel *)titleLB{
    if (!_titleLB) {
        _titleLB = [[UILabel alloc]initWithFrame:CGRectZero];
        _titleLB.textColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:1];
        _titleLB.textAlignment = NSTextAlignmentCenter;
        _titleLB.backgroundColor = [UIColor clearColor];
        _titleLB.text = @"按住拍";
        [_titleLB sizeToFit];
        _titleLB.center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    }
    return _titleLB;
}
@end

三：自定义SGShootControlView使用:

导入头文件SGShootControlView.h到viewcontroller.m中

#import "ViewController.h"

#import "SGShootControlView.h"

@interface ViewController ()
{
    SGShootControlView *_button;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    CGFloat x = CGRectGetMidX(self.view.bounds);
    CGFloat y = CGRectGetHeight(self.view.bounds) - 80 - 60;
    SGShootControlView *button = [[SGShootControlView alloc]initWithFrame:CGRectMake(x, y, 80, 80)];
    button.center = CGPointMake(x, button.center.y);
    [self.view addSubview:button];
    
    _button = button;
    
    [button addTarget:self action:@selector(touchDown) forControlEvents:UIControlEventTouchDown];
    [button addTarget:self action:@selector(done) forControlEvents:UIControlEventTouchUpInside | UIControlEventTouchUpOutside];
}

#pragma mark - 私有方法
- (void)touchDown{
    [_button scaleAnimation];
}
- (void)done{
    [_button resetAnimation];
}
@end

至此,仿写都行拍摄按钮动画就完成了，如果觉得有用的话记得点赞哦。