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);
}
  1. 对于Tabbar的自定义的话其实就是跟我们平常使用的差不多啦。这一块的代码也就不单独贴出来了。

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


    总icon展示.png

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

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

你可能感兴趣的:(iOS QQTab动画的实现)