很多应用都有带弹跳动画发布界面,这里用一个 UIViewController 实现这种效果,外界只要 modal出不带动画这个控制器就可以实现

#import "BSPublishVC.h"
#import "BSVerticalButton.h"
#import <POP.h>
 
@interface BSPublishVC ()
 
@end
 
@implementation BSPublishVC
 
- (void)viewDidLoad {
    [super viewDidLoad];
    //背景图征
    UIImageView *imageView = [[UIImageView alloc]init];
    imageView.frame = [UIScreen mainScreen].bounds;
    // shareBottomBackground
    imageView.image = [UIImage imageNamed:@"shareBottomBackground"];
    imageView.contentMode = UIViewContentModeScaleToFill;
    [self.view addSubview:imageView];
    
    //退出按钮
    UIButton *cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [cancelButton setTitle:@"退出" forState:UIControlStateNormal];
    [cancelButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [cancelButton setBackgroundImage:[UIImage imageNamed:@"FollowBtnBg"] forState:UIControlStateNormal];
    [cancelButton setBackgroundImage:[UIImage imageNamed:@"FollowBtnClickBg"] forState:UIControlStateHighlighted];
    CGRect frame = cancelButton.frame;
    frame.size = CGSizeMake(200, 30);
    frame.origin.y = [UIScreen mainScreen].bounds.size.height * 0.8;
    cancelButton.frame = frame;
    CGPoint point = cancelButton.center;
    point.x = [UIScreen mainScreen].bounds.size.width * 0.5;
    cancelButton.center = point;
    [cancelButton addTarget:self action:@selector(cancelButtonClick) forControlEvents:UIControlEventTouchUpInside];
    [imageView addSubview:cancelButton];
    
    
    //让一开始动画时不让控制的view失去交互,那这时在做动时点击按钮等都不会起作用
    self.view.userInteractionEnabled = NO;
    
    NSArray *buttonImages = @[@"publish-video",@"publish-picture",@"publish-text",@"publish-audio",@"publish-review",@"publish-offline"];
    NSArray *buttonTitles = @[@"发视频",@"发图片",@"发段子",@"发声音",@"审贴子",@"离线下载"];
    
    CGFloat button_w = 72;
    CGFloat button_h = button_w + 30;
    NSInteger maxLoc = 3; //最多列数
    
    //按钮弹跳动画停止后的起始 y 值
    CGFloat buttonEnd_y = ([[UIScreen mainScreen] bounds].size.height - button_h * 2) / 2;
    
    //最开始在屏幕外上方的的起始 y 值
    CGFloat buttonBegin_y = buttonEnd_y - [[UIScreen mainScreen] bounds].size.height;
    
    //按钮的起始间隙值
    CGFloat buttonStartMargin = 20;
    
    //中间的一个按钮相对于两边按钮的间隙
    CGFloat buttonMargin = ([[UIScreen mainScreen] bounds].size.width - buttonStartMargin * 2 - button_w * maxLoc) / (maxLoc - 1);
    
    for (NSInteger i = 0; i < buttonImages.count; ++i) {
        
        BSVerticalButton *button = [[BSVerticalButton alloc]init];
        
        button.tag = i;
        
        [self.view addSubview:button];
        
        [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
        
        [button setImage:[UIImage imageNamed:buttonImages[i]] forState:UIControlStateNormal];
        
        [button setTitle:buttonTitles[i] forState:UIControlStateNormal];
        
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        
        button.titleLabel.font = [UIFont systemFontOfSize:14];
        
        NSInteger loc = i % maxLoc;   //例号
        NSInteger row = i / maxLoc;   //行号
        
        CGFloat button_x = buttonStartMargin + loc * (button_w + buttonMargin);
        CGFloat buttonBginAnimation_y = buttonBegin_y + (button_h * row); //弹跳前的 y 值
        CGFloat buttonEndAnimation_y = buttonEnd_y + (button_h * row); //弹跳后的 y 值
        
        //创建pop弹簧动画对象
        POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
        
        animation.beginTime = CACurrentMediaTime() + i * 0.1; //动画开始时间
        
        animation.springBounciness = 10; //弹簧增强 0-20
        
        animation.springSpeed = 8; //弹簧速度 0-20
        
        animation.fromValue = [NSValue valueWithCGRect:CGRectMake(button_x, buttonBginAnimation_y, button_w, button_h)];
        
        animation.toValue = [NSValue valueWithCGRect:CGRectMake(button_x, buttonEndAnimation_y, button_w, button_h)];
        
        //中间的按钮添加动画
        [button pop_addAnimation:animation forKey:nil];
    }
    
    UIImageView *topImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"app_slogan"]];
    topImageView.center = CGPointMake([[UIScreen mainScreen] bounds].size.width * 0.5, [[UIScreen mainScreen] bounds].size.height * 0.2 - [[UIScreen mainScreen] bounds].size.height);
    
    
    [self.view addSubview:topImageView];
    
    //创建pop弹簧动画对象
    POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewCenter];
    
    animation.beginTime = CACurrentMediaTime() + buttonImages.count * 0.001; //动画开始时间
    
    animation.springBounciness = 10; //弹簧增强 0-20
    
    animation.springSpeed = 10; //弹簧速度 0-20
    
    CGFloat center_x = [[UIScreen mainScreen] bounds].size.width * 0.5;
    CGFloat endCenter_y = [[UIScreen mainScreen] bounds].size.height * 0.2;
    CGFloat beginCenter_y = endCenter_y - [[UIScreen mainScreen] bounds].size.height;
    
    animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(center_x, beginCenter_y)];
    
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(center_x, endCenter_y)];
    
    animation.completionBlock = ^(POPAnimation *anim, BOOL finished){
        NSLog(@"-------这里可以写动画结束后所要执行的代码...");
        
        self.view.userInteractionEnabled = YES; //动画完时让view开启交互
    };
    
    //给顶部的图片添加动画
    [topImageView pop_addAnimation:animation forKey:nil];
}
 
