iOS開(kāi)發(fā)中仿Tumblr點(diǎn)贊心破碎動(dòng)畫(huà)效果
最近Tumblr輕博客無(wú)論是web端還是移動(dòng)端,都非常受歡迎,簡(jiǎn)單調(diào)研了一下,其中動(dòng)畫(huà)是我感興趣的,特此寫(xiě)了個(gè)仿Tumblr點(diǎn)贊心破碎動(dòng)畫(huà);
1.首先看下效果:
2.模仿Tumblr中的效果應(yīng)用如下:
原理:使用按鈕點(diǎn)擊Action增加兩個(gè)事件,通過(guò)改變背景hidden和frame,切換圖片,增加動(dòng)畫(huà)效果等;
setupUI及touch Action:
<span style="font-size:14px;">- (void)setupUI { // 點(diǎn)擊的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開(kāi)發(fā)中仿Tumblr點(diǎn)贊心破碎動(dòng)畫(huà)效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
IOS開(kāi)發(fā)之適配iOS10及Xcode8的注意點(diǎn)
這篇文章主要介紹了IOS開(kāi)發(fā)之適配iOS10及Xcode8的注意點(diǎn),本文給大家介紹了可能出現(xiàn)的問(wèn)題及相應(yīng)的解決方法,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看2016-10-10實(shí)例講解iOS中的CATransition轉(zhuǎn)場(chǎng)動(dòng)畫(huà)使用
CATransition類(lèi)為應(yīng)用程序的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)提供了很多可控制參數(shù),接下來(lái)我們就以幾個(gè)實(shí)例講解iOS中的CATransition轉(zhuǎn)場(chǎng)動(dòng)畫(huà)使用,需要的朋友可以參考下2016-06-06iOS開(kāi)發(fā)之tableView cell的展開(kāi)收回功能實(shí)現(xiàn)代碼
本文介紹了iOS開(kāi)發(fā)之tableView cell的展開(kāi)收回功能實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01iOS的UI開(kāi)發(fā)中Button的基本編寫(xiě)方法講解
這篇文章主要介紹了iOS的UI開(kāi)發(fā)中Button的基本編寫(xiě)方法講解,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-11-11