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

 更新时间:2017年04月13日 15:53:15   作者:韩俊强  
这篇文章主要介绍了iOS开发中仿Tumblr点赞心破碎动画效果,本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下

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

1.首先看下效果:

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

相关文章

  • IOS开发之适配iOS10及Xcode8的注意点

    IOS开发之适配iOS10及Xcode8的注意点

    这篇文章主要介绍了IOS开发之适配iOS10及Xcode8的注意点,本文给大家介绍了可能出现的问题及相应的解决方法,非常不错具有参考借鉴价值,感兴趣的朋友一起看看
    2016-10-10
  • iOS NSDate中关于夏令时的坑

    iOS NSDate中关于夏令时的坑

    这篇文章主要给大家介绍了关于iOS NSDate中夏令时的坑,以及iOS 时间字符串&NSDate&时间戳 相互转换的相关内容,分享出来供大家参考学习,需要的朋友可以参考借鉴,下面随小编来一起学习学习吧
    2018-08-08
  • 实例讲解iOS中的CATransition转场动画使用

    实例讲解iOS中的CATransition转场动画使用

    CATransition类为应用程序的转场动画提供了很多可控制参数,接下来我们就以几个实例讲解iOS中的CATransition转场动画使用,需要的朋友可以参考下
    2016-06-06
  • iOS开发之tableView cell的展开收回功能实现代码

    iOS开发之tableView cell的展开收回功能实现代码

    本文介绍了iOS开发之tableView cell的展开收回功能实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • iOS获取当前设备WiFi信息的方法

    iOS获取当前设备WiFi信息的方法

    很多公司现在都在做免费WIFI,车站、公交、地铁、餐厅,只要是人员密集流动的地方就有WIFI,免费WIFI从最初的网页认证方式也逐渐向客户端认证方式偏移。本文主要介绍iOS获取当前设备WiFi信息的方法,有需要的可以参考借鉴。
    2016-09-09
  • iOS仿微信图片分享界面实现代码

    iOS仿微信图片分享界面实现代码

    这篇文章主要为大家详细介绍了iOS仿微信相册界面翻转过渡动画效果,微信采用界面翻转的过渡动画跳转到评论界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • iOS的UI开发中Button的基本编写方法讲解

    iOS的UI开发中Button的基本编写方法讲解

    这篇文章主要介绍了iOS的UI开发中Button的基本编写方法讲解,代码基于传统的Objective-C,需要的朋友可以参考下
    2015-11-11
  • ios的签名机制详解

    ios的签名机制详解

    这篇文章主要介绍了ios的签名机制的相关资料,帮助大家更好的理解和学习使用ios开发,感兴趣的朋友可以了解下
    2021-04-04
  • iOS CoreAnimation 图层几何学

    iOS CoreAnimation 图层几何学

    本文主要介绍了iOS CoreAnimation图层几何学,图层几何所讲主要是有关图层的位置,尺寸等几何类属性。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • swift 隐式可选型实例详解

    swift 隐式可选型实例详解

    这篇文章主要介绍了 swift 隐式可选型实例详解的相关资料,需要的朋友可以参考下
    2017-06-06

最新评论