iOS中仿Tumblr点赞心破碎动画韩俊强的博客

最新推荐文章于 2023-02-17 16:55:53 发布

韩俊强

最新推荐文章于 2023-02-17 16:55:53 发布

阅读量3.8k

点赞数 1

分类专栏： iOS开发实战 iOS开发技术分享 Swift学习笔记文章标签：仿tumblr点赞效果仿Tumblr心放大仿Tumblr心破碎 QQ群446310206 韩俊强的博客

本文链接：https://blog.csdn.net/qq_31810357/article/details/70157789

版权

iOS开发技术分享同时被 3 个专栏收录

124 篇文章 33 订阅

订阅专栏

iOS开发实战

85 篇文章 1 订阅

订阅专栏

Swift学习笔记

32 篇文章 8 订阅

订阅专栏

上一篇：高仿Tumblr热度-滚动条数-JQScrollNumberLabel

最近Tumblr轻博客无论是web端还是移动端，都非常受欢迎，简单调研了一下，其中动画是我感兴趣的，特此写了个仿Tumblr点赞心破碎动画；

1.首先看下效果：

2.模仿Tumblr中的效果应用如下：

原理：使用按钮点击Action增加两个事件，通过改变背景hidden和frame，切换图片，增加动画效果等；

setupUI及touch Action：

- (void)setupUI
{
    // 点击的btn
    UIButton *praiseBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    praiseBtn.frame = CGRectMake(100, 200, KKPraiseBtnWH, KKPraiseBtnWH);
    [praiseBtn setImage:[UIImage imageNamed:@"icon_like"] forState:UIControlStateNormal];
    [praiseBtn setImage:[UIImage imageNamed:@"icon_likeon"] forState:UIControlStateSelected];
    [self.view addSubview:praiseBtn];
    [praiseBtn addTarget:self action:@selector(clickTheBtn:) forControlEvents:UIControlEventTouchUpInside];
    _praiseBtn = praiseBtn;
    
    // 放大后的btn
    _coverBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    _coverBtn.frame = praiseBtn.frame;
    _coverBtn.alpha = 0;
    [_coverBtn setImage:[UIImage imageNamed:@"big"] forState:UIControlStateSelected];
    [_coverBtn setImage:[UIImage imageNamed:@"big"] forState:UIControlStateNormal];
    [self.view insertSubview:_coverBtn belowSubview:praiseBtn];
    _cancelPraiseImg = [[UIImageView alloc]initWithFrame:CGRectMake(80, 150, KKPraiseBtnWH*2, KKPraiseBtnWH*2*KKToBrokenHeartWH)];
    _cancelPraiseImg.hidden = YES;
    _cancelPraiseImg.centerX = _praiseBtn.centerX;
    [self.view addSubview:_cancelPraiseImg];
}

-(void)clickTheBtn:(UIButton *)btn
{
    [self playAnimation];
    btn.userInteractionEnabled = NO;
    btn.selected = !btn.selected;
}
-(void)playAnimation{
    if (!_praiseBtn.selected) {
        _coverBtn.alpha = 1;
        [UIView animateWithDuration:1.0f animations:^{
            _coverBtn.frame = CGRectMake(80, 100, KKPraiseBtnWH*2, KKPraiseBtnWH*2);
            
            CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
            NSValue *value1 = [NSNumber numberWithFloat:-M_PI/180*5];
            NSValue *value2 = [NSNumber numberWithFloat:M_PI/180*5];
            NSValue *value3 = [NSNumber numberWithFloat:-M_PI/180*5];
            anima.values = @[value1,value2,value3];
            anima.repeatCount = MAXFLOAT;
            [_coverBtn.layer addAnimation:anima forKey:nil];
            
            _coverBtn.alpha = 0;
            _coverBtn.centerX = _praiseBtn.centerX;
        } completion:^(BOOL finished) {
            _coverBtn.frame = _praiseBtn.frame;
            _praiseBtn.userInteractionEnabled = YES;
        }];
    } else {
        _cancelPraiseImg.hidden = NO;
        NSArray *imgArr = [NSArray arrayWithObjects:[UIImage imageNamed:@"icon_like_broken1"],[UIImage imageNamed:@"icon_like_broken2"],[UIImage imageNamed:@"icon_like_broken3"],[UIImage imageNamed:@"icon_like_broken4"], nil];
        _cancelPraiseImg.animationImages = imgArr;
        _cancelPraiseImg.animationDuration = KKBorkenTime;
        _cancelPraiseImg.animationRepeatCount = 1;
        [_cancelPraiseImg startAnimating];
        
        [UIView animateWithDuration:KKBorkenTime animations:^{
            _cancelPraiseImg.frame = CGRectMake(80, 200, KKPraiseBtnWH*2, KKPraiseBtnWH*2*KKToBrokenHeartWH);
            _cancelPraiseImg.alpha = 0;
        }completion:^(BOOL finished) {
            _cancelPraiseImg.frame = CGRectMake(80, 150, KKPraiseBtnWH*2, KKPraiseBtnWH*2*KKToBrokenHeartWH);
            _cancelPraiseImg.alpha = 1;
            _praiseBtn.userInteractionEnabled = YES;
        }];
    }
}