2010-10-12 87 views
40

我在網上衝浪尋找在Android上翻頁的好效果,但似乎並沒有一個。因爲我正在學習平臺,所以能夠做到這一點似乎是件好事。在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演示位圖網例如:http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/BitmapMesh.html

也許有人可以幫助我在一個公式來簡單地摺疊在頁面右上角診斷內部創建一個類似的效果,我可以稍後應用陰影來更深入地展示它?

回答

29

我剛剛創建了一個開放源代碼項目,它使用本地畫布在2D中進行頁面捲曲模擬:https://github.com/moritz-wundke/android-page-curl 我仍然在努力添加適配器並使其可用作獨立視圖。

  • 編輯:鏈接已更新。
  • 編輯:缺少文件已被推到回購。
+0

非常酷,繼續,我認爲你可以做得更好 – pengwang 2011-03-03 06:06:45

+0

我將盡快提交一個新的版本,作爲一個ListView,所以你將能夠添加任何種類的視圖! – Moss 2011-04-06 09:01:36

+0

有趣但仍需要是獨立的觀點。 – Hamid 2011-04-12 08:07:13

0

我敢肯定,你必須使用OpenGL才能獲得更好的效果。基本的UI框架的功能非常有限,您只能使用動畫對視圖執行基本轉換(alpha,translate,rotate)。

在2D中使用FrameLayout和其中的自定義View來模擬類似的東西是可能的。

+0

那麼我在API演示中找到了Bitmapmesh,所以如果我可以創建一個網格,當然我可以以某種方式轉換它?該演示沒有很好的記錄,所以我有困難搞清楚,但它可以在這裏找到:http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/ graphics/BitmapMesh.html – Hamid 2010-10-12 09:01:39

+0

我設法弄到了網格,現在的問題是創建數學方程來執行網格上的變換。 – Hamid 2010-10-12 13:10:05

+0

嗨,是否有可能在頁面捲曲的動作欄刷卡選項卡? – Steve 2014-11-18 09:06:56

30

我正在使用的OpenGL ES目前在Android網頁捲曲效果一些嘗試。這實際上是一個草圖,但也許給了一些想法如何實現頁面捲曲滿足您的需求。如果你對3D頁面翻轉實現感興趣。

至於你提到的公式 - 我試了一下,並不太喜歡這個結果。我會說它很不適合小屏幕,並開始破解更簡單的解決方案。

代碼可以在這裏找到: https://github.com/harism/android_page_curl/

在寫這個,我在決定如何實施「假」軟陰影之中 - 以及是否創建一個合適的應用程序來炫耀此頁面捲曲效果。這也是我所做過的極少數OpenGL實現之一,不應該被視爲一個合適的例子。

+0

謝謝,我來看看。 – Hamid 2011-04-12 08:07:34

+0

無論如何,因爲我的代碼往往有些不可讀,所以我使用的代碼與您提供的代碼非常相似。有了區別,我正在做一個圓筒而不是一個圓錐體捲曲。這使得計算捲曲位置變得更加容易,從而捲曲的曲面邊緣始終跟隨指針。最後,我花費了更多的精力來創建一個有效的渲染三角形條帶,而不是進行實際的計算。 – harism 2011-04-12 11:24:09

+0

謝謝!你是第一個能夠簡單地打入「現有資源」新項目並使其運行的代碼。 :-) – 2011-04-25 10:12:17