iPad 版 Twitter 中的纸张折叠/展开效果

Question

Twitter for iPad 实现了一种奇特的“捏以展开纸张折叠”效果。一个简短的视频剪辑在这里。 http://www.youtube.com/watch?v=B0TuPsNJ-XY

这可以在没有 OpenGL 的情况下使用 CATransform3D 完成吗？一个可行的例子将不胜感激。

更新：我对这个动画效果的方法或实现很感兴趣。这就是为什么我在这个问题上提供赏金 - srikar

Answer 1

效果基本上只是一个围绕 X 轴旋转的视图：当您将推文拖出列表时，会出现一个与 X-Z 平面平行的视图。当用户松开捏合时，视图围绕 X 轴旋转，直到它完全进入 X-Y 平面。 documentation 说：

CATransform3D 数据结构 定义了一个齐次的三维 变换（CGFloat 的 4 x 4 矩阵 values) 用于旋转、缩放、 偏移、倾斜和应用透视 转换为图层。

此外，我们知道 CALayer 的 transform 属性是一个 CATransform3D 结构，并且它也是可动画的。因此，我认为可以肯定地说，所讨论的折叠效果可以通过 Core Animation 实现。

Answer 2

基本上，这种效果由几个不同的步骤组成：

1. 手势识别器可检测何时发生捏合。
2. 当手势开始时，Twitter 可能会为顶部和底部创建一个 graphics context，实际上是从它们的图层创建图像。*
3. 将图像作为子视图附加在顶部和底部。
4. 当手指向内向外弯曲时，对图像使用 CATransform3D 到 add perspective。
5. 视图“完全伸展”后，使真正的子视图可见并删除图形上下文创建的图像。

要折叠视图，请执行与上述相反的操作。

*因为这些视图比较简单，它们可能不需要渲染到图形上下文中。

Answer 3

这是一个非常简单的示例，它使用手势识别器和CATransform3D 帮助您入门。只需捏一下即可旋转灰色视图。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...

    CGRect rect = self.window.bounds;
    view = [[UIView alloc] initWithFrame:CGRectMake(rect.size.width/4, rect.size.height/4,
                                                         rect.size.width/2, rect.size.height/2)];
    view.backgroundColor = [UIColor lightGrayColor];
    [self.window addSubview:view];

    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = -1/500.0; // this allows perspective
    self.window.layer.sublayerTransform = transform;

    UIPinchGestureRecognizer *rec = [[UIPinchGestureRecognizer alloc] initWithTarget:self
                                                                              action:@selector(pinch:)];
    [self.window addGestureRecognizer:rec];
    [rec release];

    return YES;
}

- (void)pinch:(UIPinchGestureRecognizer *)rec
{
    CATransform3D t = CATransform3DIdentity;
    t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0);
    t = CATransform3DRotate(t, rec.scale * M_PI, 1, 0, 0);
    t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0);
    self.view.layer.transform = t;
}