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

软件编程 IOS 分类:[default] 更新日期: 2017-04-01
这篇文章主要介绍了iOS开发中仿Tumblr点赞心破碎动画效果,本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • JavaScript中的正则表达式(推荐)
    正则表达式通常用于在文本中查找匹配的字符串,js正则表达式在程序开发中应用非常广泛,本文给大家介绍JavaScript 中的正则表达式推荐,感兴趣的朋友一起学习吧正则表达式的大致匹配过程是:依次拿出表达式和文本中的字符比较,如果每一个字符都能匹配,则匹配成功:一旦有匹配不成功的字符则匹配失败. 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词 ...
  • php项目开发中用到的快速排序算法分析
    这篇文章主要介绍了php项目开发中用到的快速排序算法,结合实例形式详细分析了php快速排序的原理与使用方法,需要的朋友可以参考下本文实例讲述了php项目开发中用到的快速排序算法.分享给大家供大家参考,具体如下: 实际上在,做web开发,比较少遇到使用一些算法之类的,毕竟不是做搜索引擎,也不是写底层(比如写个类似于mysql这样的数据库,里面需要自己实现排序算 ...
  • 解读ASP.NET5&MVC6系列教程1:ASP.NET5简介
    这篇文章主要介绍ASP.NET 5简介以及对各个版本号进行解释,ASP.NET 5中新的变化,需要的朋友可以参考下.ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一个.NET Core的东西. 在.NET C ...
  • ASP.NET(C#)WebApi通过文件流下载文件的实例
    这篇文章主要介绍了ASP.NETC# Web Api通过文件流下载文件的方法,提供源码下载,需要的朋友可以参考下.下载文件到本地是很多项目开发中需要实现的一个很简单的功能.说简单,是从具体的代码实现上来说的,.NET的文件下载方式有很多种,本示例给大家介绍的是ASP.NET Web Api方式返回HttpResponseMessage下载文件到本地.实现的方 ...
  • 提高代码可读性的十大注释技巧分享
    这篇文章主要介绍了提高代码可读性的十大注释技巧,详细分析了编程开发中常用的代码注释方法,需要的朋友可以参考下本文讲述了提高代码可读性的十大注释技巧.分享给大家供大家参考,具体如下: 很多程序员在写代码的时候往往都不注意代码的可读性,让别人在阅读代码时花费更多的时间.其实,只要程序员在写代码的时候,注意为代码加注释,并以合理的格式为代码加注释,这样就方便别人查 ...
  • PHP微信开发之查询微信精选文章
    这篇文章主要为大家详细介绍了PHP微信开发之简单实现查询微信精选文章的相关资料,感兴趣的小伙伴们可以参考一下查询微信里的一些精选的,点击量比较大的文章. 别忘记申请apikey(登录百度账号即可获取),要完成的功能是: 1.用户回复"文章",公众号要返回文章分类的编号(比如9.科技). 2.用户回复wz9,1,腾讯     则能返回科技类 ...
猜你喜欢