OC实现带弹跳动画按钮的界面控制器view
很多应用都有带弹跳动画发布界面,这里用一个 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
转载于:https://www.cnblogs.com/chenweb/p/7171656.html
OC实现带弹跳动画按钮的界面控制器view相关推荐
- WPF界面设计技巧(3)—实现不规则动画按钮
WPF界面设计技巧(3)-实现不规则动画按钮 原文:WPF界面设计技巧(3)-实现不规则动画按钮 发布了定义WPF按钮的教程后,有朋友问能否实现不规则形状的按钮,今天我们就来讲一下不规则按钮的制作. ...
- 让 ScrollViewer 的滚动带上动画
让 ScrollViewer 的滚动带上动画 原文:让 ScrollViewer 的滚动带上动画 版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.欢迎转载. ...
- php带参数跳转页面,如何带参数跳转php界面_后端开发
访问php报404错误的原因_后端开发 访问php报404错误的原因:1.php文件丢失或被删除而导致的,可以通过检查php文件是否存在来解决:2.URL访问路径输入错误所导致的,可以通过仔细核对UR ...
- bootstrap带图标的按钮与图标做连接
bootstrap通过引入bootstrap的JS与css文件,给元素添加class属性即可. 使用图标只需要加入一个span,class属性设置为对应的图标属性即可.图标对应的class属性可以参考 ...
- Flash:Flash动画设计软件界面的简介、Flash AS 3.0代码编程入门教程之详细攻略
Flash:Flash动画设计软件界面的简介.Flash AS 3.0代码编程入门教程之详细攻略 目录 Flash动画设计软件界面的简介 快捷键 菜单栏 下边工具栏 右边工具栏 工具箱 Flash A ...
- 用VC++制作播放AVI视频流的动画按钮
Visual C++ 开发环境为控件提供的自绘制功能使程序员能够充分发挥自己的创造性来设计比较漂亮的程序界面.所谓AVI按钮是指每当鼠标从按钮上经过时就播放一段按钮提示的AVI,在许多的游戏程序以及三 ...
- 前端实现炫酷动效_12个炫酷实用的HTML5带发光动画
本文作者html5tricks,转载请注明出处 在网页设计中,很多元素都可以实现发光的动画效果,比如输入框.文字.进度条等等.这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩.今天我们 ...
- Qt 自定义动画按钮(超酷炫)
整体的界面是 一个主 widget 套着3个 widget(微信,支付宝,银行卡) 点击widget时 出现一个dialog 的二维码 下面上代码 二维码窗口 // 二维码窗口 qrcodedialo ...
- HTML5带发光动画
1.纯CSS3实现超炫酷的萤火虫动画 今天要为大家带来一款很有意思的纯CSS3动画,这次我们要利用CSS3的一些动画属性来绘制一只闪闪发光的萤火虫,和之前分享的纯CSS3蚱蜢与纯CSS3打火机类似,这 ...
- html css 带图标按钮,Bootstrap带图标的按钮样式
这是一款基于bootstrap的带图标的按钮样式.这组按钮在bootstrap按钮的基础上,通过附加的HTML元素来构建小图标,并通过CSS3来制作鼠标hover动画效果. 使用方法 在页面中引入bo ...
最新文章
- 为什么人工智能被过度炒作?
- 2021年全球十大工程成就,中国有几个? | 科技袁人
- 完全卸载Oracle方法(亲测有效)
- 了解区块链,从挖矿开始
- spring框架学习(一)入门
- 从Proxy到Vue3数据绑定
- 数据中台(二)数据质量分析及提升
- .NET 通用权限设计
- final修饰的是引用还是引用的对象
- Leetcode: Multiply Strings
- 想靠大数据创业 你需要了解什么
- lua虚拟机字节码修改_Java虚拟机(JVM)面试题大集合
- 《程序员修炼之道:从小工到专家》阅读笔记03
- 高擎信息安全大旗,打造“互联网+”新服务模式
- 测试人员的发展瓶颈:35岁之后我们该何去何从...
- Java的多线程机制系列:(四)不得不提的volatile及指令重排序(happen-before)
- 感知器算法超详细讲解实战【原理+手撸代码实现】+spark应用实践
- nginx red5 流媒体服务器
- 无线网络稳定性测试方案
- 论文进展-关于小样本学习的一些思考和疑问
热门文章
- python sdk怎么用_python - alipay sdk 使用 及 注意点
- 安装nvidia-docker
- Python基于 ImageAI 模块实践 idenprof数据集识别预测分析
- Linux 命令之——文件行数查询命令温习
- Python程序的采样分析神器py-spy模块实践
- Python使用datetime模块进行简单的日期换算与计算
- 面试必会 InnoDB的多版本并发控制(MVCC)
- qt编写的android菜单,Qt for Android实现与webview的交互
- phpstudy2018启动关闭_phpstudy2018搭建Apache https 开启php_openssl
- python visa模块_python – Mac OS X上的NI VISA pyVisa(Snow Leopard)