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

上一篇：高仿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;        }];    }}

                                                            详情请看Demo：喜欢❤️star一下吧，你的支持是我最大的动力！

                                                            更多：每周更新关注新浪微博！iOS开发者交流群：446310206