The recent Tumblr light blog, whether web-side or mobile, is very popular, a simple survey, where the animation is my interest, hereby wrote a faux Tumblr point like heart broken animation;
1. First look at the effect:
2. The effect that mimics Tumblr is applied as follows:
principle: Use the button to click Action to add two events, change the background hidden and frame, switch pictures, add animation effects, etc.
Setupui and Touch Action:
-(void) setupui{//click btn UIButton *praisebtn = [UIButton buttonwithtype:uibuttontypecustom]; Praisebtn.frame = CGRectMake (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; enlarged 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 (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 (+, +, kkpraisebtnwh*2, KKPraiseB TNWH*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 (+, +, KKPraiseBtn Wh*2, Kkpraisebtnwh*2*kktobrokenheartwh); _cancelpraiseimg.alpha = 0; }completion:^ (BOOL finished) {_cancelpraiseimg.frame = CGRECTMAke (Kkpraisebtnwh*2, Kkpraisebtnwh*2*kktobrokenheartwh); _cancelpraiseimg.alpha = 1; _praisebtn.userinteractionenabled = YES; }]; }}
For details, please see demo: like?? Star a bit, your support is my biggest motivation!
MORE: Weekly updates on Sina Weibo! iOS Developer Exchange Group: 446310206
Faux Tumblr point like heart Crush Animation in iOS