1. 程式人生 > >【原理】UITableview Deceleration 加速滑動(慣性滑動)、彈性迴歸原理

【原理】UITableview Deceleration 加速滑動(慣性滑動)、彈性迴歸原理

----------------------------------------------------歡迎檢視IM軟體業務知識《專欄》-------------------------------------------------------------------
使用狀態機來保持線上狀態 【點選】                      拼圖演算法,將零碎小圖,整理到一張大圖上【點選
登入導航 【點選】                                                   會話session的概念【點選】       
“假線上’ 【點選】                                                    非對稱加密,RSA演算法【

點選
如何建立安全socket連線、登入 【點選】               淺談斷線重連、心跳和長線上 【點選
iOS 客戶端建立網路連線,常見錯誤彙總 【點選】 protocolBuf 在iOS上的使用入門、講解、指南 【點選
實現富文字解析【點選】                                          UITableview Deceleration 加速滑動(慣性滑動)、彈性迴歸原理【點選
--------------------------------------------------------------------------------------------------------------------------------------------------------------------

一、前言

之前做Symbian專案,由於軟體的介面完全是自繪的,列表也是自繪,所以列表的滾動也要自己做,然後就試著做了兩個引擎:

1.慣性滑動引擎:由於列表比較長,快速滑動,加速滑動。

2.彈性迴歸引擎:由於列表已經滑動到頂端(末端)需要再往下(往上)繼續離開頂部(底部)一些距離,表示別表已無內容,列表到頭。

當時做symbian的時候不知道Deceleration這個術語,本人只是從效果上看是慣性滑動,並且下拉的時候是迴歸動作。所以之前的名字是:慣性滑動,彈性迴歸!

基本思想就是按照每秒24幀的速度重新整理列表,即每隔0.04秒重新整理一次,由於是GC繪製,所以每次滑動時需要條用繪製函式,所以該引擎的效率還是不行。

這兩天,將著兩個引擎移植到iOS上發現,效果也不怎麼滴。所以GC直接繪製效率太低。因為iOS上通常是使用“偏移量”來達到滑動效果。

二、演算法思路

第一、“慣性滑動”的思路

列表較長的情況下用手撥動螢幕,實現較長的滑動。但是這個滑動又不是線性的,還要有一些阻尼效果。

所以,第一次我想到了拋物線,是源自物體掉落的軌跡,後來經過測試這個效果不好。

於是,我又想到了標準正態分佈曲線,這個阻尼效果更明顯。如圖1所示:


使用者撥動螢幕,當手指離開螢幕時,必然帶著初速度。那麼我把這個初速度對應到圖1中的Y軸最高點的值,然後這個值隨著時間的推移,不斷減小,從而達到模擬自然情況下阻尼滑動的效果。

如何求出初速度?

設計兩個長度為5的陣列,一個用於記錄使用者滑動時的座標Y值。另外一個用於記錄時間。不管使用者滑動多長距離只保留最後5個座標和5個時間值。然後,使用者滑動的距離除以時間即可算出來速度。當然這裡的單位就比較模糊了(嚴格上說是畫素/微秒)。

還有一個技術點:如果使用者在螢幕上來回滑屏,即軌跡並不是一個方向。這種情況怎麼判斷出來。如圖2所示:


(圖2)

判斷最後5個點是否在同一條直線上。

第二、再說“彈性迴歸”的思路。

其實彈性迴歸要比慣性滑動複雜。為什麼?因為,慣性滑動時,具體滑動的距離我不用關心,滑動多點兒也行,少點兒也行。但是彈性迴歸是一個固定的距離。比如:把列表從頂端往下拉動了100個畫素,那麼我的彈性迴歸引擎,需要在一定時間內按照某個曲線正好滑動完這100個畫素。這次我選的是拋物線了,下面將詳細說明理由。如下圖3所示:100個畫素就表示圖中陰影部分的面積,彈性迴歸引擎要

(圖3)

根據拋物線弓形面積公式等於:以割線為底,以平行於底的切線的切點為頂點的內接三角形的3/4,即: 拋物線弓形面積=S+1/4*S+1/16*S+1/64*S+……=4/3*S

根據陰影的面積可以求出,b的值。所以,每次滑動的距離即x1,x2,x3...x(b-1)。這裡x1的面積需要微積分了。

總而言之:這兩個引擎核心是兩個曲線,僅供參考。這個方法也讓公司申請了專利。專利號CN102331877A

程式碼我放到:http://download.csdn.net/detail/hherima/5161117 

注意:該工程包含裡富文字解析。只需要看MyListBrowserSlideEngine.m就行了。