适用于iPad的twitter的纸张折叠/展开效果

Twitter for iPad实现了一种奇特的“捏扩展纸张折叠”效果。这里有一个短片。 http://www.youtube.com/watch?v=B0TuPsNJ-XY 适用于iPad的twitter的纸张折叠/展开效果

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

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

来源

2011-03-22 Tim Wu

感谢您发布视频的真棒效果。不知道Twitter如何做到这一点。 :) – 2011-06-28 05:44:37

哇，赏金的作品！感谢您提供赏金，@Srikar。 – 2011-06-28 09:35:25

雅普赏金作品:)感谢精彩的社区... – 2011-06-29 07:32:33

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

来源

2011-06-28 06:17:49 jtbandes

我不明白这两个CATransform3DTranslate方法调用的目的。 – haroldcampbell 2011-10-31 01:04:48

@haroldcampbell这些人的目标是围绕图层的边缘而不是中心旋转。 – jtbandes 2011-10-31 02:41:57

这应该通过设置图层的anchorPoint属性来完成。 – neilkimmett 2012-02-23 14:30:57

效果基本上只是一个围绕X轴旋转的视图：当您从列表中拖出一条鸣叫时，会出现一个平行于X-Z平面的视图。当用户松开时，视图围绕X轴旋转，直到它完全进入X-Y平面。所述documentation说：

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

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

来源

2011-06-28 05:51:31 Caleb

本质上，这种效果是由几个不同的步骤：

手势识别时撑开发生检测。
当手势开始时，Twitter很可能会为顶部和底部创建一个graphics context，从本质上创建图层。*
将图像作为子视图附加在顶部和底部。
随着手指弯曲进出，请使用CATransform3D至add perspective来图像。
一旦视图“完全展开”，就可以使真实子视图可见并删除图形上下文创建的图像。

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

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

来源

2011-06-28 05:53:09

适用于iPad的twitter的纸张折叠/展开效果

回答

相关问题