围绕 y 轴旋转两个图像，使它们的边界相交

Posted 2023-02-22

【中文标题】围绕 y 轴旋转两个图像，使它们的边界相交

【英文标题】：Rotating two images around y axis such that their boundaries meet

【发布时间】：2014-03-08 04:18:00

【问题描述】：

我有以下两张图片：

然后我将左图像（旋转点是它的左边缘）围绕 y 轴旋转 30 度，右图像（旋转点是它的右边缘）围绕 y 轴旋转 -30 度以获得以下输出：

现在我希望图像保持连接在一起，就像它们在旋转之前一样，但是正如您所见，它们之间出现了间隙，所以我想我可以通过将左图像向右移动并将右图像向左移动来做到这一点直到两个图像相遇。我认为下面的公式应该给我正确的翻译值，但它不起作用并且仍然缺少一些东西。

translationValue = (widthOfImage - (cos(30) x widthOfImage))

我认为上面的公式不起作用，因为没有考虑图像的深度。如何解决？

由于我试图解决的问题的性质，我无法将左图像的旋转点更改为其右边缘，并将右图像的旋转点更改为其左边缘。

【问题讨论】：

可以发一下动画代码吗？您是否正在更新 CATransform3D 以设置旋转动画？

不，我不是在制作动画，答案是使用 CATransformLayer，但现在我遇到了其他问题

【参考方案1】：

图像框是整体改变它的宽度还是只是图像改变，如果是这样，那是你的问题。至于你的 translationValue 可能是 sin(30) 而不是 cos。

【讨论】：

两个图像的宽度相同，sin(30) 不是解决方案

你检查了图片所在的盒子是否改变了大小？

为什么会改变大小？这不是尺寸问题我没有缩放任何东西

它会改变大小，否则盒子会相互对立，图像不会出现。

大小没有变化，是透视变换，大小变化没有意义

【参考方案2】：

将 2 个视图从它们共享的边缘向上旋转到观看者可能会更容易，同时也将它们沿 Z 轴平移回来，以便前边缘保持在屏幕表面。

这样两个视图将保持链接在一起，没有任何间隙或重叠。

棘手的部分是正确设置 Z 平移的时间。前缘 Z 的变化应遵循正弦曲线。您可能需要使用视图 Z 坐标的关键帧动画，并创建一个非常接近正弦曲线的贝塞尔曲线。

【参考方案3】：

如果您还同时为旋转设置动画，则解决方案是将 CATransformLayer 与子图层一起使用：您将图层作为子图层的父图层，因此当您旋转父图层时，子图层会粘在一起并与父图层一起旋转，然后您只需旋转子图层背部。

查看此链接获取代码 sn-p：https://***.com/a/5539618/550393