如何为UIView实现翻转过渡效果

Question

如何为UIView实现翻转过渡效果

iphoneuiviewtransition

3

如何实现UIView的翻转过渡效果，就像“Flipboard”应用程序中一样。这里我已经有一个示例，可以从左到右或从右到左进行翻转。但是我想要实现从底部向上或从顶部向下的折叠翻转。

- user907418

尝试在Github代码项目中搜索FGallery，下载代码并查看seeAll按钮上的动画。 - Mehul Mistri

请查看此链接 https://github.com/gdavis/FGallery-iPhone。 - Mehul Mistri

谢谢您的回复。在这里，我想要实现类似于“Flipboard”应用程序中的视图过渡效果。但是FGallery没有这样的过渡效果。 - user907418

3个回答

1

请查看这个教程：http://www.gethugames.in/blog/2012/02/extended-epgltransitionview.html 以及这个项目：https://github.com/saiy2k/EPGLTransitionView

附注：这是我的博客，链接指向我对EPGLTransitionView的分支。

- saiy2k

如何在您的项目中实现类似选项2的底部翻转？ - Preetam Jadakar

你创建了一个新项目，并说它包含了自上而下和自下而上的翻转效果...但我在 https://github.com/saiy2k/EPGLTransitionView 上找不到。 - Preetam Jadakar

你可以翻转方向，但需要切换 [[EPGLTransitionView alloc] initWithView1: andView2: delegate: fwdDirection:]; 中的 fwdDirection 参数。 - saiy2k

0

这是我尝试解决问题的思路。也许我会利用空闲时间实现它，以便随时拥有一个样例。

在动画开始时，通过将其图形上下文读入位图来对当前UIView进行快照
创建三个（是的，三个——请忍耐）大小为视图的两半的UIView，其中两个用于右半部分的区域
在它们各自的drawRect:实现中，在左视图（第一个）上绘制位图的一半，右视图（第二个）上的右半部分
隐藏原始视图
创建我们要过渡到的下一个视图
将其内容读入位图
隐藏下一个视图
创建第三个临时UIView来绘制图像的右半部分（第三个）
将第三个位置放在第二个视图下面
沿其左边缘动画翻转第二个视图的一半
使第二个显示下一个视图的左半部分
执行剩余的翻转动画
完成过渡后，显示下一个视图，隐藏所有临时视图
Et voilla！至少我希望是这样。

我认为，你可以使用一个UIView和三个CALayer代替那三个UIView。

还有一个问题是如何与用户交互地进行转换，让用户用手指滑动页面。

我还认为翻转视图有一个双面层的问题。还没有机会尝试这些属性以及它们能帮助实现什么。

另一种解决方案是从UIView的内容创建纹理，并在其上放置一个OpenGL表面（基于alpha透明的CAEAGLLayer）。然后，你对那个图像纹理化的三角形所做的事情只受你的想象力限制。我想这也可以创建一个类似于Mail iOS应用程序使用的Genie-like移动到垃圾箱动画。

编辑：哦，抱歉，我想的是从右到左的翻页样式翻转，而不是从上到下，但总体思路当然是相同的。

- macbirdie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vishy · Accepted Answer

您可以使用下面的代码来实现此类动画。

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:5];
[UIView transitionFromView:view2 toView:view1 duration:3 options:UIViewAnimationOptionTransitionFlipFromBottom completion:NULL];
[UIView commitAnimations];

您可以根据需求设置持续时间和动画过渡效果。此功能仅适用于iOS5。