CoreAnimation | 核心動畫 | 側(cè)滑動畫 | 菜單漸入漸出

效果展示

功能展示效果

實現(xiàn)思路

  1. 自定義一個UIView類 來控制背景展示和動畫效果 （slideMenuView）
    • 添加模糊背景
    • 劃入菜單欄
    • 思考：如何讓view動起來？多次繪制（動畫基于繪制）
    • 通過2個輔助view，求出它們的差值，獲取到一組動態(tài)的數(shù)據(jù)
    • 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];
    }
}

  • 核心代碼處理,根據(jù)兩個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 會調(diào)用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動畫和屬性配置）

  • 定義屬性 初始化配置和回調(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{
    //先添加畫布
    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];
}

  • 避坑指南

  1. 圓角矩形
    坑：如果不用CGRectInset，則白色邊框會模糊,(猜測：在進(jìn)行填充時，會影響邊框)
    CGRectInset使用：平移且縮小
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容