QQ（iOS）客户端的粘性动画效果

qq的app中要是有新的联系人发消息过来，相应联系人的cell右边会有一个红色的圆圈表示消息条数。如果去触碰那个圆圈，可以发现它竟然会跟着手指的移动而移动。

在一定范围内，手指离开屏幕，会发现红色圆圈会自动弹性的回到原来的位置。而如果超出一定距离，这个圆圈会做一个销毁的动画，从而从view上移除掉。

产品要求公司的App也要有效果，并花了些时间去学习它的实现过程，发现其实原理还是比较简单的。

（由于mac制作gif图片实在过于麻烦，所以效果只能是看看图片。）

Demo的github地址：https://github.com/wzpziyi1/QQ-Goo

经过分析，可以发现，是两个圆和一个不规则矩形位置、大小的变化。一开始，小的圆圈和大的圆圈的center是相同的，当移动大圆的时候，小圆的半径随着大圆离小圆的距离变远而变小，当大圆距离小圆一定距离时，将小圆隐藏掉，中间的不规则矩形remove掉。

那么，不规则矩形怎么表示呢？可以利用Core Graphics在drawRect方法里面绘制不规则矩形的path，然后利用颜色fill就行。不规则矩形是随着大圆的移动而不断变化的，如果在drawRect方法里面绘制，那么在移动过程中不断调用setNeedsDisplay方法进行重绘。这是种可行的方案，我所用的也大致是这种思路。

有了这些点的坐标，那么就可以用UIBezierPath来绘制相应的路径，代码如下：

- (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 distanceWithPointA:bigCenter pointB:smallCenter];            //Θ:(xita)      CGFloat sinθ = (x2 - x1) / d;            CGFloat cosθ = (y2 - y1) / d;            // 坐标系基于父控件      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;  }

在实现过程中，我是自定义UIButton的，需要注意的是，在监听button的拖动时，最好是给它添加UIPanGestureRecognizer手势，而不要在touchesBegin方法里面去判断它的移动位置，因为Touches系列方法会屏蔽button的点击。

自定义的这个button默认就是大圆，包含一个小圆(UIView)属性，但是这个小圆并不是添加在自定义的这个button（也就是大圆）里面，而是在button的superView上。因为小圆并不需要随着大圆位置的改变而改变位置，相应的，shapeLayer也是添加在button（大圆）的父控件上。

给大圆添加了pan手势，在pan:方法里面随之改变小圆的大小和绘制shapeLayer的path。

当pan手势状态为End的时候，需要判断大圆与小圆的距离有没有超出最大距离，如果超过，那么添加一个gif图片，播放销毁大圆的过程。如果没有被销毁，那么大圆需要复位，相应代码：

#import "ZYGooView.h"    #define kMaxDistance 100    @interface ZYGooView ()  @property (nonatomic, weak) UIView *smallCircleView;    @property (nonatomic, assign) CGFloat smallCircleR;    @property (nonatomic, weak) CAShapeLayer *shapeLayer;  @end    @implementation ZYGooView    - (instancetype)initWithFrame:(CGRect)frame  {      if (self = [super initWithFrame:frame]) {          [self commitInit];                }      return self;  }    - (void)awakeFromNib  {      [self commitInit];  }    - (void)commitInit  {      self.layer.cornerRadius = self.frame.size.width * 0.5;      self.layer.masksToBounds = YES;            self.smallCircleR = self.frame.size.width * 0.5;      self.smallCircleView.bounds = self.bounds;      self.smallCircleView.center = self.center;      self.smallCircleView.layer.cornerRadius = self.smallCircleView.frame.size.width * 0.5;            [self addGesture];  }    #pragma mark ----懒加载方法    - (UIView *)smallCircleView  {      if (_smallCircleView == nil) {          UIView *view = [[UIView alloc] init];                    view.backgroundColor = self.backgroundColor;                    [self.superview addSubview:view];                    [self.superview insertSubview:view atIndex:0];                    _smallCircleView = view;                }      return _smallCircleView;  }    - (CAShapeLayer *)shapeLayer  {      if (_shapeLayer == nil) {          CAShapeLayer *shapeLayer = [CAShapeLayer layer];          shapeLayer.path = [self pathWithBigCircleView:self smallCircleView:self.smallCircleView].CGPath;          shapeLayer.fillColor = self.backgroundColor.CGColor;                    [self.superview.layer addSublayer:shapeLayer];                    [self.superview.layer insertSublayer:shapeLayer atIndex:0];                    _shapeLayer = shapeLayer;      }      return _shapeLayer;  }    #pragma mark ----其他方法    - (void)addGesture  {      UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];      [self addGestureRecognizer:recognizer];  }        - (void)pan:(UIPanGestureRecognizer *)recognizer  {      CGPoint point = [recognizer translationInView:self.superview];            CGPoint center = self.center;      center.x += point.x;      center.y += point.y;      self.center = center;      //复位      [recognizer setTranslation:CGPointZero inView:self];            CGFloat distance = [self distanceWithPointA:self.smallCircleView.center pointB:self.center];            if (distance == 0) return;            CGFloat newR = self.smallCircleR - distance / 15.0;      NSLog(@"%f", newR);      self.smallCircleView.bounds = CGRectMake(0, 0, newR * 2, newR * 2);      self.smallCircleView.layer.cornerRadius = newR;            if (distance > kMaxDistance || newR <= 0) {          self.smallCircleView.hidden = YES;          [self.shapeLayer removeFromSuperlayer];          self.shapeLayer = nil;      }            if (distance <= kMaxDistance && self.smallCircleView.hidden == NO) {          self.shapeLayer.path = [self pathWithBigCircleView:self smallCircleView:self.smallCircleView].CGPath;      }            if (recognizer.state == UIGestureRecognizerStateEnded) {          if (distance <= kMaxDistance) {                            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.03 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{                  [self.shapeLayer removeFromSuperlayer];                  self.shapeLayer = nil;              });                            [UIView animateWithDuration:0.4 delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{                  self.center = self.smallCircleView.center;                                } completion:^(BOOL finished) {                  self.smallCircleView.hidden = NO;              }];          }          else {              UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.bounds];              [self addSubview:imageView];                            NSMutableArray *images = [NSMutableArray array];                            for (int i = 1; i <= 8; i++) {                  NSString *imageName = [NSString stringWithFormat:@"%d", i];                  UIImage *image = [UIImage imageNamed:imageName];                  [images addObject:image];              }                            imageView.animationImages = images;              imageView.animationDuration = 0.6;              imageView.animationRepeatCount = 1;              [imageView startAnimating];                            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{                  [self removeFromSuperview];              });          }      }  }    - (CGFloat)distanceWithPointA:(CGPoint)pointA pointB:(CGPoint)pointB  {      CGFloat dx = pointB.x - pointA.x;      CGFloat dy = pointB.y - pointA.y;            return sqrt(dx * dx + dy * dy);  }    - (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 distanceWithPointA:bigCenter pointB:smallCenter];            //Θ:(xita)      CGFloat sinθ = (x2 - x1) / d;            CGFloat cosθ = (y2 - y1) / d;            // 坐标系基于父控件      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;  }    @end

Demo的github地址：https://github.com/wzpziyi1/QQ-Goo

</div>