我有一组垂直排列的瓷砖。它们旨在围绕 X 轴旋转。想想手风琴。我希望每个图块 n+1 始终挂在图块 n 上。
在最后两个屏幕截图中，青色瓷砖应该附在黄色瓷砖上。它不是。我不懂为什么。更不用说，为什么当我旋转第 0 行时，我会旋转所有接下来的 5 个图块（这是我想要的），但是当我想通过向另一个方向旋转从稍后的图块开始“纠正”时，我最终会在第三和第四块瓷砖。
供参考，这是设置：
CGRect tileRect = (CGRect) {CGPointZero, {self.bounds.size.width, 30.0f}} ;
CGRect pageRect = tileRect ; pageRect.size.height *= 3 ;
CGPoint baseCenter= (CGPoint) {self.bounds.size.width / 2.0f, 0} ;
CGPoint anchorMidTop= (CGPoint) {0.5f, 0.0f} ;
CGPoint anchorTopLeft= (CGPoint) {0.0f, 0.0f} ;
CGPoint positionNW = (CGPoint) {0.0f, 0.0f} ;
CALayer * (^setupLayerGeometry)(CALayer *, CGRect, CGPoint, CGPoint) =
^(CALayer * layer, CGRect b, CGPoint a, CGPoint p) {
layer.bounds = b ;
layer.anchorPoint = a ;
layer.position = p ;
return layer ;
} ;
CALayer * (^setupColor)(CALayer *, UIColor *) = ^(CALayer * layer, UIColor * color) {
layer.backgroundColor = color.CGColor ;
layer.opacity = 0.850f ;
return layer ;
} ;
CALayer * (^stdLayer)(UIColor *, CGPoint, CGPoint) =
^CALayer * (UIColor * color, CGPoint anchor, CGPoint pos) {
return setupLayerGeometry(
setupColor([CALayer layer], color)
, tileRect
, anchor
, pos) ;
} ;
CATransformLayer * (^transformLayer)(CGRect, CGPoint, CGPoint) =
^CATransformLayer * (CGRect bounds, CGPoint anchor, CGPoint pos) {
return (CATransformLayer *) setupLayerGeometry([CATransformLayer layer]
, bounds
, anchor
, pos) ;
} ;
self.baseLayer = transformLayer(tileRect, anchorTopLeft, baseCenter) ;
CATransform3D initialTransform = self.baseLayer.sublayerTransform ;
initialTransform.m34 = 1.0f / -200.0f ;
self.baseLayer.sublayerTransform = initialTransform ;
[self.layer addSublayer:self.baseLayer] ;
CALayer * (^wrap0) (CALayer *) = ^CALayer * (CALayer * layer) {
CALayer * wrap = transformLayer(tileRect, anchorTopLeft, positionNW) ;
[wrap addSublayer:layer] ;
return wrap ;
} ;
CALayer * (^wrap)(CALayer *) = wrap0 ;
现在我正在创建六个图块，就像普通的 CALayer 一样。
CALayer * row0 = stdLayer([UIColor redColor], anchorMidTop, (CGPoint) {0, 0}) ;
CALayer * row1 = stdLayer([UIColor blueColor], anchorMidTop, (CGPoint) {0, 30}) ;
CALayer * row2 = stdLayer([UIColor yellowColor], anchorMidTop, (CGPoint) {0, 60}) ;
CALayer * row3 = stdLayer([UIColor cyanColor], anchorMidTop, (CGPoint) {0, 90}) ;
CALayer * row4 = stdLayer([UIColor purpleColor], anchorMidTop, (CGPoint) {0, 120}) ;
CALayer * row5 = stdLayer([UIColor magentaColor], anchorMidTop, (CGPoint) {0, 150}) ;
现在，我将每个这样的图块包装到一个父 CATransformLayer 中，然后我将其添加为上一行的子层，目的是让每个 CATransformLayer 影响它的每个子层。
[self.baseLayer addSublayer:wrap(row0)] ;
[row0.superlayer addSublayer:wrap(row1)] ;
[row1.superlayer addSublayer:wrap(row2)] ;
[row2.superlayer addSublayer:wrap(row3)] ;
[row3.superlayer addSublayer:wrap(row4)] ;
[row4.superlayer addSublayer:wrap(row5)] ;
CGFloat angle = M_PI / 10.0f ;
row0.superlayer.sublayerTransform = CATransform3DMakeRotation(-angle, 1, 0, 0);
在这一点上，我得到了这个：
我以为我已经搞定了，直到我将最后一行替换为：
row3.superlayer.sublayerTransform = CATransform3DMakeRotation(-angle, 1, 0, 0);
这就是我得到的：
相反，如果我将上面的行替换为：
row0.superlayer.sublayerTransform = CATransform3DMakeRotation(-angle, 1, 0, 0);
row3.superlayer.sublayerTransform = CATransform3DMakeRotation( angle, 1, 0, 0);
我明白了：
我已经阅读并重新阅读了 Apple 的文档，并密切关注这一点：
锚点影响几何操作
图层的几何相关操作相对于该图层的锚点进行，您可以使用图层的 anchorPoint 属性访问该锚点。在操纵图层的位置或变换属性时，锚点的影响最为明显。position 属性始终是相对于图层的锚点指定的，并且您应用于图层的任何变换也相对于锚点发生。
（强调我的）
公平地说，我现在完全糊涂了。任何人都可以看到/解释我做错了什么？
如何排列这些图层，使我的瓷砖始终从上到下相邻？
这是层层次结构的转储：
<CATransformLayer> frame: {{100, 0}, {200, 30}} pos: {100, 0} anchor: {0, 0}
<CATransformLayer> frame: {{0, 0}, {200, 30}} pos: {0, 0} anchor: {0, 0}
<CALayer> frame: {{-100, 0}, {200, 30}} pos: {0, 0} anchor: {0.5, 0}
<CATransformLayer> frame: {{0, 0}, {200, 30}} pos: {0, 0} anchor: {0, 0}
<CALayer> frame: {{-100, 30}, {200, 30}} pos: {0, 30} anchor: {0.5, 0}
<CATransformLayer> frame: {{0, 0}, {200, 30}} pos: {0, 0} anchor: {0, 0}
<CALayer> frame: {{-100, 60}, {200, 30}} pos: {0, 60} anchor: {0.5, 0}
<CATransformLayer> frame: {{0, 0}, {200, 30}} pos: {0, 0} anchor: {0, 0}
<CALayer> frame: {{-100, 90}, {200, 30}} pos: {0, 90} anchor: {0.5, 0}
<CATransformLayer> frame: {{0, 0}, {200, 30}} pos: {0, 0} anchor: {0, 0}
<CALayer> frame: {{-100, 120}, {200, 30}} pos: {0, 120} anchor: {0.5,
<CATransformLayer> frame: {{0, 0}, {200, 30}} pos: {0, 0} anchor: {0,
<CALayer> frame: {{-100, 150}, {200, 30}} pos: {0, 150} anchor: {0.5, 0}
