Анимируйте UIBezierPath от всех закругленных углов до контура с закругленными верхними левыми и верхними правыми углами

Я устанавливаю маску со всеми закругленными углами для такого вида:

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;

это выглядит так:

скриншот 1

Я пытаюсь оживить его в виде пути с закругленными верхними левыми и верхними правыми углами, например:

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;

это выглядит так:

скриншот 2

Но анимация искажена, похоже, она анимирует одни углы на другие углы:

скриншот 3


ios objective-c cabasicanimation
person Iulian Onofrei    schedule 03.07.2017    source источник
comment
Что будет, если убрать последнюю строчку? maskLayer.path = newMaskPath.CGPath;   -  person chedabob    schedule 03.07.2017
comment
Он анимирует то же самое, что и раньше, но в конце анимации маска возвращается к исходному пути.   -  person Iulian Onofrei    schedule 03.07.2017
comment
Вам нужно установить режим заливки и removeoncompletion: stackoverflow.com/questions/23806724/   -  person chedabob    schedule 03.07.2017
comment
Это плохая практика, и ее следует избегать, и это решение проблемы, вызванной удалением этой строки. Если его не удалить, проблема с прыжком будет решена. Первоначальная проблема связана с анимацией между двумя разными путями.   -  person Iulian Onofrei    schedule 03.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я решил это, создав пути маски вручную, используя этот метод:

- (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;
person Iulian Onofrei    schedule 03.07.2017