【Flutter】小說閱讀器改版 (一)—— 模擬翻頁的思路優化

語言: CN / TW / HK

theme: condensed-night-purple

「這是我參與11月更文挑戰的第13天,活動詳情檢視:2021最後一次更文挑戰」。

前言

前面幾篇實現了ListView的一些改造,現在可以對小說閱讀器進行一次改版,使其基於ListView而非原來的canvas繪製;

不過在此之前,或許可以做一些其他方面的優化,比如說模擬翻頁這塊;

現狀

在目前已經實現的小說閱讀器上,模擬翻頁是這樣的:

image.png

參考的實現方式,是出自這個系列的文章:

# Android開發之從零開始系列彙總

我實現的方案就是這套方案的簡單優化,在效能方面確實也如圖所示,沒有太大問題;

不過按照其中第三篇的說法,繪製翻起的背面部分,是這樣的方式:

image.png

在這步上,可以做一些優化;

方案

原來的方案是這樣的:

image.png

說實話,當時看到這段,第一反應就是跳過;確實很勸退人;

總結一下,對圖層的操作比較複雜,要經過翻轉、一次旋轉、2次平移,最後還要涉及到裁剪;

這次對這部分進行一下研究後發現,其實並沒必要那麼複雜,其實一次旋轉加一次翻轉最後裁剪一下就行;

以上圖為例,說白了就是以這個點為基準進行翻轉,最後按翻起頁區域裁剪即可:

image.png

至於實現方式這塊,最終其實都差不多,因為都是使用矩陣來操作;不過思路這塊,就簡單很多了;

說白了,可以視為先平移到交叉點的位置,旋轉上圖中的ehD的角度,然後翻轉,也就是scale,最後處理下裁剪下,就是所需要的效果;

如果結合到矩陣上面,跟原來方案上應該差不多,但是從理解層面來說,這種方式好理解多了;

最重要的是,其實也沒必要分要用到矩陣,這個方式用提供的API直接就能實現;

結尾

這篇總結了下我回顧原專案中的一個優化點思考,接下來就是用已經自定義好的ListView,來把目前的小說閱讀器徹底重構一下;

「其他文章」