iOS 仿抖音直播頭像縮放動畫

效果圖

仿抖音直播頭像縮放效果, 簡單寫了demo, 思路簡單, 直接用的遞歸重復(fù)調(diào)用, 呈上所有代碼.

@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 {
    // 具體縮放大小 效果根據(jù)需要自己調(diào)整
    // 邊框放大
    [UIView animateWithDuration:self.animateTime+0.1 animations:^{
        self.borderZoomView.transform = CGAffineTransformMakeScale(1.15, 1.15); // 邊框放大
        self.borderZoomView.alpha = 0.08; // 透明度漸變
    } completion:^(BOOL finished) {
       // 恢復(fù)默認(rèn)
        self.borderZoomView.transform = CGAffineTransformMakeScale(1, 1);
        self.borderZoomView.alpha = 1;
    }];
    
    // imageView先縮小 再恢復(fù)
    [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) {
            // 重新調(diào)用
            [self zoomView];
        }];
    }];
}
@end
--> 點贊有沒有?? <--
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容