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

来源:互联网 发布:网络禁书100本百度云 编辑:程序博客网 时间:2024/03/29 06:48

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

0 0
原创粉丝点击