【问题标题】:How to do the page curl like in storybook app in iPad如何在 iPad 的故事书应用中进行页面卷曲
【发布时间】:2013-01-18 05:11:37
【问题描述】:

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

Demo Video

谁能告诉我该怎么做。

更新:

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

【问题讨论】:

    标签: ios objective-c ipad page-curl


    【解决方案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】:

      有两种方法:

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

      2. 简单的方法,按照@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
      • transitionWithVeiwtransform 在 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];
          

          【讨论】:

            猜你喜欢
            • 2011-02-08
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2021-06-23
            • 1970-01-01
            • 1970-01-01
            • 2013-01-04
            • 2021-02-04
            相关资源
            最近更新 更多