iOS中 仿Tumblr点赞心破碎动画 韩俊强的博客-阿里云开发者社区

开发者社区> 韩俊强> 正文

iOS中 仿Tumblr点赞心破碎动画 韩俊强的博客

简介: 上一篇:高仿Tumblr热度-滚动条数-JQScrollNumberLabel 最近Tumblr轻博客无论是web端还是移动端,都非常受欢迎,简单调研了一下,其中动画是我感兴趣的,特此写了个仿Tumblr点赞心破碎动画; 1.
+关注继续查看

上一篇:高仿Tumblr热度-滚动条数-JQScrollNumberLabel

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


1.首先看下效果:



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



原理:使用按钮点击Action增加两个事件,通过改变背景hidden和frame,切换图片,增加动画效果等;

setupUI及touch Action:

- (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];
        _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;
        }];
    }
}


                                                            详情请看Demo:喜欢️star一下吧,你的支持是我最大的动力!

                                                            更多:每周更新关注新浪微博!iOS开发者交流群:446310206


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10051 0
iOS开发UI篇—核心动画(转场动画和组动画)
iOS开发UI篇—核心动画(转场动画和组动画) 一、转场动画简单介绍 CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器...
567 0
iOS开发UI篇—核心动画简介
iOS开发UI篇—核心动画简介 一、简单介绍 Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍。也就是说,使用少量的代码就可以实现非常强大的功能。
751 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13865 0
iOS开发UI篇—核心动画(关键帧动画)
iOS开发UI篇—核心动画(关键帧动画) 一、简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析: values:就是上述的NSArray对象。
613 0
+关注
韩俊强
高级软件开发工程师, 博客专家, 阿里云MVP, CSDN十大博客之星, 十佳专栏 。
494
文章
7
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载