效果展示
功能展示效果
實(shí)現(xiàn)思路
- 自定義一個(gè)UIView類 來(lái)控制背景展示和動(dòng)畫(huà)效果 （slideMenuView）
- 添加模糊背景
- 劃入菜單欄
- 思考：如何讓view動(dòng)起來(lái)？多次繪制（動(dòng)畫(huà)基于繪制）
- 通過(guò)2個(gè)輔助view庇忌，求出它們的差值哄芜，獲取到一組動(dòng)態(tài)的數(shù)據(jù)
- CADisplayLink
- 添加按鈕
- 自定義一個(gè)UIView類 來(lái)控制Button的屬性配置和動(dòng)畫(huà)效果 （slideMenuBtn）
核心類 - slideMenuView
-
屬性配置
{
UIVisualEffectView *blurView;
UIView *helperSideView;
UIView *helperCenterView;
UIWindow *keyWindow;
BOOL swiched;
CGFloat diff;
UIColor *menuColor;
CADisplayLink *displayLink;
NSInteger animationCount;
}
-
初始化 -lifeCycle
#pragma mark - lifeCycle
-(id)initWithBtnTitle:(NSArray *)btnTitles{
self = [super init];
if (self) {
menuColor = [UIColor colorWithRed:0 green:0.722 blue:1 alpha:1];
keyWindow = [UIApplication sharedApplication].keyWindow;
blurView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];
blurView.frame = keyWindow.frame;
blurView.alpha = 0.5;
self.frame =CGRectMake(-(CGRectGetWidth(keyWindow.frame)/2 + menuBlankWidth), 0, CGRectGetWidth(keyWindow.frame)/2 + menuBlankWidth, CGRectGetHeight(keyWindow.frame));
self.backgroundColor = [UIColor clearColor];
// [keyWindow addSubview:self];
helperSideView = [[UIView alloc] initWithFrame:CGRectMake(-40, 0, 40, 40)];;
// helperSideView.backgroundColor = [UIColor redColor];
helperCenterView = [[UIView alloc] initWithFrame:CGRectMake(-40, CGRectGetHeight(keyWindow.bounds)/2-20, 40, 40)];;
// helperCenterView.backgroundColor = [UIColor orangeColor];
[keyWindow addSubview:helperSideView];
[keyWindow addSubview:helperCenterView];
[keyWindow insertSubview:self belowSubview:helperSideView];
//添加手勢(shì)
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissView)];
[blurView addGestureRecognizer:tap];
//添加按鈕
[self addBtnTitles:btnTitles];
}
return self;
}
-
繪制
- (void)drawRect:(CGRect)rect{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 0)];
[path addLineToPoint:CGPointMake(CGRectGetWidth(keyWindow.frame)/2, 0)];
[path addQuadCurveToPoint:CGPointMake(CGRectGetWidth(keyWindow.frame)/2, CGRectGetHeight(keyWindow.frame)) controlPoint:CGPointMake(CGRectGetWidth(keyWindow.frame)/2 + diff, CGRectGetHeight(keyWindow.frame)/2)];
[path addLineToPoint:CGPointMake(0, CGRectGetHeight(keyWindow.frame))];
[path closePath];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddPath(context, path.CGPath);
[menuColor set];
CGContextFillPath(context);
}
-
添加動(dòng)畫(huà)和配置菜單
#pragma mark - func
- (void)addBtnAnim{
for (int i = 0; i < self.subviews.count; i++) {
UIView *btn = self.subviews[i];
btn.transform = CGAffineTransformMakeTranslation(-100, 0);
[UIView animateWithDuration:.7 delay:i*(0.3/self.subviews.count) usingSpringWithDamping:.6 initialSpringVelocity:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
btn.transform = CGAffineTransformIdentity;
} completion:nil];
}
}
- (void)addBtnTitles:(NSArray *)titles{
CGFloat space = (CGRectGetHeight(keyWindow.bounds) - titles.count*menuBtnHeight - (titles.count-1)*buttonSpace)/2;
for (int i = 0; i < titles.count; i++) {
slideMenuBtn *btn = [[slideMenuBtn alloc] initWithTitle:titles[i]];
btn.center = CGPointMake(CGRectGetWidth(keyWindow.bounds)/4, space + menuBtnHeight*i + buttonSpace*i);
btn.bounds = CGRectMake(0, 0, CGRectGetWidth(keyWindow.bounds)/2 - 20*2, menuBtnHeight);
[self addSubview:btn];
}
}
-
核心代碼處理,根據(jù)兩個(gè)View計(jì)算差值獲取弧度做動(dòng)畫(huà)效果
//添加定時(shí)器
- (void)getDiff{
if (!displayLink) {
displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction:)];
[displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}
}
- (void)displayLinkAction:(CADisplayLink *)link{
// NSLog(@"%@",NSStringFromCGRect(helperSideView.frame));
CALayer *layer1 = helperSideView.layer.presentationLayer;
CALayer *layer2 = helperCenterView.layer.presentationLayer;
CGRect r1 = [[layer1 valueForKeyPath:@"frame"] CGRectValue];
CGRect r2 = [[layer2 valueForKeyPath:@"frame"] CGRectValue];
diff = r1.origin.x - r2.origin.x;
NSLog(@"%f",diff);
[self setNeedsDisplay];
}
說(shuō)明 setNeedsDisplay 會(huì)調(diào)用drawRect方法重新布局界面
-
按鈕點(diǎn)擊
//點(diǎn)擊按鈕
-(void)switchAcition{
if (!swiched) {
//1.添加模糊背景
[keyWindow insertSubview:blurView belowSubview:self];
//2.劃入菜單欄
[UIView animateWithDuration:.3 animations:^{
self.frame = self.bounds;
blurView.alpha = 1;
}];
//3.添加彈簧動(dòng)畫(huà)
[UIView animateWithDuration:.7 delay:0 usingSpringWithDamping:.5 initialSpringVelocity:.9 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
helperSideView.center = CGPointMake(keyWindow.center.x, CGRectGetHeight(helperSideView.bounds)/2);
} completion:nil];
[UIView animateWithDuration:.7 delay:0 usingSpringWithDamping:.8 initialSpringVelocity:2 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
helperCenterView.center = keyWindow.center;
} completion:^(BOOL finished) {
[self removeDisplayLink];
}];
//獲取差值
[self getDiff];
//添加按鈕的動(dòng)畫(huà)
[self addBtnAnim];
swiched = YES;
}else{
[self dismissView];
}
}
-
取消
//消失
- (void)dismissView{
swiched = NO;
[UIView animateWithDuration:.3 animations:^{
self.frame =CGRectMake(-(CGRectGetWidth(keyWindow.frame)/2 + menuBlankWidth), 0, CGRectGetWidth(keyWindow.frame)/2 + menuBlankWidth, CGRectGetHeight(keyWindow.frame));
blurView.alpha = 0;
helperSideView.center = CGPointMake(-20, 20);
helperCenterView.center = CGPointMake(-20, CGRectGetHeight(keyWindow.bounds)/2);
}];
}
-
移除定時(shí)器
#pragma mark - Actions
//移除定時(shí)器
- (void)removeDisplayLink{
[displayLink invalidate];
displayLink = nil;
}
核心類 - slideMenuBtn類 （UIView類型,配置菜單button動(dòng)畫(huà)和屬性配置）
-
定義屬性 初始化配置和回調(diào)
- (id)initWithTitle:(NSString *)title;
@property (nonatomic, copy) void (^btnClickBlock)(void)
-
初始化
-(id)initWithTitle:(NSString *)title{
self = [super init];
if (self) {
btnTitle = title;
}
return self;
}
-
繪制界面
-(void)drawRect:(CGRect)rect{
//先添加畫(huà)布
NSLog(@"%@",NSStringFromCGRect(rect));
NSLog(@"%@",NSStringFromCGRect(CGRectInset(rect, 1, 1)));
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddRect(context, rect);
UIColor *color = [UIColor colorWithRed:0 green:0.722 blue:1 alpha:1];
UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, 1, 1) cornerRadius: rect.size.height/2];
//設(shè)置描邊顏色
[[UIColor whiteColor] setStroke];
path.lineWidth = 1;
[color setFill];
//設(shè)置描邊和填充
[path fill];
[path stroke];
NSMutableParagraphStyle *style = [[NSMutableParagraphStyle defaultParagraphStyle] mutableCopy];
style.alignment = NSTextAlignmentCenter;
NSDictionary *attr = @{NSParagraphStyleAttributeName:style,
NSFontAttributeName:[UIFont systemFontOfSize:24.0f],
NSForegroundColorAttributeName:[UIColor whiteColor]
};
CGSize size = [btnTitle sizeWithAttributes:attr];
CGRect r = CGRectMake(rect.origin.x, rect.origin.y + (rect.size.height - size.height)/2.0, rect.size.width, size.height);
[btnTitle drawInRect:r withAttributes:attr];
}
-
避坑指南
- 圓角矩形
坑：如果不用CGRectInset，則白色邊框會(huì)模糊,(猜測(cè)：在進(jìn)行填充時(shí)鲁僚，會(huì)影響邊框)
CGRectInset使用：平移且縮小
