QQ粘性效果
實(shí)現(xiàn)思路:
1.自定義大圓控件(UIButton)可以顯示背景圖片心褐,和文字
2.讓大圓控件隨著手指移動(dòng)而移動(dòng)
- 注意不能根據(jù)形變修改大圓的位置形真,只能通過center,因?yàn)槿潭夹枰玫街行狞c(diǎn)計(jì)算。
3.在拖動(dòng)的時(shí)候,添加一個(gè)小圓控件在原來大圓控件的位置
- 注意這個(gè)小圓控件并不會(huì)隨著手指移動(dòng)而移動(dòng)舰讹,因此應(yīng)該添加到父控件上
- 一開始設(shè)置中心點(diǎn)和尺寸和大圓控件一樣。
- 隨著大圓拖動(dòng)围来,小圓半徑不斷減少跺涤,可以根據(jù)兩個(gè)圓心的距離匈睁,隨便生成一段比例监透,隨著圓心距離增加,圓心半徑不斷減少航唆。
// 計(jì)算小圓半徑:隨機(jī)搞個(gè)比例胀蛮,隨著圓心距離增加,圓心半徑不斷減少糯钙。
CGFloat smallRadius = _circleR2 - d / 10;
- 每次小圓改變粪狼,需要重新設(shè)置小圓的尺寸和圓角半徑。
4.粘性效果
- 就是在兩圓之間繪制一個(gè)形變矩形任岸,描述形變矩形路徑再榄。
這里大致介紹下計(jì)算思路,不需要太糾結(jié)
- 這里需要用到CAShapeLayer,可以根據(jù)一個(gè)路徑享潜,生成一個(gè)圖層困鸥,展示出來。把形變圖層添加到父控件并且顯示在小圓圖層下就OK了。因?yàn)樗杏?jì)算出來的點(diǎn)疾就,都是基于父控件澜术。
注意:這里不能用繪圖,因?yàn)槔L圖內(nèi)容只要超過當(dāng)前控件尺寸就不會(huì)顯示猬腰,但是當(dāng)前形變矩形必須顯示在控件之外
5.粘性業(yè)務(wù)邏輯處理
當(dāng)圓心距離超過100鸟废,就不需要描述形變矩形(并且把之前的形變矩形移除父層),小圓也需要隱藏姑荷。
沒有超過100盒延,則相反。
6.手指停止拖動(dòng)業(yè)務(wù)邏輯
- 判斷下圓心是否超過100鼠冕,超過就播放爆炸效果兰英,添加個(gè)UIImageView在當(dāng)前控件上,并且需要取消控制器view的自動(dòng)布局供鸠。
// 取消Autoresizing轉(zhuǎn)自動(dòng)布局
self.view.translatesAutoresizingMaskIntoConstraints = NO;
- 沒有超過畦贸,就還原。