使用核心动画,我想在它的中心折叠UIView
(即CALayer
)。即我将锚点设置为(0.5,0.5)&折叠图层。我在Photoshop中创建的这张图片可能会产生我想要的效果 -
所以,正在发生的事情是,图层正在折叠在其中心,因为折叠发生了一点点透视(臭名昭着的m34
!)。最初,视图在X-Y平面中平行,Z轴直视用户。随着折叠的发生,下半部分和上半部分同时向后移动(有一些视角,给出深度和3D效果),直到整个层在X-Z平面上(平行)。请注意,一旦图层在X-Z平面中平行,用户将无法再看到图层。但那没关系,这就是我正在寻找的效果。一个UIView
在它的中心折叠消失。
如何在iOS
中执行此操作?不使用2个不同的层(底部和顶部)?非常感谢任何帮助...
更新:正如@miamk所指出的,这与“我们的选择”应用或“Flipboard”应用中使用的用户界面效果相同
更新:我已经为此提供了赏金以获得更具体的答案。很想看到 -
答案 0 :(得分:20)
CALayer
是一架飞机,无法折叠。除非你为它编写核心图像过滤器,比如页面卷曲效果,但如果是私有API而不是你的选项。
您需要将视图拆分为两个视图,并通过同时转换两个CALayer
来伪造折叠。
默认情况下,图层转换没有透视图,因此您还必须设置:
transform.m34 = 1.0 / -2000;
OK让我们更清楚:将视图分成两部分并折叠起来:
根据您发布的图片,您的观点是hiarchy,如下所示:
+ UIView - Root view
+ UIImageView - The persons face
+ UILabel - The label with title
+ UILabel - The label with company name
+ UILabel - The label with a short description.
+ UILabel - The label with e-mail
+ UILabel - The label with web address
+ UILabel - The label with phone number
因此,为了折叠的目的,为此视图层次结构引入了两个新视图,如下所示:
+ UIView - Root view
+ UIView - Top half of the card
+ UIImageView - The persons face
+ UILabel - The label with title
+ UILabel - The label with company name
+ UILabel - The label with a short description.
+ UIView - Bottom half of the view
+ UILabel - The label with e-mail
+ UILabel - The label with web address
+ UILabel - The label with phone number
不太难。现在仅动画用于分组上半部分和下半部分的两个视图。
我不会为你编写代码,而是为了让它变得简单一个更重要的提示:将视图的锚点更改为动画!您不希望通过它们自己的中心旋转它们,而是将旋转中心移动到与它们彼此相对的边缘对齐。
topView.layer.anchorPoint = CGPointMake(0.5f, 1.0f);
bottomView.layer.anchorPoint = CGPointMake(0.5f, 0.0f);
答案 1 :(得分:11)
这种工作流程怎么样:
从视图中获取图片
UIGraphicsBeginImageContext(self.bounds.size);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
然后使用
创建2个图像(顶部和底部rect)CGImageCreateWithImageInRect( CGImageRef, CGRect);
这样您就可以获得所需的资产。动态创建可以设置动画的顶部和底部图像。
答案 2 :(得分:5)
做了一点研究并偶然发现了这个关于Github的精彩项目:AFKPageFlipper。 它是最近的,你知道吗?它本质上是Flipboard的动画完全由简单的Core动画完成。
看看它,它非常容易理解代码,它可能只是给你一些指导如何实现你需要的东西。