QQ粘性效果
實現思路:
1.自定義大圓控件(UIButton)可以顯示背景圖片,和文字
2.讓大圓控件隨著手指移動而移動
- 注意不能根據形變修改大圓的位置,只能通過center,因為全程都需要用到中心點計算。
3.在拖動的時候,添加一個小圓控件在原來大圓控件的位置
- 注意這個小圓控件并不會隨著手指移動而移動,因此應該添加到父控件上
- 一開始設置中心點和尺寸和大圓控件一樣。
- 隨著大圓拖動,小圓半徑不斷減少,可以根據兩個圓心的距離,隨便生成一段比例,隨著圓心距離增加,圓心半徑不斷減少。
// 計算小圓半徑:隨機搞個比例,隨著圓心距離增加,圓心半徑不斷減少。
CGFloat smallRadius = _circleR2 - d / 10;
- 每次小圓改變,需要重新設置小圓的尺寸和圓角半徑。
4.粘性效果
- 就是在兩圓之間繪制一個形變矩形,描述形變矩形路徑。
這里大致介紹下計算思路,不需要太糾結
- 這里需要用到CAShapeLayer,可以根據一個路徑,生成一個圖層,展示出來。把形變圖層添加到父控件并且顯示在小圓圖層下就OK了。因為所有計算出來的點,都是基于父控件。
注意:這里不能用繪圖,因為繪圖內容只要超過當前控件尺寸就不會顯示,但是當前形變矩形必須顯示在控件之外
5.粘性業務邏輯處理
當圓心距離超過100,就不需要描述形變矩形(并且把之前的形變矩形移除父層),小圓也需要隱藏。
沒有超過100,則相反。
6.手指停止拖動業務邏輯
- 判斷下圓心是否超過100,超過就播放爆炸效果,添加個UIImageView在當前控件上,并且需要取消控制器view的自動布局。
// 取消Autoresizing轉自動布局
self.view.translatesAutoresizingMaskIntoConstraints = NO;
- 沒有超過,就還原。