欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-20 12:50:10
 最近tumblr轻博客无论是web端还是移动端,都非常受欢迎,简单调研了一下,其中动画是我感兴趣的,特此写了个仿tumblr点赞心破碎动画; 1.首先看下效果...

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

1.首先看下效果:

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

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

iOS开发中仿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点赞心破碎动画效果,希望对大家有所帮助

上一篇:

下一篇: