iPad中的twitter折叠/展开效果
Twitter的iPad实现了一个奇特的“捏扩大折叠”的效果。 这里有一个短片。 http://www.youtube.com/watch?v=B0TuPsNJ-XY
这可以用没有OpenGL的CATransform3D
来完成吗? 一个工作的例子将是感恩。
更新:我对这个animation效果的方法或实现感兴趣。 这就是为什么我在这个问题上提供赏金 – srikar
下面是一个非常简单的例子,使用手势识别器和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; }
基本上,这个效果由几个不同的步骤组成:
- 手势识别器可以检测出什么时候发生夹断。
- 当手势开始时,Twitter可能会为顶部和底部创buildgraphics上下文 ,从本质上创build图层。
- 将图像作为子视图添加到顶部和底部。
- 当手指伸入和伸出时,使用
CATransform3D
为图像添加透视图。 - 一旦视图“完全展开”,就可以使真实的子视图可见并删除graphics上下文创build的图像。
要折叠视图,请执行上述操作。
*因为这些视图相对简单,所以可能不需要渲染到graphics上下文。
效果基本上只是一个围绕X轴旋转的视图:当您将一条微博从列表中拖出时,会有一个视图开始平行于XZ平面。 当用户松开时,视图围绕X轴旋转,直到它完全进入XY平面。 该文件说:
CATransform3D数据结构定义了用于旋转,缩放,偏移,倾斜以及将透视变换应用于图层的均匀三维变换(CGFloat值的4乘4matrix)。
此外,我们知道CALayer的transform
属性是一个CATransform3D结构,它也是可以animation的。 Ergo,我认为可以肯定的是这个折叠效果可以和Core Animation一起使用。