自己寫一個UISwitch

最近應用中需要添加用戶頭像的顯示功能,突發奇想加入了滑動頭像註銷當前用戶的功能,實現後的效果如下圖:

1、滑動前的狀態


2、滑動後的狀態


【需求】:從左向右的滑動過程中用戶信息逐漸隱藏,鬆手註銷用戶的信息逐漸顯現,當手指鬆開的位置是開關的最右端位置時彈出註銷提示,否則頭像向左回彈到初始位置。

【思路】:拿到這個需求之後,大致將問題劃分爲以下三個子問題:
1、頭像的跟蹤手指滑動。
2、用戶信息文字與鬆手註銷用戶提示文字的切換。
3、頭像的回彈動畫。

針對第一個問題想到最簡單就是用UIPanGestureRecognizer,通過獲取滑動過程中UIPanGestureRecognizer的state和頭像view的中心center.x的具體位移來判斷頭像的移動狀態,做出相應的響應。
針對第二個問題想到只要獲取到頭像當前位置距初始位置的移動位移與軌道總長度的佔比,然後根據這個值動態設置提示文字與用戶信息文字UILabel的alpha值就可以實現了。
針對第三個問題在UIPanGestureRecognizer的state爲UIGestureRecognizerStateEnded(鬆開手指狀態)的時候,判斷一下頭像的當前位置狀態,如果沒有導到最右端,添加一個由當前位置到初始位置的平移動畫就OK了。

【細節】:
setExclusiveTouch,避免滑動的時候點擊到其它按鈕造成動畫的停頓。

發佈了31 篇原創文章 · 獲贊 4 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章