CATransform3D - 理解变换值

时间:2014-09-02 12:00:20

标签: ios core-animation

图片显示了应用以下转换后的简单UIView:

- (CATransform3D) transformForOpenedMenu
{
  CATransform3D transform = CATransform3DIdentity;
  transform.m34 = -1.0 /450;
  transform = CATransform3DRotate(transform, D2R(40), 0, 1, 0);
  transform = CATransform3DTranslate(transform, 210, 150, -500);
  return transform;
}

我试图用黑色突出显示的距离具有相同的长度。能帮我理解价值观和计算背后的逻辑吗?

干杯

UPD 9月13日

看起来删除3DTranslate可以保持距离相等。我看到我可以使用图层的框架属性将旋转视图重新定位到屏幕的左下角。还不确定,但这可能确实有效。

enter image description here

3 个答案:

答案 0 :(得分:2)

您设置的.m34值最好设置在包含视图的sublayerTransform而不是您正在转换的视图上。

我不完全理解仿射变换背后的数学,所以我制作了this project,它允许我使用变换值来实现我想要的效果。您可以插入上面代码中的值并查看它的外观,但请注意,已经使用上面提到的sublayerTransform属性应用了透视值。

对于您的具体情况,我认为您要将图层的锚点调整为(0.0,0.5)并仅应用旋转变换。这假设您希望菜单像门一样向后摆动,铰链位于左边缘。

答案 1 :(得分:1)

您遇到的问题是由您的CATransform3DTranslate调用引起的。您基本上将Y轴设置为偏离中心,因此可以看到框架的不同透视图。

以这种方式思考;

你站在一条延伸到地平线的狭长地带的中心。场的边缘看起来好像它会聚到远处某处的中心点。如果您位于场的中心,则每条边与会聚点的角度将相等。另一方面,如果你向左或向右移动,角度会发生变化,一个看起来会比另一个看起来更大(当然是相反的)。

这基本上是你的观点所发生的事情;由于您的会聚点位于右侧,因此将Y轴从0更改为与上面示例中向左或向右移动的效果相同。你不再看中心的平行线了。

所以在上面的代码中将CATransform3DTranslate中的ty设置为0应该解决你的问题I.E。

   transform = CATransform3DTranslate(transform, 210, 0, -500);

您可能还需要更改tz和tx值以使其适合。

答案 2 :(得分:0)

好的,最终解决了我的问题是:

  • 在Y轴上进行3D变换,以像门transform = CATransform3DRotate(transform, D2R(40), 0, 1, 0);
  • 一样摆动视图
  • 在图层上设置Z锚点,将其移回targetView.layer.anchorPointZ = 850;
  • 调整图层位置,使视图位于父视图的左下角:

    newPosition.x += 135 * positionDirection; newPosition.y += 70 * positionDirection;

此序列调整不带CATransform3DTranslate的位置,并保持' swinged'效果不扭曲。

谢谢大家!