新浪微博,按钮依次弹出动画
2016-04-11 22:12
169 查看
1.点击modal出一个控制器
// // ComposeItemViewController.h #import <UIKit/UIKit.h> @interface ComposeItemViewController : UIViewController /** * 有多少个按钮 */ //@property(nonatomic,assign) int itemCount; /** * 菜单模型数组 */ @property(nonatomic,strong)NSArray *items; @end
// // ComposeItemViewController.m #import "ComposeItemViewController.h" #import "MenuItem.h" #import "MenuItemButton.h" @interface ComposeItemViewController () /** * 保存所有按钮菜单 */ @property(nonatomic,strong)NSMutableArray *itemButtons; @property(nonatomic,assign)int btnIndex; @property(nonatomic,strong)NSTimer *timer; @end @implementation ComposeItemViewController - (NSMutableArray *)itemButtons { if (_itemButtons == nil) { _itemButtons = [NSMutableArray array]; } return _itemButtons; } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib. // 1.添加所有的item按钮 [self setupAllBtns]; // 2.添加定时器依次让按钮动画 _timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES]; } - (void)timeChange { if (_btnIndex == self.itemButtons.count) { // 定时器停止 [_timer invalidate]; return; } UIButton *btn = self.itemButtons[_btnIndex]; [self btnAnimation:btn]; _btnIndex++; } /** * 给一个按钮做动画 */ - (void)btnAnimation:(UIButton *)btn { [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{ btn.transform = CGAffineTransformIdentity; } completion:nil]; } /** * 创建所有按钮 */ - (void)setupAllBtns { int totalCols = 3; //总列数 int col = 0; int row = 0; CGFloat x = 0; CGFloat y = 0; CGFloat wh = 100; CGFloat margin = ([UIScreen mainScreen].bounds.size.width - totalCols * wh) / (totalCols +1); CGFloat originY = 300; for (int i=0; i< _items.count; i++) { MenuItemButton *btn = [MenuItemButton buttonWithType:UIButtonTypeCustom]; col = i % totalCols; row = i / totalCols; x = margin + (margin + wh) * col; y = row * (margin + wh) + originY; btn.frame = CGRectMake(x, y, wh, wh); // 设置按钮的图片和文字 MenuItem *item = _items[i]; [btn setImage:item.image forState:UIControlStateNormal]; [btn setTitle:item.title forState:UIControlStateNormal]; // 偏移到底部 btn.transform = CGAffineTransformMakeTranslation(0, self.view.bounds.size.height); // 添加监听 [btn addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchDown]; [self.itemButtons addObject:btn]; [self.view addSubview:btn]; } } - (void)btnClicked:(UIButton *)btn { [UIView animateWithDuration:0.5 animations:^{ btn.transform = CGAffineTransformMakeScale(1.1, 1.1); } completion:nil]; } @end2.按钮需要外部传入图片和文字,所以定义一个按钮模型
// // MenuItem.h // 按钮菜单模型 #import <UIKit/UIKit.h> @interface MenuItem : NSObject @property(nonatomic,strong)NSString *title; @property(nonatomic,strong) UIImage *image; /** * 快速创建一个菜单模型 */ + (instancetype)itemWithTitle:(NSString *)title image:(UIImage *)image; @end
// // MenuItem.m #import "MenuItem.h" @implementation MenuItem + (instancetype)itemWithTitle:(NSString *)title image:(UIImage *)image { MenuItem *item = [[self alloc] init]; item.title = title; item.image = image; return item; } @end3.按钮图片在上,文字在下,需要自定义
// // MenuItemButton.h #import <UIKit/UIKit.h> @interface MenuItemButton : UIButton @end
// // MenuItemButton.m #import "MenuItemButton.h" #define kImageRatio 0.8 @implementation MenuItemButton - (void)awakeFromNib { [self setup]; } - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { [self setup]; } return self; } - (void)setup { self.imageView.contentMode = UIViewContentModeCenter; self.titleLabel.textAlignment = NSTextAlignmentCenter; } - (void)setHighlighted:(BOOL)highlighted{} // 如果通过代码设置子控件位置,都是在layoutSubviews里面 - (void)layoutSubviews { [super layoutSubviews]; // imageView CGFloat imageX = 0; CGFloat imageY = 0; CGFloat imageW = self.bounds.size.width; CGFloat imageH = self.bounds.size.height * kImageRatio; self.imageView.frame = CGRectMake(imageX, imageY, imageW, imageH); // titleLabel CGFloat labelY = imageH; CGFloat labelH = self.bounds.size.height - labelY; self.titleLabel.frame = CGRectMake(imageX, labelY, imageW, labelH); } - (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { [UIView animateWithDuration:0.5 animations:^{ self.transform = CGAffineTransformMakeScale(2.0, 2.0); self.alpha = 0.0; } completion:nil]; } @end4.如何使用?
/** * 点击+号按钮 */ - (IBAction)btnAction:(UIButton *)sender { // 创建模型数组 MenuItem *item0 = [MenuItem itemWithTitle:@"点评" image:[UIImage imageNamed:@"tabbar_compose_review"]]; MenuItem *item1 = [MenuItem itemWithTitle:@"更多" image:[UIImage imageNamed:@"tabbar_compose_more"]]; MenuItem *item2 = [MenuItem itemWithTitle:@"拍摄" image:[UIImage imageNamed:@"tabbar_compose_camera"]]; MenuItem *item3 = [MenuItem itemWithTitle:@"相册" image:[UIImage imageNamed:@"tabbar_compose_photo"]]; MenuItem *item4 = [MenuItem itemWithTitle:@"文字" image:[UIImage imageNamed:@"tabbar_compose_idea"]]; MenuItem *item5 = [MenuItem itemWithTitle:@"签到" image:[UIImage imageNamed:@"tabbar_compose_lbs"]]; ComposeItemViewController *vc = [[ComposeItemViewController alloc] init]; vc.items = @[item0,item1,item2,item3,item4,item5]; [self presentViewController:vc animated:YES completion:nil]; }
相关文章推荐
- x的n次幂
- Json数据处理协议与办法
- linux之sed用法
- codeforce 606C Sorting Railway Cars
- POJ 3255 Roadblocks(Dijstra 求次短路长度)
- 软件中反跟踪技术和软件调试
- 团队介绍
- hibernate的load和get区别
- C\C++ sizeof 陷阱&&总结
- 在Linux上启动oracle 11g OEM
- JAVA程序基础(JDK,JRE,JVM)
- java运行时内存模式学习
- elasticsearch
- 函数篇(2):20元钱你可以喝几瓶饮料?
- elasticsearch
- flex学习进度7之网络访问
- 11
- OpenCV2.4.9 + VS2013 开发环境配置
- Yii之路(第七)
- 简单论坛数据表设计