RN ScroolView 從物理學角度理解觸摸滾動事件

前言

本文旨在介紹React Native ScrollView官方文檔中未提及的滾動事件API,著重介紹如何從物理學角度理解onMomentumScrollBeginonMomentumScrollEnd函數。

至于官方文檔中為何不提及這些API,個人理解是目前文檔也在不斷更新,文檔還未完善。亦或是我打開的姿勢不對?希望知道的朋友能科普下,解鎖新的姿勢。

ScrollView簡介

一個包裝了平臺的ScrollView(滾動視圖)的組件,同時還集成了觸摸鎖定的“響應者”系統。
記住ScrollView必須有一個確定的高度才能正常工作,因為它實際上所做的就是將一系列不確定高度的子組件裝進一個確定高度的容器(通過滾動操作)。要給一個ScrollView確定一個高度的話,要么直接給它設置高度(不建議),要么確定所有的父容器都已經綁定了高度。在視圖棧的任意一個位置忘記使用{flex:1}都會導致錯誤,你可以使用元素查看器來查找問題的原因。
ScrollView內部的其他響應者尚無法阻止ScrollView本身成為響應者。

官方文檔介紹的API

官方文檔中提及了三個與事件回調相關的API,如下所示:


圖-1

官方文檔未介紹的API

此處只列出ScrollView特有的事件回調API,關于“響應者系統”的回調API一下就不列出了。

API Description
onTouchStart 按下屏幕時觸發
onTouchMove 移動時觸發,實際上按住不動也會觸發
onTouchEnd 手指離開屏幕時觸發,Android測試當有拖曳行為時會調用onScrollEndDrag來代替之;當無拖曳行為時,手指離開就會觸發
onScrollBeginDrag 開始拖動時觸發,滾動開始的標志
onScroll 滾動過程中調用,一幀最多調用一次
onScrollEndDrag 拖曳結束時調用,頂替onTouchEnd
onMomentumScrollBegin 手指離開屏幕時調用(瞬時沖量滑動的開始)
onMomentumScrollEnd 滾動結束時調用(瞬時沖量滑動的結束)

起初很不理解最后倆個方法的描述,網上一查資料,解釋為“一幀滾動的開始結束”,“幀滾動”是什么鬼?一臉懵逼,我拖曳的時候畫面不是一直在滾動嗎?意思會調用好幾次?百度、google無果,只能一臉懵逼的自己寫Demo驗證了。
Momentum一詞指物理學中動量,再解釋之前,我們先回顧下高中所學的物理知識。
動量定理

圖-2

瞬時沖量:極短時間內力F產生的沖量,簡單點就理解為物體的速度會突變,舉個例子就是你給一個靜止的物體,施加一個瞬時沖量,那瞬間,物體的速度會從0突變到另外一個值,而位移未曾改變。

結論:這組函數是用于響應你手指在離開屏幕那一剎那(極短時間),對物體在滑動反方向上所施加力的作用效果,這時會產生一個瞬時沖量,至使物體速度突變,之后的滑動過程就是一個減速運動至速度為零(ScrollView內部會模擬產生一個摩擦力)。
這就是為什么在ScrollView的實際操作當中,當我們用力滑動一小截,ScrollView就會連翻好幾頁的原因。
簡而言之
onMomentumScrollBegin會在你手指離開屏幕時調用,不過在此之前會先調用onScrollDragEnd,onMomentumScrollEnd會在滑動結束時調用。

Demo測試驗證

測試情景一:
手指按住,不移動(持續1-2s),然后離開屏幕,測試結果如下如所示:

圖-3

可見onTouchMove在測試期間共調用了35次,并不是如網上所言在移動時候調用,而是在onTouchStart后就會調用,手指離開屏幕就會調用onTouchEnd結束事件響應。
注意,onTouchMove傳進來的nativeEvent并沒有contentOffset屬性(圖片相對ScrollView容器的滑動偏移量)如圖-4所示,這也從另外一個方面說明它不是在移動的時候調用。
圖-4

測試情景二:
手指按住屏幕,慢慢的拖動一段距離,再最后要離開屏幕時,手指往滑動反方向用力,測試結果如下所示,圖中數字表示滑動方向的偏移量:
圖-5

上面說到onTouchMove并不是在滑動時調用,那么滑動開始回調API是誰呢?聰明的你肯定想到了,沒錯就是onScrollBeginDrag,代表滑動的開始。該函數接收的nativeEvent才包含了contentOffset屬性,如圖-5所示。

圖-6

onScroll就是在滑動的過程中會調用。
重點來了,
在你手指離開屏幕時,會先調用onScrollEndDrag,表示拖動結束,接下來,就如上面我們分析的一樣,根據你手指離開屏幕時所施加的力,計算這個瞬時沖量該讓圖片滑動多少距離。依次調用onMomentumScrollBegin,onScroll,onMomentumScrollEnd。
測試代碼就不上了,太長了,寫起來也很簡單。

最后,由于本人水平有限,第一次寫文章,文中難免有不妥之處,還請多多體諒。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,791評論 6 545
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,795評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,943評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,057評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,773評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,106評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,082評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,282評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,793評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,507評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,741評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,220評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,929評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,325評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,661評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,482評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,702評論 2 380

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,806評論 25 708
  • 2014的 O2O 想要革傳統行業的命,幾乎所有的行業都有 O2O 創業公司的身影,這股熱潮也讓我心生萌芽,但當我...
    秋橙閱讀 533評論 0 2
  • 問題描述 笨方法:O(n2) 分治O(nlogn) 1)將數組分成兩半,分別求出左半邊的逆序數和右半邊的序數2)再...
    Co_zy閱讀 916評論 0 1