CoreAnimation | 核心动画 | 侧滑动画 | 菜单

效果展示

功能展示效果

实现思路

1. 自定义一个UIView类 来控制背景展示和动画效果 （slideMenuView）
   • 添加模糊背景
   • 划入菜单栏
   • 思考：如何让view动起来？多次绘制（动画基于绘制）
   • 通过2个辅助view，求出它们的差值，获取到一组动态的数据
   • CADisplayLink
   • 添加按钮
2. 自定义一个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];
}

• 避坑指南

1. 圆角矩形
   坑：如果不用CGRectInset，则白色边框会模糊,(猜测：在进行填充时，会影响边框)
   CGRectInset使用：平移且缩小