先看效果圖：

shot.gif

一：原理分析

• 首先详民，整個視圖可分為四部分：

1. button（SGShootControlView對象繼承于UIControl）：負(fù)責(zé)手勢交互和作為視圖容器搓蚪，作為borderLayer啃勉、 centerlayer茴恰、 titleLB的父視圖。
2. borderLayer： 紅色的邊框視圖borderLayer(CALayer對象)法精。
3. centerlayer：紅色的圓形居中視圖centerlayer(CALayer對象)徒河。
4. titleLB：還有“按住拍”提示文字titleLB（UILabel）（當(dāng)然這個可有可無,其實和動畫效果無關(guān)）

• 其次系馆，視圖動畫效果分為兩個部分：按住時,松開時

1. 按下時borderLayer做放大動畫，centerlayer做縮小并變成矩形顽照，titleLB隱藏由蘑，borderLayer做放大動畫結(jié)束后，再做borderLayer的邊框重復(fù)進行變寬代兵，變窄尼酿，再變寬的循環(huán)動畫。
2. 松開手時植影，先移除borderLayer邊框進行變寬裳擎，變窄，再變寬的循環(huán)動畫思币，再同時做borderLayer鹿响，centerlayer的還原動畫羡微，顯示titleLB。

二：源代碼

自定義SGShootControlView繼承自UIControl

SGShootControlView.h:

#import <UIKit/UIKit.h>
@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;
    
    // 標(biāo)簽
    [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使用:

導(dǎo)入頭文件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

至此,仿寫都行拍攝按鈕動畫就完成了惶我，如果覺得有用的話記得點贊哦拷淘。