iOS 模仿Pokemon Go主页的动画Menu

YHCustomMenu：github地址

前言

那天我没事申请了个美国区的AppleID，下了个Pokemon Go，注册了个账号，然后进入官网，看到了这样一个菜单栏。

是不是很好看？ 看完的我少女心爆棚啊~~~~

于是着手在iOS上实现，其实很简单。

主要是点击事件和动画的结合，动画中包含着图片的渲染 以及那个彩色的覆盖视图的移动动画。

附上我第一次做的效果图。直接用另一个View覆盖的，所以根本不是我想要的效果。

于是我换了种思路，我想是不是图片是固定的，经过渲染而得的不同颜色呢？

于是进行实践，又有了下面的效果图。

差不多了，其他需要按照需求优化即可。

正文

我的创作思路，我总共创建了两个自定义view，一个是Menu上的ButtonView，我管它叫YHCustomMenuView。主要由一条彩色线，一个图标，一个彩色覆盖视图组成。

另一个就是YHCustomMenu，是由多个YHCustomMenuView组成，有number和defaultIndex以及themeColorArr和iconImgArr四个参数，需要我们自己设置。

主要代码：

YHCustomMenuView.h

#import <UIKit/UIKit.h>@interface YHCustomMenuView : UIView//图标@property (nonatomic, retain) UIImage *iconImg;//整体颜色@property (nonatomic, retain) UIColor *themeColor;//图片上的icon@property (nonatomic, retain) UIImageView *iconImgView;@end

YHCustomMenuView.m

#import "YHCustomMenuView.h"@interface YHCustomMenuView ()//彩色覆盖视图@property (nonatomic, retain) UIView *colorfulView;//白色底图的彩色线条@property (nonatomic, retain) UIView *lineView;@end@implementation YHCustomMenuView- (instancetype)initWithFrame:(CGRect)frame {    self = [super initWithFrame:frame];    if (self) {        [self addAllSubViews];    }    return self;}//添加所有的子视图- (void)addAllSubViews {    //所有的frame基于父视图设计    CGFloat width = self.frame.size.width;    CGFloat height = self.frame.size.height;        self.lineView =[[UIView alloc] initWithFrame:CGRectMake(width-5,0, 5, height)];\        self.iconImgView = [[UIImageView alloc] initWithFrame:CGRectMake(width * 0.35,height *0.35, width *0.3, width *0.3)];    self.iconImgView.userInteractionEnabled = YES;        self.colorfulView = [[UIView alloc] initWithFrame:CGRectMake(-width, 0,width , height)];        [self addSubview:self.lineView];    [self addSubview:self.colorfulView];    [self addSubview:self.iconImgView];    [self bringSubviewToFront:self.iconImgView];    }//设置图标的时候需要使其能够被渲染颜色 方便动画中的变色- (void)setIconImg:(UIImage *)iconImg {    UIImage *img = [iconImg imageWithRenderingMode:(UIImageRenderingModeAlwaysTemplate)];    self.iconImgView.image = img;    }//统一设置主题颜色 使其看起来和谐美观- (void)setThemeColor:(UIColor *)themeColor {    self.lineView.backgroundColor = themeColor;    self.colorfulView.backgroundColor = themeColor;    [self.iconImgView setTintColor:themeColor];}@end

YHCustomMenu.h

#import <UIKit/UIKit.h>#import "YHCustomMenuView.h"@interface YHCustomMenu : UIView//按钮的数量@property (nonatomic, assign) NSInteger number;//自定义图标@property (nonatomic, strong) NSArray *iconImgArr;//自定义颜色@property (nonatomic, strong) NSArray *themeColorArr;//默认选择页@property (nonatomic, assign) NSInteger defaultIndex;@end

YHCustomMenu.m

