最近tumblr轻博客无论是web端还是移动端，都非常受欢迎，简单调研了一下，其中动画是我感兴趣的，特此写了个仿tumblr点赞心破碎动画；
1.首先看下效果：
2.模仿tumblr中的效果应用如下：
原理：使用按钮点击action增加两个事件，通过改变背景hidden和frame，切换图片，增加动画效果等；
setupui及touch action：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<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点赞心破碎动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
原文链接：http://blog.csdn.net/qq_31810357/article/details/70157789
