使用CALayer路径的CABasicAnimation不会设置动画

Question

我正在尝试动画CALayer从正常角落到圆角的过渡.我只想绕过顶角,所以我使用的是UIBezierPath.这是代码:

UIRectCorner corners = UIRectCornerTopLeft | UIRectCornerTopRight;

UIBezierPath* newPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(8.0f, 8.0f)];
UIBezierPath* oldPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(0.0f, 0.0f)];

CAShapeLayer* layer = [CAShapeLayer layer];
layer.frame = self.bounds;
layer.path = oldPath.CGPath;

self.layer.mask = layer;

CABasicAnimation* a = [CABasicAnimation animationWithKeyPath:@"path"];
[a setDuration:0.4f];
[a setFromValue:(id)layer.path];
[a setToValue:(id)newPath.CGPath];

layer.path = newPath.CGPath;
[layer addAnimation:a forKey:@"path"];

但是当我运行它时,角落是圆形的,但是没有动画 - 它会立即发生.我在这里看到了一些类似的问题,但它们并没有解决我的问题.

iPhone CALayer动画

动画CALayer的shadowPath属性

我敢肯定,我只是做了一件小问题导致了这个问题,但对于我的生活,我无法理解.

解:

- (void)roundCornersAnimated:(BOOL)animated {
    UIRectCorner corners = UIRectCornerTopLeft | UIRectCornerTopRight;

    UIBezierPath* newPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(8.0f, 8.0f)];
    UIBezierPath* oldPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(0.0001f, 0.0001f)];

    CAShapeLayer* layer = [CAShapeLayer layer];
    layer.frame = self.bounds;

    self.layer.mask = layer;

    if(animated) {
        CABasicAnimation* a = [CABasicAnimation animationWithKeyPath:@"path"];
        [a setDuration:0.4f];
        [a setFromValue:(id)oldPath.CGPath];
        [a setToValue:(id)newPath.CGPath];

        layer.path = newPath.CGPath;
        [layer addAnimation:a forKey:@"path"];
    } else {
        layer.path = newPath.CGPath;
    }
}

我真正需要做的就是为动画设置一个合适的'from'值.

Answer 1

在我看来,你正在创建一个没有路径的形状图层,然后尝试动画添加路径.形状图层是特殊情况,不会那样工作.

您必须在动画之前和之后的形状图层中有一条路径,并且路径前后需要具有相同的点数.

您需要创建一个圆角矩形路径,其圆角半径为0(手动,使用一系列边和圆弧),然后为要圆角的角创建一个非零半径的新路径,并将该路径安装为你的动画.

但是,即使这可能也行不通,因为路径需要具有完全相同数量的点,并且我怀疑当半径为零时,弧将简化为点.

我刚刚发现了一个UIBezierPath调用,它将创建一个矩形,您可以在其中选择要舍入的角.调用是bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:

这将创建一个包含任意多个圆角的矩形.但是,我不确定它是否适用于路径动画.您可能需要请求所有角都圆角,并将2个非圆角设置为零半径.这样你就可以获得一个与圆角矩形路径具有相同点数的路径,这样路径动画就可以正常工作.你必须尝试一下.

Answer 2

试着把:

layer.path = newPath.CGPath;

后:

[layer addAnimation:a forKey:@"path"];