示例图
各子控件层级结构分析图
实现思路:
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;
- 没有超过,就还原。