在android上实现页面卷曲？

Posted 2023-02-22

【中文标题】在android上实现页面卷曲？

【英文标题】：Implement page curl on android?

【发布时间】：2011-04-24 04:38:58

【问题描述】：

我正在网上冲浪，寻找在 android 上翻页的好效果，但似乎没有。由于我正在学习该平台，因此能够做到这一点似乎是一件好事。

我在这里找到了一个页面：http://wdnuon.blogspot.com/2010/05/implementing-ibooks-page-curling-using.html

- (void)deform

  Vertex2f  vi;   // Current input vertex
  Vertex3f  v1;   // First stage of the deformation
  Vertex3f *vo;   // Pointer to the finished vertex
CGFloat R, r, beta;
  for (ushort ii = 0; ii < numVertices_; ii++)
  
    // Get the current input vertex.
    vi    = inputMesh_[ii];                       
    // Radius of the circle circumscribed by vertex (vi.x, vi.y) around A on the x-y plane
    R     = sqrt(vi.x * vi.x + pow(vi.y - A, 2)); 
    // Now get the radius of the cone cross section intersected by our vertex in 3D space.
    r     = R * sin(theta);                       
    // Angle subtended by arc |ST| on the cone cross section.
    beta  = asin(vi.x / R) / sin(theta);       

// *** MAGIC!!! ***
v1.x  = r * sin(beta);
v1.y  = R + A - r * (1 - cos(beta)) * sin(theta); 
v1.z  = r * (1 - cos(beta)) * cos(theta);
// Apply a basic rotation transform around the y axis to rotate the curled page.


 // These two steps could be combined through simple substitution, but are left
    // separate to keep the math simple for debugging and illustrative purposes.
    vo    = &outputMesh_[ii];
    vo->x = (v1.x * cos(rho) - v1.z * sin(rho));
    vo->y =  v1.y;
    vo->z = (v1.x * sin(rho) + v1.z * cos(rho));
    

给出了 iPhone 的示例（上面）代码，但我不知道如何在 android 上实现它。有哪位数学大神可以帮助我了解如何在 Android Java 中实现这一点。

是否可以使用本机绘图 API，我是否必须使用 openGL？我可以以某种方式模仿这种行为吗？

任何帮助将不胜感激。谢谢。

****************编辑****************************** ******************

我在 Android API 演示中找到了一个 Bitmap Mesh 示例：http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/BitmapMesh.html

也许有人可以帮助我解决一个方程式，只需将右上角向内折叠穿过页面以创建类似的效果，然后我可以应用阴影以使其更深入？

【参考方案1】：

我刚刚创建了一个开源项目，该项目使用原生画布进行 2D 页面卷曲模拟：https://github.com/moritz-wundke/android-page-curl 我仍在努力添加适配器等以使其可用作独立视图。

编辑：链接已更新。 编辑：丢失的文件已被推送到 repo。

【讨论】：

我将尽快提交一个新版本，它充当 ListView，因此您可以在其中添加任何类型的视图！

很有趣，但仍然需要一个独立的视图。

我在做 :D 当我有空的时候，一个不错的新版本会发布！

谢谢，可以添加很多图片，图片的反面不是白色的吗？

@Moss，我检查了您的项目，但缺少 R.styleable.PageCurlView 和 R.layout.list_item。

【参考方案2】：

我目前正在使用 OpenGL ES 对 Android 上的页面卷曲效果进行一些实验。这实际上是一个草图，但可能会给出一些想法如何根据您的需要实现页面卷曲。如果您对 3D 页面翻转实现感兴趣。

至于你所指的公式 - 我试过了，不太喜欢结果。我会说它根本不适合小屏幕并开始破解更简单的解决方案。

代码可以在这里找到： https://github.com/harism/android_page_curl/

在撰写本文时，我正在决定如何实现“假”软阴影 - 以及是否创建适当的应用程序来展示这种卷页效果。此外，这几乎是我做过的为数不多的 OpenGL 实现之一，不应过多地作为一个恰当的例子。

【讨论】：

无论如何，由于我的代码有些难以阅读，我使用的想法与您提供的代码非常相似。不同的是，我正在围绕圆柱体而不是圆锥体进行卷曲。这使得计算卷曲位置变得更加容易，以便卷曲的表面边缘始终跟随指针。最后，与实际计算相比，我在创建有效的三角带进行渲染方面花费了更多的精力。

谢谢！你的代码是我能够简单地放入“现有源”新项目并让它运行的第一个代码。 :-)

@harism 好一个..我想要一些修改，图像应该适合横屏和竖屏的全屏。我到底需要在哪里修改你的代码？

嗨，harism，我查看了你的代码，这对我来说非常有用，但我有一个小问题，在我的应用程序中，我想像一本书一样显示页面，当页面卷曲时它的背面我想添加新页面（图像）而不是首页（图像）的阴影效果。我不知道该怎么做。等待您的答复。提前谢谢。

@harism 有计划增加对 Views 的支持吗？今天的示例仅显示图像。谢谢

【参考方案3】：

我很确定，您必须使用 OpenGL 才能获得不错的效果。基本 UI 框架的功能非常有限，您只能使用动画对 View 进行基本的转换（alpha、translate、rotate）。

虽然有可能使用 FrameLayout 和其中的自定义视图在 2D 中模拟类似的东西。

【讨论】：

好吧，我在 API 演示中找到了 Bitmapmesh，所以如果我可以创建一个网格，我肯定可以以某种方式对其进行转换吗？演示没有很好的记录，所以我很难弄清楚，但可以在这里找到：developer.android.com/resources/samples/ApiDemos/src/com/…

我设法掌握了网格，现在的问题是创建数学方程来对网格执行变换。

您好，是否可以在页面卷曲中使用操作栏滑动标签？