- (void)buttonClick:(UIButton *)button{
    
    [self cancelButtonClick];
    
    [self animationWithBlock:^{
        switch (button.tag) {
            case 0:
                NSLog(@"发视频");
                break;
            case 1:
                NSLog(@"发图片");
                break;
            case 2:
                NSLog(@"发段子");
                break;
            case 3:
                NSLog(@"发声音");
                break;
            case 4:
                NSLog(@"审贴子");
                break;
            case 5:
                NSLog(@"离线下载");
                break;
            default:
                break;
        }
    }];
    
}
 
// 退出发布界面的动画
- (void)animationWithBlock:(void (^) ())completionBlock{
    
    //退出时也不让所有的按钮或view能点击
    self.view.userInteractionEnabled = NO;
    
    for (NSInteger i = 1; i < self.view.subviews.count; ++i) {
        
        UIView *view = self.view.subviews[i];
        
        //创建pop基本动画对象
        POPBasicAnimation *animation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewCenter];
        //        POPSpringAnimation *animation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewCenter];
        
        animation.beginTime = CACurrentMediaTime() + (i - 1) * 0.085; //动画开始时间
        
        // 如果用这个基类 POPBasicAnimation  动画的执行节奏(一开始很慢, 后面很快)
        animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
        
        CGPoint center = view.center;
        CGRect frame = view.frame;
        animation.toValue = [NSValue valueWithCGPoint:CGPointMake(center.x,  frame.origin.y + SCREEN_H)];
        
        if (i == self.view.subviews.count - 1) { //说明是最后一个 view在做动画,就让执行结束的 block
            // 动画结束时调用的 block
            animation.completionBlock = ^(POPAnimation *anim, BOOL finished){
                
                NSLog(@"取消时 这里可以写动画结束后所要执行的代码...");
                [self dismissViewControllerAnimated:NO completion:nil];
                
                if (completionBlock) {
                    completionBlock();
                }
                //                !completionBlock ? : completionBlock();
            };
        }
        //给顶部的图片添加动画
        [view pop_addAnimation:animation forKey:nil];
    }
}
 
- (void)cancelButtonClick{
    
    [self animationWithBlock:nil];
}
 
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    [self animationWithBlock:nil];
}
@end

BSVerticalButton.h 自定义的垂直排布按钮

#import "BSVerticalButton.h"
 
@implementation BSVerticalButton
 
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setupUI];
    }
    return self;
}
 
- (void)awakeFromNib{
    [super awakeFromNib];
    [self setupUI];
}
  
- (void)setupUI{
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
}
 
- (void)layoutSubviews{
    [super layoutSubviews];
    
    //按钮内部图片 frame
    CGRect imageViewFrame = self.imageView.frame;
    imageViewFrame.origin.x = 0;
    imageViewFrame.origin.y = 0;
    imageViewFrame.size.width = self.bounds.size.width;
    imageViewFrame.size.height = self.bounds.size.width;
    self.imageView.frame = imageViewFrame;
    
    //按钮内部label frame
    CGRect titleLabelFrame = self.titleLabel.frame;
    titleLabelFrame.origin.x = 0;
    titleLabelFrame.origin.y = self.imageView.frame.size.height + 10;
    titleLabelFrame.size.width = self.bounds.size.width;
    self.titleLabel.frame = titleLabelFrame;
    
    //按钮自身大小
    CGRect buttonBounds = self.bounds;
    buttonBounds.size.width = self.imageView.frame.size.width;
    buttonBounds.size.height = self.imageView.bounds.size.height + self.titleLabel.bounds.size.height + 10;
    self.bounds = buttonBounds;
}
@end

