带有CALayer路径的CABasicAnimation不动画 [英] CABasicAnimation with CALayer path doesn't animate

问题描述

我正在尝试动画化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 *图层= [CAShapeLayer图层]； 
 layer.frame = self.bounds; 
 layer.path = oldPath.CGPath; 
 
 self.layer.mask =图层； 
 
 CABasicAnimation * a = [CABasicAnimation animationWithKeyPath：@ path]; 
 [a setDuration：0.4f]; 
 [一个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 *图层= [CAShapeLayer图层]； 
 layer.frame = self.bounds; 
 
 self.layer.mask =图层； 
 
 if（动画）{
 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; 
} 
} 
  

我真正需要做的就是设置一个适当的'

解决方案

在我看来，您正在创建没有路径的形状图层，然后尝试制作动画，为其添加路径。形状图层是一种特殊情况，因此无法正常工作。

在动画前后，形状层中必须有一个路径，并且该路径在前后必须具有相同的点数。 / p>

您需要创建一个圆角半径为0的圆角矩形路径（手动，使用一系列边和角弧），然后用要将圆角的半径设置为零，并将其作为动画安装该路径。

尽管即使这可能也不起作用，因为路径必须具有完全相同的数字

我刚刚找到一个UIBezierPath调用，它将在其中创建一个矩形选择要倒圆的角。调用为bezierPathWithRoundedRect：byRoundingCorners：cornerRadii：

这将创建一个矩形，该矩形具有任意多的圆角。但是，我不确定它是否适用于路径动画。您可能需要将所有2个非圆角设置为零半径，以对所有角进行圆角处理。这样，您可能会获得与圆角矩形路径具有相同点数的路径，因此路径动画可以正常工作。您必须尝试一下。

I'm trying to animation the transition of a CALayer from normal corners to rounded corners. I only want to round the top corners, so I am using a UIBezierPath. Here's the code:

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

But when I run this, the corners are rounded, but there is no animation- it happens instantly. I have seen some similar questions here on SO, but they didn't solve my problem.

iPhone CALayer animation

Animating CALayer's shadowPath property

I'm sure that I'm just doing one little thing wrong which is causing the problem, but for the life of me I can't figure it out.

Solution:

- (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;
    }
}

Really all I needed to do was set a proper 'from' value for the animation.

解决方案

It looks to me like you are creating a shape layer that does not have a path, then trying to animate adding a path to it. Shape layers are special case, and don't work that way.

You have to have a path in the shape layer before and after the animation, and the path needs to have the same number of points in it both before and after.

You would need to create a rounded rectangle path with a corner radius of 0 (manually, using a series of sides and corner arcs), and then build a new path with non zero radii for the corners you want to round and install that path as your animation.

Even that might not work, though, because the path needs to have exactly the same number of points in it, and I suspect that the arcs would simplify to points when the radius is zero.

I just found a UIBezierPath call that will create a rectangle where you can select which corners to round. The call is bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:

That will create a rectangle with as many rounded corners as you like. However, I'm not sure if it will work for path animation. You might need to request all corners be rounded with the 2 non-rounded corners set to zero radius. That way you MIGHT get a path with the same number of points in it as a rounded rectangle path so the path animation works correctly. You'll have to try it.

这篇关于带有CALayer路径的CABasicAnimation不动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！