1.坐標(biāo)點和控制點的計算
粘性計算圖.png
2.新建GooView,繼承自UIButton。
#import "GooView.h"
@interface GooView ()
@property (nonatomic, weak) UIView *smallCircleView;
@property (nonatomic, assign) CGFloat oriSmallRadius;
@property (nonatomic, weak) CAShapeLayer *shapeLayer;
@end
@implementation GooView
- (CAShapeLayer *)shapeLayer
{
if (_shapeLayer == nil) {
// 展示不規(guī)則矩形，通過不規(guī)則矩形路徑生成一個圖層
CAShapeLayer *layer = [CAShapeLayer layer];
_shapeLayer = layer;
layer.fillColor = self.backgroundColor.CGColor;
[self.superview.layer insertSublayer:layer below:self.layer];
}
return _shapeLayer;
}
- (UIView *)smallCircleView
{
if (_smallCircleView == nil) {
UIView *view = [[UIView alloc] init];
view.backgroundColor = self.backgroundColor;
_smallCircleView = view;
// 小圓添加按鈕的父控件上
[self.superview insertSubview:view belowSubview:self];
}
return _smallCircleView;
}
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
[self setUp];
}
return self;
}
- (void)awakeFromNib
{
[self setUp];
}
#pragma mark - 初始化
- (void)setUp
{
CGFloat w = self.bounds.size.width;
// 記錄小圓最初始半徑
_oriSmallRadius = w / 2;
self.layer.cornerRadius = w / 2;
[self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
self.titleLabel.font = [UIFont systemFontOfSize:12];
// 添加手勢
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self addGestureRecognizer:pan];
// 設(shè)置小圓位置和尺寸
self.smallCircleView.center = self.center;
self.smallCircleView.bounds = self.bounds;
self.smallCircleView.layer.cornerRadius = w / 2;
}
// 最大圓心距離
#define kMaxDistance 80
- (void)pan:(UIPanGestureRecognizer *)pan
{
#warning 移動控件位置
// 獲取手指偏移量
CGPoint transP = [pan translationInView:self];
// 修改center
CGPoint center = self.center;
center.x += transP.x;
center.y += transP.y;
self.center = center;
// 復(fù)位
[pan setTranslation:CGPointZero inView:self];
#warning 設(shè)置小圓半徑
// 顯示后面圓，后面圓的半徑，隨著兩個圓心的距離不斷增加而減小。
// 計算圓心距離
CGFloat d = [self circleCenterDistanceWithBigCircleCenter:self.center smallCircleCenter:self.smallCircleView.center];
// 計算小圓的半徑
CGFloat smallRadius = _oriSmallRadius - d / 10;
// 設(shè)置小圓的尺寸
self.smallCircleView.bounds = CGRectMake(0, 0, smallRadius * 2, smallRadius * 2);
self.smallCircleView.layer.cornerRadius = smallRadius;
#warning 描述不規(guī)則矩形
// // 繪制不規(guī)則矩形，不能通過繪圖，因為繪圖只能在當(dāng)前控件上畫，超出部分不會顯示。
//
// // 兩圓產(chǎn)生距離才需要繪制
// if (d) {
//
//
// }
// 當(dāng)圓心距離大于最大圓心距離
if (d > kMaxDistance) { // 可以拖出來
// 隱藏小圓
self.smallCircleView.hidden = YES;
// 移除不規(guī)則的矩形
[self.shapeLayer removeFromSuperlayer];
self.shapeLayer = nil;
}else if(d > 0 && self.smallCircleView.hidden == NO){ // 有圓心距離，并且圓心距離不大，才需要展示
// 展示不規(guī)則矩形，通過不規(guī)則矩形路徑生成一個圖層
self.shapeLayer.path = [self pathWithBigCirCleView:self smallCirCleView:self.smallCircleView].CGPath;
}
#warning 手指抬起的時候，還原
if (pan.state == UIGestureRecognizerStateEnded) {
// 當(dāng)圓心距離大于最大圓心距離
if (d > kMaxDistance) {
// 展示gif動畫
UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.bounds];
NSMutableArray *arrM = [NSMutableArray array];
for (int i = 1; i < 9; i++) {
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",i]];
[arrM addObject:image];
}
imageView.animationImages = arrM;
imageView.animationRepeatCount = 1;
imageView.animationDuration = 0.5;
[imageView startAnimating];
[self addSubview:imageView];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self removeFromSuperview];
});
}else{
// 移除不規(guī)則矩形
[self.shapeLayer removeFromSuperlayer];
self.shapeLayer = nil;
// 還原位置
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
// 設(shè)置大圓中心點位置
self.center = self.smallCircleView.center;
} completion:^(BOOL finished) {
// 顯示小圓
self.smallCircleView.hidden = NO;
}];
}
}
}
// 計算兩個圓心之間的距離
- (CGFloat)circleCenterDistanceWithBigCircleCenter:(CGPoint)bigCircleCenter smallCircleCenter:(CGPoint)smallCircleCenter
{
CGFloat offsetX = bigCircleCenter.x - smallCircleCenter.x;
CGFloat offsetY = bigCircleCenter.y - smallCircleCenter.y;
return sqrt(offsetX * offsetX + offsetY * offsetY);
}
// 描述兩圓之間一條矩形路徑
- (UIBezierPath *)pathWithBigCirCleView:(UIView *)bigCirCleView smallCirCleView:(UIView *)smallCirCleView
{
CGPoint bigCenter = bigCirCleView.center;
CGFloat x2 = bigCenter.x;
CGFloat y2 = bigCenter.y;
CGFloat r2 = bigCirCleView.bounds.size.width / 2;
CGPoint smallCenter = smallCirCleView.center;
CGFloat x1 = smallCenter.x;
CGFloat y1 = smallCenter.y;
CGFloat r1 = smallCirCleView.bounds.size.width / 2;
// 獲取圓心距離
CGFloat d = [self circleCenterDistanceWithBigCircleCenter:bigCenter smallCircleCenter:smallCenter];
CGFloat sinθ = (x2 - x1) / d;
CGFloat cosθ = (y2 - y1) / d;
// 坐標(biāo)系基于父控件
CGPoint pointA = CGPointMake(x1 - r1 * cosθ , y1 + r1 * sinθ);
CGPoint pointB = CGPointMake(x1 + r1 * cosθ , y1 - r1 * sinθ);
CGPoint pointC = CGPointMake(x2 + r2 * cosθ , y2 - r2 * sinθ);
CGPoint pointD = CGPointMake(x2 - r2 * cosθ , y2 + r2 * sinθ);
CGPoint pointO = CGPointMake(pointA.x + d / 2 * sinθ , pointA.y + d / 2 * cosθ);
CGPoint pointP = CGPointMake(pointB.x + d / 2 * sinθ , pointB.y + d / 2 * cosθ);
UIBezierPath *path = [UIBezierPath bezierPath];
// A
[path moveToPoint:pointA];
// AB
[path addLineToPoint:pointB];
// 繪制BC曲線
[path addQuadCurveToPoint:pointC controlPoint:pointP];
// CD
[path addLineToPoint:pointD];
// 繪制DA曲線
[path addQuadCurveToPoint:pointA controlPoint:pointO];
return path;
}