#import "YHCustomMenu.h"#define SCREEHEIGHT ([UIScreen mainScreen].bounds.size.height - 20)@interface YHCustomMenu ()//用于盛放所有自定义菜单视图的数组@property (nonatomic,retain) NSMutableArray *allViewsArr;//用于盛放所有颜色的数组@property (nonatomic,retain) NSMutableArray *allColorArr;@end@implementation YHCustomMenu- (instancetype)initWithFrame:(CGRect)frame {    self = [super initWithFrame:frame];    if (self) {    }    return self;}- (NSMutableArray *)allViewsArr {    if (!_allViewsArr) {        self.allViewsArr = [[NSMutableArray alloc] init];    }    return _allViewsArr;}- (NSMutableArray *)allColorArr {    if (!_allColorArr) {        self.allColorArr = [[NSMutableArray alloc] init];    }    return _allColorArr;}//设置数字之后才能添加 自定义菜单视图- (void)setNumber:(NSInteger)number {    CGFloat width = self.frame.size.width;    CGFloat height = self.frame.size.height;    for (int i = 0; i < number; i ++) {        YHCustomMenuView *view = [[YHCustomMenuView alloc] initWithFrame:CGRectMake(0,height/number * i,width,height/number )];        view.tag = 10000+i;        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];        [view addGestureRecognizer:tap];        [self addSubview:view];        [self.allViewsArr addObject:view];    }}//设置图标数组后才能设置 自定义菜单视图的 图标- (void)setIconImgArr:(NSArray *)iconImgArr {    for (int i = 0; i < self.allViewsArr.count; i++) {        YHCustomMenuView *view = self.allViewsArr[i];        view.iconImg = [UIImage imageNamed:iconImgArr[i]];    }}//设置主题颜色数组后才能设置 自定义菜单视图的 主题颜色- (void)setThemeColorArr:(NSArray *)themeColorArr {    [self.allColorArr addObjectsFromArray:themeColorArr];    for (int i = 0; i < self.allViewsArr.count; i++) {        YHCustomMenuView *view = self.allViewsArr[i];        view.themeColor = themeColorArr[i];    }}//设置默认选择的分页 会选中该分页 不选则无- (void)setDefaultIndex:(NSInteger)defaultIndex {    YHCustomMenuView *view = self.allViewsArr[defaultIndex - 1];    [self changeCenterForView:view];}//添加点击事件- (void)tapAction:(UITapGestureRecognizer *)tap {    YHCustomMenuView *view = (YHCustomMenuView *)[tap view];    [self changeCenterForView:view];}//icon颜色的变化以及彩色遮挡物的位置动画- (void)changeCenterForView:(YHCustomMenuView *)customView {    for (YHCustomMenuView *view in self.subviews) {        NSArray *viewArr = [view subviews];        if ([view isEqual:customView]) {            view.userInteractionEnabled = NO;            for (UIView *view in viewArr) {                if (view.frame.size.width == self.frame.size.width) {                    [UIView animateWithDuration:0.3 delay: 0 options: UIViewAnimationOptionCurveLinear animations: ^{                        CGPoint center = view.center;                        center.x += SCREEHEIGHT/7;                        view.center = center;                        [customView.iconImgView setTintColor:[UIColor whiteColor]];                    } completion: nil];                }            }        } else {            view.userInteractionEnabled = YES;            for (UIView * subview in viewArr) {                if (subview.frame.size.width == self.frame.size.width) {                    if (subview.frame.origin.x >= 0) {                        [UIView animateWithDuration:0.3 delay: 0 options: UIViewAnimationOptionCurveLinear animations: ^{                            CGPoint center = subview.center;                            center.x -= SCREEHEIGHT/7;                            subview.center = center;                            [view.iconImgView setTintColor:self.allColorArr[(view.tag - 10000)]];                        } completion: nil];                    }                }            }        }    }}@end

使用示例：

到此结束。

有些细节我可能没有处理好，代码质量也不高。

所以希望大家能够指出我的问题和错误，共同学习，共同进步。

github地址在上面