DIFF

构建弹性动画贝塞尔曲线的控制点(3点贝塞尔曲线)的偏移值

image-20210611102355413.png

MenuView动画

由两部分动画构成

• 第一部分，是菜单从屏幕外平移到屏幕内，时间大概3s

[UIView animateWithDuration:0.3 animations:^{
            self.frame = self.bounds;
        }];

• 第二部分，是启动刷帧定时器 CADisplayLink ，通过drawrect 贝塞尔曲线实现动画

CADisplayLink {
   CALayer *sideHelperPresentationLayer   =  (CALayer *)[helperSideView.layer presentationLayer];
    CALayer *centerHelperPresentationLayer =  (CALayer *)[helperCenterView.layer presentationLayer];
    CGRect centerRect = centerHelperPresentationLayer.frame;
    CGRect sideRect = sideHelperPresentationLayer.frame; 
    diff = sideRect.origin.x - centerRect.origin.x;
    
    [self setNeedsDisplay];
}

drawRect {
  UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 0)];
    [path addLineToPoint:CGPointMake(self.frame.size.width - menuBlankWidth, 0)];
    [path addQuadCurveToPoint:CGPointMake(self.frame.size.width - menuBlankWidth, self.frame.size.height) controlPoint:CGPointMake(keyWindow.frame.size.width/2+diff, keyWindow.frame.size.height/2)];
    [path addLineToPoint:CGPointMake(0, self.frame.size.height)];
    [path closePath];
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddPath(context, path.CGPath);
    [[UIColor orangeColor] set];
    CGContextStrokePath(context);
}

// 收起动画同理

MenuView上子视图阶梯弹出动画

        UIView *menuButton = self.subviews[i];
        menuButton.transform = CGAffineTransformMakeTranslation(-90, 0);
// i*(0.3/self.subviews.count 这样可以达到从上到下逐个弹出的特效
        [UIView animateWithDuration:0.7 delay:i*(0.3/self.subviews.count) usingSpringWithDamping:0.6f initialSpringVelocity:0.0f options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionAllowUserInteraction animations:^{
            menuButton.transform =  CGAffineTransformIdentity;
        } completion:NULL];