`
beike
  • 浏览: 361773 次
社区版块
存档分类
最新评论

编写简单的翻页效果

阅读更多

 

http://marshal.easymorse.com/archives/3760

 

页效果,类似下面的样子:

imageimage

在电子书应用中会很常见。这里需要两个要点:在电子书应用中会很常见。这里需要两个要点:

  • 翻页动画
  • 手势上下轻扫(swipe)的处理

 

先说一下轻扫(swipe)的实现,可以参考编写简单的手势示例:Tap了解手势种类。

在viewDidLoad方法中注册了对上、下、左、右四个方向轻松的处理方法:

- (void)viewDidLoad { 
    
    UISwipeGestureRecognizer *recognizer; 
    
    recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)]; 
    [recognizer setDirection:(UISwipeGestureRecognizerDirectionRight)]; 
    [[self view] addGestureRecognizer:recognizer]; 
    [recognizer release]; 
    
    recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)]; 
    [recognizer setDirection:(UISwipeGestureRecognizerDirectionUp)]; 
    [[self view] addGestureRecognizer:recognizer]; 
    [recognizer release]; 
    
    recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)]; 
    [recognizer setDirection:(UISwipeGestureRecognizerDirectionDown)];
    [[self view] addGestureRecognizer:recognizer]; 
    [recognizer release]; 
    
    recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)]; 
    [recognizer setDirection:(UISwipeGestureRecognizerDirectionLeft)]; 
    [[self view] addGestureRecognizer:recognizer]; 
    [recognizer release]; 
    
    
    [super viewDidLoad];

 

可以看到,都是同一个方法,handleSwipeFrom。

在该方法中,再识别具体是哪个方向的轻扫手势,比如判断是向下的轻扫:

-(void)handleSwipeFrom:(UISwipeGestureRecognizer *)recognizer { 
    NSLog(@"Swipe received."); 
    
    if (recognizer.direction==UISwipeGestureRecognizerDirectionDown) { 
        NSLog(@"swipe down");

判断是向上的轻扫:

if (recognizer.direction==UISwipeGestureRecognizerDirectionUp) { 
    NSLog(@"swipe up");

有关动画的处理,比如向下(往回)翻页,类似这样:

[UIView beginAnimations:@"animationID" context:nil]; 
[UIView setAnimationDuration:0.7f]; 
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; 
[UIView setAnimationRepeatAutoreverses:NO]; 
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];

[currentView removeFromSuperview]; 
[self.view addSubview:contentView];

[UIView commitAnimations];

向上(向前)翻页,只需改为:

[UIView beginAnimations:@"animationID" context:nil]; 
[UIView setAnimationDuration:0.7f]; 
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; 
[UIView setAnimationRepeatAutoreverses:NO]; 
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUpforView:self.view cache:YES];

[currentView removeFromSuperview]; 
[self.view addSubview:contentView];

[UIView commitAnimations];

如果是电子书,还需要考虑一个问题,就是有多个页面(图形),比如50页。那么需要有一个数据结构来保存这些页面的图片路径:

  • objc数据结构,比如数组
  • sqlite数据库表

这样,写一套翻页代码和加载什么图形之间就可以解耦。

本文示例使用的是数组,类似这样:

pages=[[NSArray alloc] initWithObjects:@"1.jpg",@"2.jpg",@"3.jpg",@"4.jpg",@"5.jpg",@"6.jpg",
                 nil];

图片保存在resources下。

为了能让上页下页翻页的时候找到关联的页面,采用了如下机制:

  • 将图片封装为UIImageView显示
  • 可以为UIImageView设置一个tag值,值为数组下标+1
  • 这样,上级view有方法能根据tag查询到UIImageView,比如:UIView *currentView=[self.view viewWithTag:currentTag];
  • 设置一个成员变量currentTag保存当前的tag值

比如这样,当应用加载的时候显示第一页:

    currentTag=1; 
    
    NSString *path = [[NSBundle mainBundle] pathForResource:@"pageflip1" ofType:@"mp3"]; 
    player=[[AVAudioPlayer alloc] initWithContentsOfURL:[NSURL fileURLWithPath:path] error:NULL]; 
    
    //[[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO]; 
    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation: UIStatusBarAnimationSlide]; 
    UIImageView *contentView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];  
    [contentView setImage:[UIImage imageNamed:[pages objectAtIndex:(currentTag-1)]]];  
    [contentView setUserInteractionEnabled:YES]; 
    contentView.tag=currentTag;

在翻页时的处理:

if (currentTag<[pages count]) { 
    UIView *currentView=[self.view viewWithTag:currentTag]; 
    currentTag++; 
    
    UIImageView *contentView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; 
    [contentView setImage:[UIImage imageNamed:[pages objectAtIndex:(currentTag-1)]]];  
    [contentView setUserInteractionEnabled:YES]; 
    contentView.tag=currentTag; 
    
    [UIView beginAnimations:@"animationID" context:nil]; 
    [UIView setAnimationDuration:0.7f]; 
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; 
    [UIView setAnimationRepeatAutoreverses:NO]; 
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES]; 
    
    [currentView removeFromSuperview]; 
    [self.view addSubview:contentView]; 
    
    [UIView commitAnimations];

分享到:
评论

相关推荐

    opengl模拟简单翻页效果

    在这个主题中,“opengl模拟简单翻页效果”是一个关于如何使用OpenGL来实现类似书籍翻页的动画效果的教学案例。这个效果通常需要结合物理学中的力学原理和图像处理技术来达到逼真的视觉体验。 在实现翻页效果时,...

    翻页效果 书翻页

    ### 知识点一:翻页效果的基本概念 在数字媒体设计中,翻页效果是一种模仿实体书籍翻页过程的视觉动画技术。这种效果广泛应用于电子书、网页设计、应用程序等场景,为用户提供更加生动直观的阅读体验。通过翻页效果...

    简单的电子书翻页效果 Flash cs3 as2.0

    "简单的电子书翻页效果 Flash cs3 AS2.0"是一个典型的项目,它利用了Adobe Flash Professional CS3这款强大的动画和交互设计工具,以及ActionScript 2.0编程语言,来模拟真实的纸质书翻页效果。下面我们将深入探讨这...

    android 仿真翻页效果.zip

    在Android开发中,实现仿真翻页效果是一种常见的增强用户体验的方式,尤其在电子书阅读器、杂志应用或展示类应用中尤为常见。这个“android 仿真翻页效果.zip”压缩包包含了一个实现这种效果的源码示例。让我们深入...

    Jquery 实现时钟翻页效果

    总结,实现 jQuery 时钟翻页效果主要涉及 HTML 结构设计、CSS 样式设定以及 JavaScript 逻辑编写,特别是翻页动画的实现。通过不断优化和调整,我们可以创建出具有独特视觉体验的时钟翻页效果。在实践中,还可以参考...

    翻页效果源码demo

    "翻页效果源码demo"就是这样一个实例,它提供了一种模拟真实书籍翻页体验的动画效果,尤其适用于创建电子杂志、在线图书或者产品展示等场景。这种效果能够使用户在浏览内容时感受到更强烈的沉浸感,提升整体的互动...

    flash 翻页效果 源码

    1. **ActionScript 3.0**:翻页效果通常使用ActionScript 3.0编写,这是Flash的最新版本,提供了更强的性能和更严谨的面向对象编程支持。开发者通过编写代码来定义翻页的动作,包括页面的弯曲、旋转、透明度变化等。...

    翻页效果——flash

    在创建翻页效果时,我们需要编写ActionScript代码来实现页面的旋转、动画速度、以及用户交互。 1. **创建图形元素**:在Flash的时间轴上,我们首先会创建两页的图形元素,这些可以是简单的矩形或者更复杂的书页形状...

    网站右上角广告翻页效果flash源文件

    在广告翻页效果中,可能涉及到ActionScript编写的时间轴控制、事件监听和用户交互响应,例如点击关闭广告的按钮时触发的脚本。 7. **适应性设计**:随着移动设备的普及,响应式设计成为网页设计的标准。一个良好的...

    翻页效果txt阅读器

    【描述】"这个是一个简单的带翻页效果的阅读器"表明,尽管它的功能可能相对基础,但其核心特色在于实现了模拟真实纸质书翻页的视觉效果。开发者http://blog.csdn.net/hmg25通过分享这个例子,可能旨在帮助其他开发者...

    flash自动翻页效果源码

    Flash自动翻页效果通常基于ActionScript编写,这是Flash平台上的脚本语言,用于控制和操作舞台上的对象和时间轴。源码中的关键知识点可能包括: 1. **ActionScript 3.0**:这是Flash中最常用的语言版本,具有面向...

    IOS源码应用Demo-3D书本翻页效果.zip

    【标题】"IOS源码应用Demo-3D书本翻页效果.zip" 是一个iOS开发相关的资源,其中包含了实现3D书本翻页效果的应用源代码。这种效果常见于电子书阅读器或互动式应用程序中,它为用户提供了类似于翻阅真实书籍的视觉体验...

    翻页效果 电子书类源码_ios源码

    在iOS开发中,实现“翻页效果”的电子书类源码是一种常见的需求,它能够带给用户更为生动且真实的阅读体验。这种效果通常被称为“仿真翻页”或“书本翻页”,模仿了现实中纸质书籍翻页的动作,使应用程序更具吸引力...

    翻页效果的navigation controller过场动画

    本主题将深入探讨如何实现一个具有翻页效果的navigation controller过场动画,这种效果常用于模拟书本翻页的用户体验,使得应用更加生动且引人入胜。 首先,我们要了解`push`和`pop`这两个概念。在navigation ...

    Android网络图片仿电子书翻页效果

    在Android开发中,实现网络图片的电子书翻页效果是一项挑战性的任务,它涉及到多个技术领域的结合,包括网络请求、图像处理、动画效果等。这个项目"Android网络图片仿电子书翻页效果"旨在为用户提供一种类似真实书籍...

    逼真翻页效果.zip

    在Android开发中,实现逼真的翻页效果是一项挑战,它能极大地提升用户的使用体验,让应用更具吸引力。这个"逼真翻页效果.zip"压缩包很可能是包含了一个Android项目的源代码,供开发者学习如何在自己的应用中实现这种...

    flash 电子书 翻页效果

    在描述中提到,“使用Flash技术实现了电子书的手动翻页效果”,这表明开发人员利用Flash的ActionScript编程语言编写了代码,实现了用户可以通过点击或拖动页面边缘来模拟实际翻页的动作。这种交互设计使得用户在浏览...

    flash 翻页效果

    描述中的“挺好用的Flash插件”可能是指有一些现成的库或者组件可以帮助开发者快速实现翻页效果,而无需从零开始编写所有代码。这些插件通常已经封装好了大部分翻页逻辑,只需要配置参数即可。 “实现步骤简单,...

    电子杂志(带翻页效果).zip

    3. JavaScript库:有一些专门的JavaScript库,如Turn.js、Pageflip等,它们提供了现成的翻页效果,只需简单的API调用就能快速实现。 三、源码解析 由于标签提到“源码”,我们可以推断压缩包内可能包含用于实现翻页...

    Android 书籍翻页效果的demo.zip

    在Android开发中,实现书籍翻页效果是一种常见的增强用户体验的方式,尤其在电子阅读应用或者教育类应用中。这种效果模拟了真实纸质书翻页的动态,使得数字内容更具吸引力。以下将详细介绍如何在Android中实现书籍...

Global site tag (gtag.js) - Google Analytics