iOS 仿抖音直播头像缩放动画

效果图

仿抖音直播头像缩放效果, 简单写了demo, 思路简单, 直接用的递归重复调用, 呈上所有代码.

@interface YCXHeaderZoomViewController ()
@property (nonatomic,strong) UIView *borderZoomView;  // 缩放的边框
@property (nonatomic,strong) UIView *imageView;       // 缩放的头像
@property (nonatomic,assign) NSTimeInterval animateTime; // 动画时间
@end

@implementation YCXHeaderZoomViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self customView];
}

- (void)customView {
    
    self.animateTime = 0.4;
    
    UIView *bgView = [[UIView alloc] init];
    //bgView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:bgView];
    [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.width.height.mas_equalTo(50);
    }];
    
    // 固定边框
    UIView *borderView = [[UIView alloc] init];
    borderView.layer.cornerRadius = 25;
    borderView.layer.borderColor = [UIColor greenColor].CGColor;
    borderView.layer.borderWidth = 1;
    [bgView addSubview:borderView];
    [borderView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(bgView);
    }];
    
    // 缩放边框
    UIView *borderZoomView = [[UIView alloc] init];
    borderZoomView.layer.cornerRadius = 25;
    borderZoomView.layer.borderColor = [UIColor greenColor].CGColor;
    borderZoomView.layer.borderWidth = 1;
    [bgView addSubview:borderZoomView];
    [borderZoomView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(bgView);
    }];
    self.borderZoomView = borderZoomView;
    
    // 缩放头像
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.image = [UIImage imageNamed:@"datu"];
    imageView.backgroundColor = [UIColor magentaColor];
    imageView.layer.cornerRadius = 48/2.0;
    imageView.layer.masksToBounds = YES;
    [bgView addSubview:imageView];
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.offset(1);
        make.bottom.right.offset(-1);
    }];
    self.imageView = imageView;
    
    // 缩放动画
    [self zoomView];
}

// 核心代码
- (void)zoomView {
    // 具体缩放大小 效果根据需要自己调整
    // 边框放大
    [UIView animateWithDuration:self.animateTime+0.1 animations:^{
        self.borderZoomView.transform = CGAffineTransformMakeScale(1.15, 1.15); // 边框放大
        self.borderZoomView.alpha = 0.08; // 透明度渐变
    } completion:^(BOOL finished) {
       // 恢复默认
        self.borderZoomView.transform = CGAffineTransformMakeScale(1, 1);
        self.borderZoomView.alpha = 1;
    }];
    
    // imageView先缩小 再恢复
    [UIView animateWithDuration:self.animateTime animations:^{
        self.imageView.transform = CGAffineTransformMakeScale(0.88, 0.88); // 缩小
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:self.animateTime animations:^{
             self.imageView.transform = CGAffineTransformMakeScale(1, 1); // 放大
        } completion:^(BOOL finished) {
            // 重新调用
            [self zoomView];
        }];
    }];
}
@end

--> 点赞有没有 <--