将 UIBezierPath 从所有圆角动画化为具有左上角和右上角圆角的路径

Question

我正在设置一个带有所有圆角路径的蒙版到这样的视图：

CGFloat cornerRadius = CGRectGetHeight(self.myView.bounds) / 2;
CGSize cornerRadiusSize = CGSizeMake(cornerRadius, cornerRadius);
CGRect bounds = self.myView.bounds;

CAShapeLayer *maskLayer = [CAShapeLayer layer];

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:cornerRadiusSize];

maskLayer.path = maskPath.CGPath;

self.myView.layer.mask = maskLayer;

看起来像这样：

我正在尝试将其设置为具有左上角和右上角圆角的路径，如下所示：

UIBezierPath *newMaskPath = [UIBezierPath bezierPathWithRoundedRect:bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:cornerRadiusSize];

CABasicAnimation *maskPathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];

maskPathAnimation.duration = 0.3;

maskPathAnimation.fromValue = (id)maskLayer.path;
maskPathAnimation.toValue = (id)newMaskPath.CGPath;

[maskLayer addAnimation:maskPathAnimation forKey:nil];

maskLayer.path = newMaskPath.CGPath;

看起来像这样：

但是动画被破坏了，它看起来像是将一些角动画到其他角：

Answer 1

我通过使用以下方法手动创建遮罩路径解决了这个问题：

- (UIBezierPath *)getMaskPathForView:(UIView *)view withCorners:(UIRectCorner)corners {

    CGSize size = view.bounds.size;
    CGFloat cornerRadius = size.height / 2;

    UIBezierPath *maskPath = [UIBezierPath bezierPath];

    // top left
    if (corners & UIRectCornerTopLeft) {
        [maskPath moveToPoint:CGPointMake(0, cornerRadius)];
        [maskPath addQuadCurveToPoint:CGPointMake(cornerRadius, 0) controlPoint:CGPointZero];
    } else {
        CGPoint topLeftCornerPoint = CGPointZero;

        [maskPath moveToPoint:topLeftCornerPoint];
        [maskPath addQuadCurveToPoint:topLeftCornerPoint controlPoint:topLeftCornerPoint];
    }

    // top right
    if (corners & UIRectCornerTopRight) {
        [maskPath addLineToPoint:CGPointMake(size.width - cornerRadius, 0)];
        [maskPath addQuadCurveToPoint:CGPointMake(size.width, cornerRadius) controlPoint:CGPointMake(size.width, 0)];
    } else {
        CGPoint topRightCornerPoint = CGPointMake(size.width, 0);

        [maskPath addLineToPoint:topRightCornerPoint];
        [maskPath addQuadCurveToPoint:topRightCornerPoint controlPoint:topRightCornerPoint];
    }

    // bottom right
    if (corners & UIRectCornerBottomRight) {
        [maskPath addLineToPoint:CGPointMake(size.width, size.height - cornerRadius)];
        [maskPath addQuadCurveToPoint:CGPointMake(size.width - cornerRadius, size.height) controlPoint:CGPointMake(size.width, size.height)];
    } else {
        CGPoint bottomRightCornerPoint = CGPointMake(size.width, size.height);

        [maskPath addLineToPoint:bottomRightCornerPoint];
        [maskPath addQuadCurveToPoint:bottomRightCornerPoint controlPoint:bottomRightCornerPoint];
    }

    // bottom left
    if (corners & UIRectCornerBottomLeft) {
        [maskPath addLineToPoint:CGPointMake(cornerRadius, size.height)];
        [maskPath addQuadCurveToPoint:CGPointMake(0, size.height - cornerRadius) controlPoint:CGPointMake(0, size.height)];
    } else {
        CGPoint bottomLeftCornerPoint = CGPointMake(0, size.height);

        [maskPath addLineToPoint:bottomLeftCornerPoint];
        [maskPath addQuadCurveToPoint:bottomLeftCornerPoint controlPoint:bottomLeftCornerPoint];
    }

    [maskPath closePath];

    return maskPath;
}

像这样：

CAShapeLayer *maskLayer = [CAShapeLayer layer];

UIBezierPath *maskPath = [self getMaskPathForView:self.myView withCorners:UIRectCornerAllCorners];

maskLayer.path = maskPath.CGPath;

self.myView.layer.mask = maskLayer;

和：

UIBezierPath *newMaskPath = [self getMaskPathForView:self.myView withCorners:UIRectCornerTopLeft | UIRectCornerTopRight];

CABasicAnimation *maskPathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];

maskPathAnimation.duration = 0.3;

maskPathAnimation.fromValue = (id)maskLayer.path;
maskPathAnimation.toValue = (id)newMaskPath.CGPath;

[maskLayer addAnimation:maskPathAnimation forKey:nil];

maskLayer.path = newMaskPath.CGPath;

将 UIBezierPath 从所有圆角动画化为具有左上角和右上角圆角的路径

Animate UIBezierPath from all rounded corners to path with top left and top right rounded corners

ios

objective-c

cabasicanimation