OC实现带弹跳动画按钮的界面控制器view的更多相关文章

  1. WPF界面设计技巧(3)—实现不规则动画按钮

    原文:WPF界面设计技巧(3)-实现不规则动画按钮 发布了定义WPF按钮的教程后,有朋友问能否实现不规则形状的按钮,今天我们就来讲一下不规则按钮的制作. 不规则按钮的做法实际上和先前我们做不规则窗体的 ...

  2. [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

    http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...

  3. OC导航栏自定义返回按钮

    [iOS]让我们一次性解决导航栏的所有问题 在默认情况下,导航栏返回按钮长这个样子   导航栏默认返回按钮 导航栏左上角的返回按钮,其文本默认为上一个ViewController的标题,如果上一个Vi ...

  4. Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡...)

    众所周知,想要让ImageView旋转的话,可以用setRotation()让其围绕中心点旋转,但这个旋转是不带动画的,也就是旋转屏幕时图片噌的一下就转过去了,看不到旋转的过程,此UI体验不大好,为此 ...

  5. iOS开发——项目实战OC篇&类QQ黏性按钮(封装)

    类QQ粘性按钮(封装) 那个,先来说说原理吧: 这里原理就是,在界面设置两个控件一个按钮在上面,一个View在下面(同样大小),当我们拖动按钮的时候显示下面的View,view不移动,但是会根据按钮中 ...

  6. 冒泡动画按钮的简单实现(使用CSS3)

    冒泡动画按钮的简单实现(使用CSS3) 原始的参考文章是 http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/ ,基本原理是利用了 ...

  7. Android使用shape制作圆形控件及添加弹跳动画

    --------本来为作者原创,未经同意禁止转载 前言:我们在很多时候都需要在res/drawable文件夹下创建相应的xml文件来为控件添加一些样式效果,比如按钮按下时的按钮样式变化.或者指定按钮的 ...

  8. bootstrap带图标的按钮与图标做连接

    bootstrap通过引入bootstrap的JS与css文件,给元素添加class属性即可. 使用图标只需要加入一个span,class属性设置为对应的图标属性即可.图标对应的class属性可以参考 ...

  9. uwp - 做一个相对炫酷的动画按钮/按钮动画

    原文:uwp - 做一个相对炫酷的动画按钮/按钮动画 看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验.效果图: 动画分为几个部分,分别是:内圆从中心 ...

随机推荐

  1. SSH网上商城---使用ajax完成用户名是否存在异步校验

    小伙伴在上网的时候,需要下载或者观看某些视频资料,更或者是在逛淘宝的时候,我们都需要注册一个用户,当我们填写好各种信息,点击确定的时候,提示用户名已经存在,小编就想,为什么当我们填写完用户名的时候,她 ...

  2. 【OpenGL】详解第一个OpenGL程序

    写在前面 OpenGL能做的事情太多了!很多程序也看起来很复杂.很多人感觉OpenGL晦涩难懂,原因大多是被OpenGL里面各种语句搞得头大,一会gen一下,一会bind一下,一会又active一下. ...

  3. 【一天一道Leetcode】#203.Remove Linked List Elements

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 我的个人博客已创建,欢迎大家持续关注! 一天一道le ...

  4. MyBatis与MySQL交互

    MyBatis是我接触到的第一个框架,下面谈一谈我第一次使用MyBatis时的感悟. 首先是一些准备工作 下载相关的jar包.到GitHub上就行,上面有全面和完整的jar文件 在eclipse上安装 ...

  5. Cocos2D将v1.0的tileMap游戏转换到v3.4中一例(五)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 为了暂时不影响原来的cat移动方法,我们在CatSprite.m ...

  6. MariaDB存储引擎

    MariaDB存储引擎 存储引擎就是指表的类型.数据库的存储引擎决定了表在计算机中的存储方式.存储引擎的概念是MariaDB的特点,而且是一种插入式的存储引擎概念.这决定了MariaDB数据库中的表可 ...

  7. 【leetcode76】Intersection of Two Arrays II

    题目描述: 给定两个数组求他们的公共部分,输出形式是数组,相同的元素累计计数 例如: nums1 = [1, 2, 2, 1], nums2 = [2, 2], return [2]. 原文描述: G ...

  8. Android学习笔记:对Android应用进行单元测试

     第一步:在AndroidManifest.xml中加入如下两段代码: <manifest xmlns:android="http://schemas.android.com/ap ...

  9. ABB机器人基础培训资料整理与总结

    之前对机械臂了解较少,这方面知识比较匮乏.只使用过PowercCube六自由度机械臂. 感谢ABB公司何老师的耐心指导. 学习资料汇总:(最重要的ABB Robot 官网就不列出了,这里以中文资料为主 ...

  10. Pixelmetrix :OTT Media Grinder (OTT TV 质量评价设备)

    有关OTT TV 质量评价方法方面的研究少之又少.国内貌似还几乎没有相关的研究.不过在国外已经找到相关的产品了,翻译了一下产品手册的部分内容,很有参考价值,尤其是其提出的8个指标. 概述 OTT Me ...