`

Android 实现书籍翻页效果----原理篇

阅读更多
       之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫,在android上也有像laputa和ireader等应用实现有这个特效,在网上搜索了一下好像也没有现成的例子,所以自己动手实现了一个,现在将实现的过程记录下来。






          实现真实的翻页效果,为了能在翻页的过程中看到下一页的内容,在翻页之前必须准备两张页面,一张是当前页,另一张是下一页。翻页的过程就是对这两张页面的剪切,组合过程。
用户看到的可以分为3部分:当前页的可见部分(下图绿色部分),把书页翻起来后看到的背面区域(下图黄色部分),把书页翻起来后看到的下一页的一角(下图绿色部分)。



          
     假设我们已经求得了包含黄色区域和蓝色区域的Path, 假设为mPath0,那么绿色区域则可以使用Canvas.clipPath(mPath0, Region.Op.XOR)来剪裁绘制;而蓝色区域则可以通过使用(假设黄色区域的Path为mPath1)
    
[java] view plaincopy
Canvas.clipPath(mPath0); 
Canvas.clipPath(mPath1, Region.Op.DIFFERENCE); //绘制第一次不同于第二次的区域 
 
  对clipPath不是很熟的童鞋可以去复习下 自带apidemo的Clipping例子。

下面我们来研究如何求取mPath0:
         
上图黄色和蓝色区域的mPath0,可以通过以下获取:
[java] view plaincopy
mPath0.moveTo(jx, jy); 
mPath0.quadTo(hx, hy, kx, ky); 
mPath0.lineTo(ax, ay); 
mPath0.lineTo(bx, by); 
mPath0.quadTo(ex, ey, cx,cy);    
mPath0.lineTo(fx, fy); 
mPath0.close(); 


接着就是要求出绘制path0所需的各个顶点。





我们已知的条件是:a点坐标(触摸点),f点坐标(显示界面的大小),直线eh是af的垂直平分线。
剩下的就变成数学问题啦~~
先来求出g点坐标因为g为af中点:
显然gx=(ax+fx)/2; gy=(ay+fy)/2;
e点坐标:
    添加补助线gm,m点坐标为(gx, mHeight);
    由相似垂直三角形egm和gmf可知:
      em=gm*gm/mf;
这样e点坐标为:(gx-em, mHeight)
同理可以求出h点坐标。
C点坐标:
为简化计算,我们令n点为ag中点,这样有三角形cjf和ehf得:
     cx=ex- ef/2 ;
c点坐标为:(ex- ef/2, mHeight)
同理求得j点坐标。
以下推导需要较多的数学知识,不记得的童鞋,自觉复习去~~
一条直线的函数为:
Y=ax+b;
通过已知两点求直线:  a = (y2-y1)/(x2-x1);
                         b = (x2*y1-y2*x1)/(x2-x1);

两条相交直线交点的坐标为:x= (b2-b1)/(a1-a2);
                           y=a1x+b1或者y=a2x+b2

综上,4点相交的直线的交点为:
     x=( (x4*y3-y4*x3)/(x4-x3)-(x2*y1-y2*x1)/(x2-x1)) /
((y2-y1)/(x2-x1)- (y4-y3)/(x4-x3) )
    
= ( (x4*y3-y4*x3) (x2-x1)- (x2*y1-y2*x1) (x4-x3) ) /
    ( (y2-y1) (x4-x3)- (y4-y3) (x2-x1) )
将之前求得的 a,e,c,j四个点带入上式则可以求出 b. 同理可求k点。

d点坐标:
d为pe的中点,所以:
dx=((cx+bx)/2+ex)/2
dy=((cy+by)/2+ey)/2
同理 可求 i 点。
     通过上述求解,绘制翻页效果的各个顶点均已得出,剩下的就是贴图,绘制阴影。这部分将在于后的文章中介绍,嘻嘻,喜欢研究的童鞋可以自己试试,懒人们,可以等等,明天整理好代码后贴出~~~
  • 大小: 124.6 KB
  • 大小: 102.1 KB
  • 大小: 30.3 KB
分享到:
评论
1 楼 AndLi 2012-04-28  
高手

相关推荐

    Android 实现书籍翻页效果----完结篇

    在Android开发中,实现书籍翻页效果是一种常见的增强用户...总之,实现Android书籍翻页效果是一个结合图形绘制、触摸事件处理、动画和性能优化的综合过程。通过不断迭代和优化,我们可以创建出既美观又高效的翻页体验。

    Android 实现书籍翻页效果----升级

    总的来说,实现Android书籍翻页效果是一个结合了图形学、动画和用户交互设计的挑战。开发者需要理解Android的视图系统,熟悉图形渲染原理,并且有良好的编程实践,才能创造出流畅、自然的翻页体验。通过不断的学习和...

    BookPage-Android自定义View实现翻页效果,并附带实现教程.zip

    仿真书籍翻页效果BookPageView简介:实现了仿真翻页效果,教程完整地描述了翻页原理分析到性能优化的过程教程博客:Android自定义View——从零开始实现书籍翻页效果(一) Android自定义View——从零开始实现书籍...

    Android 实现书籍翻页效果TXT阅读器

    综上所述,实现一个Android书籍翻页效果的TXT阅读器是一个涉及多个技术层面的综合项目,涵盖文本处理、UI设计、动画编程和性能优化等多个领域。通过这样的实践,开发者不仅可以提升Android开发技能,还能深入理解...

    Android 实现书籍翻页效果(升级版).zip

    在Android开发中,实现书籍翻页效果是一种常见的增强用户体验的技巧,它能让用户感受到更真实、互动性更强的阅读体验。本项目“Android 实现书籍翻页效果(升级版)”提供了一种优化的实现方法,旨在提升视觉效果和...

    Android_实现书籍翻页效果

    总的来说,Android书籍翻页效果的实现是一个涉及图形学、动画和几何计算的综合过程。理解每个步骤的原理并熟练运用Android的图形API是实现这一效果的关键。开发者需要具备扎实的数学基础,熟悉Canvas和Path的使用,...

    Android程序研发源码Android 实现书籍翻页效果(升级版).zip

    在Android应用开发中,...通过研究这个“Android 实现书籍翻页效果(升级版)”的源码,开发者不仅能掌握如何实现翻页效果,还能加深对Android动画系统、自定义View和绘图原理的理解,对于提升Android开发技能大有裨益。

    Android 实现书籍翻页效果(升级版).rar

    在Android应用开发中,实现书籍翻页效果是一个常见的需求,特别是在教育、阅读或娱乐类应用中。本项目“Android 实现书籍翻页效果(升级版)”提供了一个实用的解决方案,适用于多个场景,如软著参考、实际项目开发、...

    Android源码——书籍翻页效果的demo.zip

    在Android开发中,实现书籍翻页效果是一种常见的增强用户体验的方式,尤其在电子阅读应用或教育类应用中。这个"Android源码——书籍翻页效果的demo.zip"包含了一个示例项目,展示了如何在Android平台上创建逼真的...

    android 书籍翻页效果 源码

    本资源提供了适用于初学者学习的Android书籍翻页效果的源代码,下面将详细解释相关知识点。 1. **Android动画体系** Android系统提供了多种动画机制,包括属性动画(Property Animation)、视图动画(View ...

    Android 翻页效果实现源码

    下面我们将深入探讨这个主题,介绍Android翻页效果的基本原理、实现方法以及可能遇到的关键技术点。 一、翻页效果的基本概念 翻页效果,又称为“仿真翻书”或“卷轴效果”,模拟了纸质书籍翻页的动态过程,使得...

    android 仿书籍翻页效果(bug修复版本)

    在Android开发中,实现仿书籍翻页效果是一项常见的需求,特别是在构建阅读类应用时。"android 仿书籍翻页效果(bug修复版本)"是一个专为此目的设计的项目,它修复了旧版本中第一页和第二页显示空白的问题,提供了一个...

    android 仿书籍翻页效果

    在Android开发中,实现仿书籍翻页效果是一项挑战性但有趣的任务,它可以为用户带来更加沉浸式的阅读体验。本文将详细解析如何实现这样一个功能,并基于提供的"android 仿书籍翻页效果"进行讨论。 首先,要创建这样...

    Android 真实书籍翻页效果.rar

    在Android平台上,实现真实书籍翻页效果是一种常见的增强用户体验的方式,尤其在电子阅读应用中。这个"Android 真实书籍翻页效果.rar"压缩包很可能包含了一个示例项目或者库,用于帮助开发者构建类似真实书籍翻页的...

    android 书籍翻页效果的demo

    这个“android 书籍翻页效果的demo”是一个未完全完成但已有不错表现的示例项目,适合开发者研究和学习翻页动画的实现原理。 1. **Android帧动画原理**:书籍翻页效果通常是通过帧动画来实现的。帧动画是Android...

    android翻页效果(阅读器)

    在Android平台上开发一款电子阅读器,实现如同纸质书籍般的翻页效果是一项常见的需求。这个项目名为"android翻页效果(阅读器)",它提供了一个完整的解决方案,允许用户通过手势来移动页眉和页脚,营造出逼真的阅读...

Global site tag (gtag.js) - Google Analytics