服务器之家

服务器之家 > 正文

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

时间:2021-03-13 16:35     来源/作者:韩俊强

 最近tumblr轻博客无论是web端还是移动端,都非常受欢迎,简单调研了一下,其中动画是我感兴趣的,特此写了个仿tumblr点赞心破碎动画;

1.首先看下效果:

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

2.模仿tumblr中的效果应用如下:

iOS开发中仿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

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部