旋转CAShapeLayer也移动位置 [英] Rotating CAShapeLayer moves the position too
问题描述
我正在创建一个CAShapeLayer.我正在为其添加旋转动画.不知何故，转换结果很奇怪.子层随旋转一起移动.我需要它在固定的中心/位置(锚)中并旋转.我知道它弄乱了几何变换，但我无法正确处理.
I am creating a CAShapeLayer. I am adding rotation animation to it. Somehow transformation result is weird. The child layer is moving along with rotation. I need it to be in fixed center/position(anchor) and rotate. I know its messing up geometric transformation but i am unable to get it right.
我尝试设置锚点.我还关注了此帖子
I have tried setting anchorpoint. I also followed this post
这是代码:
UIBezierPath *circle = [UIBezierPath bezierPathWithArcCenter:CGPointMake(75, 125)
radius:50
startAngle:0
endAngle:1.8 * M_PI
clockwise:YES];
CAShapeLayer *circleLayer = [CAShapeLayer layer];
[circleLayer setFrame:CGRectMake(200 - 50, 300 - 50, 100, 100)];
circleLayer.path = circle.CGPath;
circleLayer.strokeColor = [UIColor orangeColor].CGColor;
[circleLayer setFillColor:[UIColor clearColor].CGColor];
circleLayer.lineWidth = 3.0;
if ([circleLayer animationForKey:@"SpinAnimation"] == nil) {
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat: 2 * M_PI];
animation.duration = 10.0f;
animation.repeatCount = INFINITY;
animation.removedOnCompletion = NO;
[circleLayer addAnimation:animation forKey:@"SpinAnimation"];
}
[self.view.layer addSublayer:circleLayer];
推荐答案
tl; dr::您的形状图层缺少框架(可能是其路径的边界框).
tl;dr: your shape layer is missing a frame (probably the bounding box of its path).
混乱的原因是旋转的图层没有框架.这意味着其大小为0⨉0.这与形状层允许将形状绘制到其边界之外的事实相结合，使外观看起来像是围绕外部点旋转.但这不是.
The confusion comes from the fact that the layer being rotated has no frame. This means that its size is 0⨉0. This combined with the fact that the shape layer allows the shape to be drawn outside of its bounds makes it look like the rotation is happening around an exterior point. But it's not.
在不对锚点进行任何修改的情况下，相对于图层自身边界的中心进行转换.对于没有大小的图层，中心与原点相同(当width和height均为0时，(x+width/2, y+height/2)与(x, y)相同)
Without any modification to the anchor point, the transform is happening relative to the center of the layer's own bounds. For a layer with no size, the center is the same as the origin ((x+width/2, y+height/2) is the same as (x, y) when both width and height are 0).
(相对于图层范围的)本地原点也是相对于其绘制路径的位置.路径的点(0, 0)在形状层的原点中.
The local origin (relative to the layer's bounds) is also where the path is drawn relative to. The point (0, 0) for the path is in the origin of the shape layer.
如果要显示图层的中心(在本例中为原点)，则外观将是这样.
If we were to display the center (and in this case the origin) of the layer, this is what it would look like.
这也是形状旋转的要点.
This is also the point that the shape is rotated around.
从本质上讲，有两种方法可以解决此问题，即使其绕圆心旋转.一种是更改路径，以使圆心位于原点(0,0).我通常更喜欢的另一种解决方案是为图层提供与其路径大小(路径边界框)相匹配的大小:
The are essentially two ways of solving this problem, making it rotate around the center of the circle. One is to alter the path so that the circles center is at (0,0), the origin. Another solution, which I generally prefer, is to give the layer a size that matches the size of its path, the paths bounding box:
circleLayer.bounds = CGPathGetBoundingBox(circle.CGPath);
在这里，我显示的层具有非常浅的灰色背景颜色:
Here I'm showing the layer with a very light gray background color:
有时，我发现在开发过程中为形状层提供背景颜色作为调试工具很有用，这样我就可以看到其框架符合我的期望.
请注意，当您更改图层或视图的边界时，它会相对于其位置调整大小.这意味着中心点保持不变，原点也移动，这意味着路径将有效地移动.
Note that when you change the bounds of a layer or view, it resizes relative to its position. This means that the center point stays the same and the origin moves, meaning that the path will effectively move.
现在，该图层具有一定的大小，并且边界的中心与圆的中心匹配，当您旋转形状图层时，它看起来像是圆围绕其中心旋转.
Now that the layer has a size, and the center of the bounds matches the center of the circle, it will look like the circle is rotating around it's center when you rotate the shape layer.
当您看到一切正常时，可以再次删除背景色.
这篇关于旋转CAShapeLayer也移动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
