Faux Tumblr point like heart Crush Animation in iOS

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