如何在 iPad 的故事书应用中进行页面卷曲

Posted 2023-03-12

【中文标题】如何在 iPad 的故事书应用中进行页面卷曲

【英文标题】：How to do the page curl like in storybook app in iPad

【发布时间】：2013-01-18 05:11:37

【问题描述】：

我正在开发一个故事书应用程序，我想做如下视频中的页面卷曲。

Demo Video

谁能告诉我该怎么做。

更新：

我希望此卷页器支持 ios 4.3+。 UIPageViewController 仅适用于 iOS 6。

【参考方案1】：

您可能需要考虑UIPageViewController。它在创建使用页面卷曲动画的应用程序时非常有用。这是documentations link。

【参考方案2】：

您可以为此使用 UIView 的动画效果。我想这应该对你有帮助

[UIView beginAnimations:@"Curl" context:nil];
[UIView setAnimationDuration:2.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:contentView cache:YES];
[UIView commitAnimations];

contentView 是应用动画的视图。通过改变持续时间和动画曲线，您可以修改动画效果。

【讨论】：

@croyneaus4u 感谢您的示例项目，您在此项目中显示的卷页与视频中的不完全一样。您可以喜欢那个视频

【参考方案3】：

有两种方法：

艰难的方法是自己实现所有内容（从头开始，使用图层、蒙版、变换和渐变），而且非常头疼。

简单的方法，按照@Zen 的建议阅读UIPageViewController 的文档。它非常有用，可为您提供所需的确切动画（如视频所示）。或者，使用一些第三方代码。

如果你没有时间限制，那么我会说，走第一种方式。你会学到很多东西。

干杯，玩得开心:)

编辑

这里是一个示例应用的链接：

https://www.dropbox.com/s/x4qo2igrzvnkj16/CurlAnimationProject.zip

检查并告诉我你的想法。

【讨论】：

我希望这个卷页支持iOS 4.3+。 UIPageViewController 仅适用于 iOS 6。所以我选择了第一种方式，但我不知道该怎么做。你有这方面的教程吗，或者你能帮我做这个吗

是的，它应该支持 iOS 4.3 :-(

在上面的示例中，我将超级视图转换为 90 度，将子视图转换为 -90 度，并执行 pageCurlUp 和 pageCurlDown 动画（如示例应用程序中所示）。由于超级视图已旋转 90 度，因此 curlUp 或 curlDown 之后的动画看起来好像分别发生了 curlLeft 和 curlRight。

@croyneaus4u 在演示应用程序中做得很好，处理了UISwipegestureRecognizer 和转换contentView 等。@surendher 你可以看看它来了解你要做什么做。为了支持 iOS

transitionWithVeiw 和 transform 在 iOS 4.0 中都可以使用

【参考方案4】：

SettingViewController *svc = [[SettingViewController alloc]initWithNibName:@"SettingViewController" bundle:nil];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:2];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[self.navigationController pushViewController:svc animated:YES];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.navigationController.view cache:NO];
[UIView commitAnimations];

【参考方案5】：

正如答案中多次提到的那样，UIPageViewController (apple documentation) 是您应该查看的内容。

实现相当简单，控制器使用 2 个委托

数据源

：通过 2 个主要方法控制要显示的内容（您的页面）

委托

：控制其行为

它实现了从页面滚动到页面的滑动手势，并且可以在视图底部提供页面控件。

对于从页面到页面的转换，您可以设置滚动动画（适合照片/投资组合类型）或您正在寻找的页面卷曲。

【参考方案6】：

您可以通过

制作页面卷曲/翻转效果

横向模式：

[UIView beginAnimations:@"Curl" context:nil];
[UIView setAnimationDuration:2.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:contentView cache:YES];
[UIView commitAnimations];

---

纵向模式：

[UIView beginAnimations:@"Curl" context:nil];
[UIView setAnimationDuration:2.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlLeft forView:contentView cache:YES];
[UIView commitAnimations];