最近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