iPad推特中的纸张折叠/展开效应

Question

推特为iPad实现了一种奇特的“捏来扩大纸折叠”的效果。这里有一段短片。http://www.youtube.com/watch?v=B0TuPsNJ-XY

这能用没有CATransform3D的OpenGL来完成吗？一个有用的例子是值得感激的。

更新：I对此动画效果的方法或实现感兴趣。这就是为什么我悬赏这个问题的原因-斯里卡

Answer 1

下面是一个非常简单的示例，它使用手势识别器和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;
}

Answer 2

从本质上讲，这种影响由几个不同的步骤组成：

1. 手势识别器，以检测何时发生捏出。
2. 当手势开始时，Twitter可能会为顶部和底部创建一个图形上下文，实质上是从它们的层创建图像。
3. 将图像作为子视图附加到顶部和底部。
4. 当手指弯曲进进出出时，使用CATransform3D对图像使用添加透视图。
5. 一旦视图‘完全伸展’，使真正的子视图可见，并删除图形上下文创建的图像。

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

*由于这些视图相对简单，它们可能不需要呈现到图形上下文中。

Answer 3

其效果基本上只是一个围绕X轴旋转的视图:当你从列表中拖出一条推文时，就会有一个与X平面平行的视图。当用户不收缩时，视图围绕X轴旋转，直到它完全进入X平面。文档说：

CATransform3D数据结构定义了一个均匀的三维变换( CGFloat值的4×4矩阵)，用于旋转、缩放、偏移、倾斜，并将透视转换应用于层。

此外，我们知道CALayer的transform属性是一个CATransform3D结构，它也是可动画的。因此，我认为这是安全的说，折叠效果的问题是可以做的核心动画。