最近Tumblr轻博客无论是web端还是移动端,都非常受欢迎,简单调研了一下,其中动画是我感兴趣的,特此写了个仿Tumblr点赞心破碎动画;
1.首先看下效果:
2.模仿Tumblr中的效果应用如下:
原理:使用按钮点击Action增加两个事件,通过改变背景hidden和frame,切换图片,增加动画效果等;
setupUI及touch Action:
<span style="font-size:14px;">- (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 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; }]; } }</span>
以上所述是小编给大家介绍的iOS开发中仿Tumblr点赞心破碎动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!
新闻热点
疑难解答