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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容