Android高仿path小球刷新效果，類似IOS果凍效果

simon灰灰 7年前發布 | 20K 次閱讀安卓開發 Android開發移動開發

一.概述

相信用過path app的人都會被其精美的效果給吸引到，作為一名用戶，我首先被其吸引都的就是其時間軸下拉刷新后類似于ios的果凍效果。同時作為一名coder，我們更應該好奇它是怎么實現的。于是乎，在百度的指引下，并沒有什么斬獲，既然如此，那就由我們自己擼出來吧！

下面看看我們自己擼出來的效果和path原裝效果的區別吧。（注意重點在小球的果凍效果哦O(∩_∩)O）

這里寫圖片描述

效果還是挺不錯的。下面就開始擼代碼之旅了~

二.分析

小球是會動來動去的，所以我們肯定不會笨到直接畫個圓來代替~那我們應該怎么辦呢？這時候就需要三次貝塞爾曲線來畫圓啦。

畫圓的學習我這里就不陳述了。大家可以看看這個大神寫的

http://www.jianshu.com/p/791d3a791ec2很有幫助！

現在接著往下走（我當你已經學會畫圓的技巧了`( ∩_∩ )′）
OK,假設我們已經有個一個圓
↓↓↓

這里寫圖片描述

參考path的下拉時效果：

下拉時，如果下拉距離低于某個值則松手會直接復位到正常狀態

（下拉過程中豎線上面的寬度變小，下面不變，小球在一定下拉范圍內寬度變小）

若下拉距離大于某個值，則小球（圓）向下移動到某一個位置A
小球移動到位置A后若繼續下拉，則小球與豎線同時向下移動且之間距離不變
下拉過程中豎線上面的寬度變小，下面不變

→按照這個思路。說說我們的解決辦法吧。
下拉時我們的p1、p1.left、p1.right相關坐標改變 ---->造成小球被拉伸效果
p2、p2.left、p2.right、p4.left、p4.right相關坐標改變 ---->造成小球寬度變小，利用簡諧振動函數造成小球回彈效果。
要保持小球與豎線同時向下移動且之間距離不變則利用layout來改變即可

參考path的復位時效果：

小球復位
復位后小球實現回彈抖動的效果

其實有了之前下拉的分析，復位也幾乎類似，唯一需要注意的是，小球移動到位置A后若繼續下拉，則復位的位置不是0而是（-移動到A位置后繼續下拉的距離），這點需要好好注意下。

整個邏輯的過程如下。

這里寫圖片描述

三.實現

這里我用的下拉回彈是在網上找到的一個pullscrollview，我做了些小修改（不過不可否認的是這個pullscrollview是有小bug的，這里為了演示就將就了，大家可以換成自己喜歡的下拉刷新庫）

簡要說下pullscrollview大致思路：
主要方法是doActionMove(MotionEvent event)

代碼中都有注釋，很好理解，不再解釋，大家自己下載代碼看即可。這里說明下，在pullscrollview中我定義了三個接

正是這三個接口傳遞出的 y 讓jellyball能根據滑動的距離做出相應的操作，實現jellyball與任一下拉刷新庫的解耦。

-----------------------------------此處是分割線-------------------------------------------

下面就是今天的主角----jellyball 了！

首先是一大堆的變量

這里寫圖片描述

然后進行基本初始化得到變量需要的數據

這里寫圖片描述

下面我們主要來看看setPullHeight、setUpHeight這兩個函數
圖片中的代碼都有注釋了，這里就不再描述了（個人感覺圖片的展示效果比貼代碼的效果更好看，所以代碼基本都是貼圖片的`( ∩_∩ )′）

setPullHeight方法

這里寫圖片描述

setUpHeight方法

這里寫圖片描述

ondraw繪圖方法

這里寫圖片描述

從上述代碼中可以看出連接setPullHeight、setUpHeight與ondraw方法的橋梁就是
setType方法，每次設置后都會進行invalidate();進行一次ondraw重繪操作

這里寫圖片描述

下面再來看看setType中的startRebounceAnim方法
之所以這里用了動畫，主要了想利用applyTransformation方法，該方法會自動計算setDuration中設定的時間此刻的時間流逝比，這樣就省去了我們自己去計算的麻煩（當然，你如果不喜歡這種方法，你也可以自己寫個定時器，自己計算時間流逝比）