ios - 使用 mask 显示/隐藏带有动画的 View

Question

我正在尝试使用 mask 来隐藏和显示 View ，但由于某种原因我无法使其正常工作。

我真的很困惑是否应该为蒙版的框架/边界/路径设置动画。

这是我的代码，用于显示按钮操作“GO”的 View :

- (IBAction)go:(id)sender
{
    [UIView animateWithDuration:3.0 animations:^{

        self.testView.layer.mask.bounds = self.testView.layer.bounds;
    }];
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    CGRect rect = CGRectMake(0, 0, self.testView.bounds.size.width, 0);
    CGPathRef path = CGPathCreateWithRect(rect, NULL);

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path;

    self.testView.layer.mask = shapeLayer;
    self.testView.layer.mask.bounds = rect;
}

谢谢!

Answer 1

您正在更改掩码的 bounds，而不是 path。您确实需要更改掩码 的路径。从理论上讲，您可以使用 CABasicAnimation 来做到这一点，但我个人发现，在为路径(尤其是 mask 的路径)设置动画时，这非常不稳定。

如果可以的话，我会完全取消 mask ，只设置 testView 的框架，使其不可见(例如，高度为零)，然后使用基于 block 的 UIView animateWithDuration。 (请注意，如果使用自动布局，则可以为更改了约束的 setNeedsLayout 设置动画)。

如果你真的需要使用CAShapeLayer掩码，你可以试试CABAsicAnimation和path的animateWithKeyPath > 掩码 CAShapeLayer 上的键。

就我个人而言，在为路径变化设置动画时，我会使用显示链接，例如像这样的东西:

- (IBAction)didTapButton:(UIBarButtonItem *)sender {
    [AnimationDisplayLink animateWithDuration:3.0 animationHandler:^(CGFloat percent) {
        self.mask.path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, self.testView.bounds.size.width, self.testView.bounds.size.height * percent)].CGPath;
    } completionHandler:nil];
}

我的 AnimationDisplayLink 定义如下:

@interface AnimationDisplayLink : NSObject
@property (nonatomic) CGFloat animationDuration;
@property (nonatomic, copy) void(^animationHandler)(CGFloat percent);
@property (nonatomic, copy) void(^completionHandler)();
@end

@interface AnimationDisplayLink ()
@property (nonatomic) CFAbsoluteTime startTime;
@property (nonatomic, strong) CADisplayLink *displayLink;
@end

@implementation AnimationDisplayLink

+ (instancetype)animateWithDuration:(CGFloat)duration animationHandler:(void (^)(CGFloat percent))animationHandler completionHandler:(void (^)(void))completionHandler {
    AnimationDisplayLink *handler = [[self alloc] init];

    handler.animationDuration = duration;
    handler.animationHandler  = animationHandler;
    handler.completionHandler = completionHandler;

    [handler startAnimation];

    return handler;
}

- (void)startAnimation {
    self.startTime = CFAbsoluteTimeGetCurrent();
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleDisplayLink:)];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

- (void)stopAnimation {
    [self.displayLink invalidate];
    self.displayLink = nil;
}

- (void)handleDisplayLink:(CADisplayLink *)displayLink {
    CGFloat elapsed = CFAbsoluteTimeGetCurrent() - self.startTime;
    CGFloat percent = elapsed / self.animationDuration;

    if (percent >= 1.0) {
        [self stopAnimation];
        if (self.animationHandler)  self.animationHandler(1.0);
        if (self.completionHandler) self.completionHandler();
    } else {
        if (self.animationHandler)  self.animationHandler(percent);
    }
}

@end