【Flutter】小說閱讀器改版 (一)—— 模擬翻頁的思路優化
theme: condensed-night-purple
「這是我參與11月更文挑戰的第13天,活動詳情檢視:2021最後一次更文挑戰」。
前言
前面幾篇實現了ListView的一些改造,現在可以對小說閱讀器進行一次改版,使其基於ListView而非原來的canvas繪製;
不過在此之前,或許可以做一些其他方面的優化,比如說模擬翻頁這塊;
現狀
在目前已經實現的小說閱讀器上,模擬翻頁是這樣的:
參考的實現方式,是出自這個系列的文章:
我實現的方案就是這套方案的簡單優化,在效能方面確實也如圖所示,沒有太大問題;
不過按照其中第三篇的說法,繪製翻起的背面部分,是這樣的方式:
在這步上,可以做一些優化;
方案
原來的方案是這樣的:
說實話,當時看到這段,第一反應就是跳過;確實很勸退人;
總結一下,對圖層的操作比較複雜,要經過翻轉、一次旋轉、2次平移,最後還要涉及到裁剪;
這次對這部分進行一下研究後發現,其實並沒必要那麼複雜,其實一次旋轉加一次翻轉最後裁剪一下就行;
以上圖為例,說白了就是以這個點為基準進行翻轉,最後按翻起頁區域裁剪即可:
至於實現方式這塊,最終其實都差不多,因為都是使用矩陣來操作;不過思路這塊,就簡單很多了;
說白了,可以視為先平移到交叉點的位置,旋轉上圖中的ehD的角度,然後翻轉,也就是scale,最後處理下裁剪下,就是所需要的效果;
如果結合到矩陣上面,跟原來方案上應該差不多,但是從理解層面來說,這種方式好理解多了;
最重要的是,其實也沒必要分要用到矩陣,這個方式用提供的API直接就能實現;
結尾
這篇總結了下我回顧原專案中的一個優化點思考,接下來就是用已經自定義好的ListView,來把目前的小說閱讀器徹底重構一下;
「其他文章」
- 【Flutter】小說閱讀器改版 —— 翻頁動畫(三)
- 【Flutter】小說閱讀器改版 (六)—— 在動畫播放中攔截手勢
- 【Flutter】小說閱讀器改版 (五)—— 整合ScrollActivity
- 【Flutter】小說閱讀器改版 (四)—— 讓ScrollActivity追蹤手勢最新位置
- 【Flutter】小說閱讀器改版 (三)—— 實現支援 Drag 的ScrollActivity
- 【Flutter】小說閱讀器改版 (二)—— 改進一下模擬翻頁的效果
- 【Flutter】小說閱讀器改版 (一)—— 模擬翻頁的思路優化
- 【Flutter】自定義ListView開發記錄(五)—— 提供手勢等資訊
- 【Flutter】自定義ListView開發記錄(四)—— 關於ParentData的設想和分析與簡單實踐
- 【Flutter】自定義ListView開發記錄(三)—— 處理HitTest手勢事件
- 【Flutter】自定義ListView開發記錄(二)——設計LayoutManager
- 【Flutter】自定義ListView開發記錄(一)——設計滑動效果的處理方式
- 【Flutter】熊孩子拆元件系列之拆ListView(十)—— 按自己的方式組裝修改ListView
- 【Flutter】熊孩子拆元件系列之拆ListView(九)—— AutomaticKeepAlive和KeepAlive
- 【Flutter】熊孩子拆元件系列之拆ListView(八)—— SliverList的運作機制
- 【Flutter】熊孩子拆元件系列之拆ListView(七)—— SliverList的基礎結構
- 【Flutter】熊孩子拆元件系列之拆ListView(六)—— SliverPadding
- 【Flutter】熊孩子拆元件系列之拆ListView(五)—— ViewPort
- 【Flutter】熊孩子拆元件系列之拆ListView(四)—— _ScrollableScope
- 【Flutter】熊孩子拆元件系列之拆ListView(三)—— GlowingOverscrollIndicator