iOS QQTab动画的实现

• 前言
  直到近期才发现QQTab上的一个动画，觉得挺有趣的，便上网找了相关的资料，想了解下这个是如何实现的。
  一开始以为以为是做了一大堆的动画，旋转之类的才能够实现，后来发现其实整个的实现效果还是挺简单的。

效果.gif

• 下面的展示下代码部分：

1. 首先我们肯定是需要自定义Tabbar以及一个特殊的Button，才能够实现我们自定义的动画效果。

   
   结构.png

\\整个button的核心代码
- (void)panGesture:(UIPanGestureRecognizer *)pan {
    CGPoint point = [pan locationInView:self];
    point = CGPointMake(point.x - self.bounds.size.width *0.5, point.y - self.bounds.size.height *0.5);
    if (pan.state == UIGestureRecognizerStateBegan || pan.state == UIGestureRecognizerStateChanged) {
        CGFloat x = point.x;
        CGFloat y = point.y;
        
        //求平方根
        double R = sqrt(pow(x, 2) + pow(y, 2));
        CGFloat scale = R /self.distance;
        self.dragButton_x = x / scale;
        self.dragButton_y = y / scale;
    } else {
        self.dragButton_y = 0;
        self.dragButton_x = 0;
        [UIView animateWithDuration:0.3 animations:^{
            self.imageView_big.frame = CGRectMake(0, 0, self.itemW, self.itemH - 15.0);
            self.imageView_mini.frame = CGRectMake(0, 0, self.itemW, self.itemH - 15.0);
        }];
        return;
    }
    [self dragIcon];
}

- (void)dragIcon{
    CGFloat x = (self.bounds.size.width - self.imageView_big.bounds.size.width) * 0.5 + self.dragButton_x;
    CGFloat y = (self.bounds.size.height - self.imageView_big.bounds.size.height) * 0.5 + self.dragButton_y;
    self.imageView_big.frame = CGRectMake(x, y, self.imageView_big.bounds.size.width, self.imageView_big.bounds.size.height);
    self.imageView_mini.frame = CGRectMake(x + self.dragButton_x * self.mini_x_Coef, y + self.dragButton_y * self.mini_y_Coef, self.imageView_big.bounds.size.width, self.imageView_big.bounds.size.height);
}

2. 对于Tabbar的自定义的话其实就是跟我们平常使用的差不多啦。这一块的代码也就不单独贴出来了。

3. 想要实现这一个效果也是需要UI上面的支持的。

   
   总icon展示.png
   

   图片上面我们可以看到我们也是需要拿到里面的表情图片的。这一点也是需要我们注意的。

• 结尾
  这一个的实现也是参照网上一位仁兄的swift版本而在oc上实现的。如果有想要swift版本的可以参考下：https://github.com/SherlockQi/HKTabBar_QQ
  想要此Demo的可以去这：https://github.com/Hughhhhhhh/QQTabbar.git
  有别的想法的同学可以私信我哦~
  有更好的实现方式也欢迎提出来哦~