【Flutter】小說閱讀器改版 (四)—— 讓ScrollActivity追蹤手勢最新位置
theme: condensed-night-purple
「這是我參與11月更文挑戰的第16天,活動詳情檢視:2021最後一次更文挑戰」。
前言
在上一篇中,實現了讓Item先自動定位到手勢按下的位置,不過還有一個問題:
如果動畫沒結束前就移動手勢,動畫並不會追蹤手勢最新位置,如圖所示:
現在就來處理下這個問題:
分析
-
出現這個問題的原因,就是動畫並未根據最新手勢資訊做判斷;所以如果想要根據最新手勢資訊做判斷,首先要做的就是傳入最新手勢;
-
傳入了手勢資訊,還要能根據手勢資訊,終止或延長動畫;
拓展一下,上面兩點所要求的內容,總結一下就是:
-
對animteTo方法進行修改,使其不再一直重建AnimationController,並在不影響動畫播放的前提下,傳入最新的手勢資訊;
-
對於先按下左邊,然後往右滑動的手勢,應該延長動畫,直到追蹤到手指位置;
-
對於先按下右邊,然後往左滑動的手勢,應該在遇到手指位置的時候,提前終止動畫;
方案
- 首先,傳入手勢資訊這塊,說白了就是activity正在執行的時候,就僅僅更新終點位置即可,簡單處理快速驗證的話,可以這麼做:
先新建一個方法用於更新目標位置:
然後animateTo方法判斷一下當前Activity,是自定義的新Activity,就呼叫更新方法:
- 對於手勢資訊的處理這塊,我偷懶處理了下:
其實沒必要分別實現上面提到的兩種情況,對於這種全屏Item等寬的情況,手勢的操作最大距離不會超過Item寬度,所以,可以將重點位置再增加個Item寬度,或者說是螢幕寬度,這樣只會存在一種情況,判斷 AnimationCroller的 value 是否小於等於目標值,是的話,那麼就終止動畫,將目標值傳入即可;
首先更改構造器中建立的AnimationController:
然後修改tick方法,在小於的時候終止動畫返回;
結尾
現在看下效果,好像沒啥太大問題了:
雖說現在通過實現一個新的ScrollActivity的方式來勉強實現了效果;但是細想一下,其實對Drag事件併為做出什麼處理;或者說,現在手勢操作,其實是啟動了DragActivity和自定義的Activity,讓它倆一起執行;
光看UI效果的話,好像沒什麼衝突,但是從程式碼層面,應該是一直在衝突的……這塊的問題需要解決下
- 【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