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