iOS开发中仿Tumblr点赞心破碎动画效果

最近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点赞心破碎动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对快网idc网站的支持！

iOS开发中仿Tumblr点赞心破碎动画效果

相关文章

快网idc优惠网

相关文章

微信

快网idc优惠网

QQ交流群