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];