使用移动框架动画CAShapeLayer

Question

使用核心动画层，我一直在尝试实现以下功能。在包含的超级层中，有两个锚层，另一个连接两个层。下图应该清楚说明情况。在左侧，两个橙色锚点标记为“A”和“B”，绿线连接它们。使用虚线示出封闭层框架。在右边，层层次结构显示为我当前实现它，其中锚点和连接都是封闭超层的子层。

现在，我正在尝试做的是让锚点移动，并保持连接的连接。我正在使用下面显示的代码更新其框架和路径属性，利用连接层的-setFrame:方法：

- (void)setFrame:(CGRect)frame {

CGSize size = frame.size;
CGPoint startPoint = CGPointZero;
if (size.height < 0.0) startPoint.y -= size.height;

CGPathRef oldPath = self.path;
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, startPoint.x, startPoint.y);
CGPathAddLineToPoint(path, NULL, startPoint.x + size.width, startPoint.y + size.height);

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = [CATransaction animationDuration];
animation.timingFunction = [CATransaction animationTimingFunction];
animation.fromValue = (id)oldPath;
animation.toValue = (id)path;
[self addAnimation:animation forKey:@"pathAnimation"];

self.path = path;
CGPathRelease(path);
[super setFrame:frame];

CGSize size = frame.size; CGPoint startPoint = CGPointZero; if (size.height < 0.0) startPoint.y -= size.height; CGPathRef oldPath = self.path; CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, NULL, startPoint.x, startPoint.y); CGPathAddLineToPoint(path, NULL, startPoint.x + size.width, startPoint.y + size.height); CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; animation.duration = [CATransaction animationDuration]; animation.timingFunction = [CATransaction animationTimingFunction]; animation.fromValue = (id)oldPath; animation.toValue = (id)path; [self addAnimation:animation forKey:@"pathAnimation"]; self.path = path; CGPathRelease(path); [super setFrame:frame];

现在，这种作品，但问题是帧（或位置+边界）动画不与路径动画同步运行，导致一些抖动效果，其中连接的远端瞬间分离（和其他一些小问题，可能是由同一核心问题引起的。）

我一直在努力解决这个问题，但只是为了取得成功。有一次，我将连接的帧设置为等于封闭超层的帧，它确实具有所需的效果（因为现在帧不再需要动画）。但是，我担心这个解决方案在具有多个连接的环境中的性能 - 即。多个非不透明的大尺寸重叠图层看起来很糟糕？

有人会有更好，更优雅的解决方案吗？谢谢！

Answer 1

由于您只是实际拉伸（缩放）并且旋转连接层，您是否考虑过对其应用转换而不是手动修改框架？

您应该能够根据锚点的位置使用一些基本的三角学来计算旋转角度和比例因子。

Answer 2

由于您要设置路径的动画而不是图层或路径的框架，因此在大约数据后会出现性能问题。 50个同步动画。 只有在操纵图层隐式动画属性时才能获得高性能，因此它的框架而不是其内容（例如路径），因为gpu加速。