您的位置:首页 > 其它

新浪微博,按钮依次弹出动画

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

@end
2.按钮需要外部传入图片和文字,所以定义一个按钮模型

//
//  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;
}

@end
3.按钮图片在上,文字在下,需要自定义

//
//  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];
}

@end
4.如何使用?

/**
*  点击+号按钮
*/
- (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];
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: