Question

Twitter for iPad实现了一种奇特的“缩小纸张折叠”效果。这是一个简短的视频片段。 http://www.youtube.com/watch?v=B0TuPsNJ-XY

这可以在没有OpenGL的情况下使用CATransform3D完成吗？一个工作的例子会很感激。

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

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

基本上，这种效果包含几个不同的步骤：

手势识别器，用于检测何时发生扩大。
当手势开始时，Twitter可能会为顶部和底部创建graphics context，主要是从图层创建图像。*
将图像作为子视图附加在顶部和底部。
当手指弯曲进出时，请对图像使用CATransform3D至add perspective。
一旦视图“完全展开”，就可以显示真实的子视图并删除图形上下文创建的图像。

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

*因为这些视图相对简单，所以可能不需要将它们渲染到图形上下文中。

Answer 3

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

CATransform3D数据结构定义了一个同质的三维变换（CGFloat的4乘4矩阵值）用于旋转，缩放，偏移，倾斜和应用透视转换为图层。

此外，我们知道CALayer的transform属性是CATransform3D结构，并且它也是可动画的。因此，我认为可以肯定的是，有问题的折叠效果可以与Core Animation一起使用。

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

3 个答案: