UIView 3DCube like Clear-app答案

【问题标题】：UIView 3DCube like Clear-appUIView 3DCube like Clear-app
【发布时间】：2012-02-23 16:18:57
【问题描述】：

我已经搜索了 google 和 stackoverflow 上的所有帖子，但我根本无法解决这个难题。我正在尝试重现现在著名的待办事项应用程序“清除”在添加新任务时的效果。他们有某种动画，从顶部开始，新任务会以某种 3D 立方体效果出现。他们的特别之处在于，当你仔细观察时，左右下角总是保持在同一个地方。

现在我有以下内容：一个 320x460 的 UIView 设置在点 0,0 和一个 320x460 的 UIView 设置在点 (0,-460)。我想要的是顶部 UIView 以与从顶部清除相同的立方体效果下降。这是我目前所拥有的：

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //startLoc is defined globally to remember the first position
    startLoc = [[touches anyObject] locationInView:self];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGPoint location = [[touches anyObject] locationInView:self];
    float difference = location.y-startLoc.y;         

    if(diff > 0 && diff < 90)
    {
        //Init the transform
        CATransform3D transform = CATransform3DIdentity;
        transform.m34 = perspective;
        //Rotate (radians is a degree-to radians function)
        transform = CATransform3DRotate(transform, radians(90-diff), 1.0f, 0.0f, 0.0f);
        //Also translate the view down        
        transform = CATransform3DTranslate(transform, 0.0f, 230+diff, 0.0f);
        //the 230 is necessary I think for the Anchorpoint but I'm not sure
        secondView.layer.transform = transform;
}

}

它以某种方式工作但不正确，一旦我进行旋转，视图就会变大，左下角和右下角不在视图中。如果我缩小视图然后做一个 3Dscale 它也搞砸了。我已经通过正确设置图层的 zPosition 解决了一半图像消失的问题，但这是我所得到的。我尝试使用其他项目的代码，但它们的所有 3D 立方体效果都与“清除”应用程序不同。唯一接近的是 iCarousel 项目，但我无法使用应用程序中的正确代码，我无法让它工作。有人可以帮我吗？

【问题讨论】：

标签： iphone ios core-animation catransformlayer

【解决方案1】：

以下是一些专门涵盖 UIView 3D 透视变换主题的链接：

http://www.sunsetlakesoftware.com/2008/10/22/3-d-rotation-without-trackball

http://watchingapple.com/2008/04/core-animation-3d-perspective/

这篇文章也很相关：How do I apply a perspective transform to a UIView?

【讨论】：

嗨，亚当，感谢您提供的链接，但不幸的是，我昨天在搜索时都看到了它们。正如我在帖子中所说，他们在 Clear 应用中做了一些更特别的事情，这些帖子没有解释他们是如何做到的。
Clear 所做的并没有什么特别之处。您只需要找出旋转/平移/锚点/z 位置等的正确组合。在我看来，锚点是视图的底部中间，最初围绕 x 轴旋转 -90 度（即朝向手机的“内部”）。然后随着表格视图向下滚动，新视图向下平移以匹配现有内容的顶部，同时也被旋转回与屏幕平行。
好的，谢谢你的建议，我现在实际上使用了滚动视图并按照你说的设置了锚点，它突然起作用了。当不使用滚动视图时，图像总是变大或什么，现在不再！还是谢谢！

【解决方案2】：

您可以在 GitHub mystcolor/JTGestureBasedTableViewDemo 上查看一个开源实现

【讨论】：