效果展示
功能展示效果
实现思路
- 自定义一个UIView类 来控制背景展示和动画效果 （slideMenuView）
- 添加模糊背景
- 划入菜单栏
- 思考：如何让view动起来？多次绘制（动画基于绘制）
- 通过2个辅助view，求出它们的差值，获取到一组动态的数据
- CADisplayLink
- 添加按钮
- 自定义一个UIView类 来控制Button的属性配置和动画效果 （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];
//添加手势
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);
}
-
添加动画和配置菜单
#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];
}
}
-
核心代码处理,根据两个View计算差值获取弧度做动画效果
//添加定时器
- (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];
}
说明 setNeedsDisplay 会调用drawRect方法重新布局界面
-
按钮点击
//点击按钮
-(void)switchAcition{
if (!swiched) {
//1.添加模糊背景
[keyWindow insertSubview:blurView belowSubview:self];
//2.划入菜单栏
[UIView animateWithDuration:.3 animations:^{
self.frame = self.bounds;
blurView.alpha = 1;
}];
//3.添加弹簧动画
[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];
//添加按钮的动画
[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);
}];
}
-
移除定时器
#pragma mark - Actions
//移除定时器
- (void)removeDisplayLink{
[displayLink invalidate];
displayLink = nil;
}
核心类 - slideMenuBtn类 （UIView类型,配置菜单button动画和属性配置）
-
定义属性 初始化配置和回调
- (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{
//先添加画布
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];
//设置描边颜色
[[UIColor whiteColor] setStroke];
path.lineWidth = 1;
[color setFill];
//设置描边和填充
[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，则白色边框会模糊,(猜测：在进行填充时，会影响边框)
CGRectInset使用：平移且缩小
