Question

当我创建一个显式动画以将CAShapeLayer路径的值从椭圆更改为矩形时，我遇到了一个问题。

在我的画布控制器中，我设置了一个基本的CAShapeLayer并将其添加到根视图的图层：

CAShapeLayer *aLayer;
aLayer = [CAShapeLayer layer];
aLayer.frame = CGRectMake(100, 100, 100, 100);
aLayer.path = CGPathCreateWithEllipseInRect(aLayer.frame, nil);
aLayer.lineWidth = 10.0f;
aLayer.strokeColor = [UIColor blackColor].CGColor;
aLayer.fillColor = [UIColor clearColor].CGColor;
[self.view.layer addSublayer:aLayer];

然后，当我为路径设置动画时，在动画的最后几帧中，当形状变为矩形时会出现奇怪的毛刺/闪烁，而在前几帧中，当动画远离矩形时，会出现奇怪的毛刺/闪烁。动画设置如下：

CGPathRef newPath = CGPathCreateWithRect(aLayer.frame, nil);
[CATransaction lock];
[CATransaction begin];
[CATransaction setAnimationDuration:5.0f];
CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"path"];
ba.autoreverses = YES;
ba.fillMode = kCAFillModeForwards;
ba.repeatCount = HUGE_VALF;
ba.fromValue = (id)aLayer.path;
ba.toValue = (__bridge id)newPath;
[aLayer addAnimation:ba forKey:@"animatePath"];
[CATransaction commit];
[CATransaction unlock];

我尝试了很多不同的东西，比如锁定/解锁CATransaction，玩各种填充模式等等......

这是故障的图像： http://www.postfl.com/outgoing/renderingglitch.png

可以在此处找到我正在体验的视频： http://vimeo.com/37720876

Answer 1

我收到了来自quartz-dev列表的反馈：

David Duncan写道：

动画形状图层的路径仅保证在何时起作用   你喜欢喜欢的动画。矩形是一系列的   线条，而椭圆是一系列弧线（你可以看到   使用CGPathApply生成的序列，以及动画   他们之间并不保证看起来很好，或者说工作得很好。

要做到这一点，你基本上必须创建一个矩形的模拟   使用与创建椭圆相同的曲线，但是   使用可能导致渲染看起来像的参数   长方形。这不应该太难（再次，你可以使用   你在CGPathApply上创建的路径上获得了什么   CGPathAddEllipseInRect作为指南），但可能需要一些   调整以使其正确。

Answer 2

不幸的是，这是对CAShapeLayers的其他令人敬畏的动画路径属性的限制。

基本上它试图在两条路径之间进行插值。当目标路径和起始路径具有不同数量的控制点时，它会遇到麻烦 - 曲线和直边会出现此问题。

您可以尝试通过将椭圆绘制为4条曲线而不是单个椭圆来最小化效果，但它仍然不太正确。我还没有找到一种从曲线到多边形平滑的方法。

你可能能够在那里获得大部分，然后转移到最后一部分的淡入淡出动画 - 但这看起来不太好看。

CAShapeLayer动画路径毛刺/闪烁（从椭圆到矩形和背面）

2 个答案: