- 前言
直到近期才发现QQTab上的一个动画，觉得挺有趣的，便上网找了相关的资料，想了解下这个是如何实现的。
一开始以为以为是做了一大堆的动画，旋转之类的才能够实现，后来发现其实整个的实现效果还是挺简单的。
效果.gif
- 下面的展示下代码部分：
-
首先我们肯定是需要自定义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);
}
对于Tabbar的自定义的话其实就是跟我们平常使用的差不多啦。这一块的代码也就不单独贴出来了。
-
想要实现这一个效果也是需要UI上面的支持的。
总icon展示.png
图片上面我们可以看到我们也是需要拿到里面的表情图片的。这一点也是需要我们注意的。
- 结尾
这一个的实现也是参照网上一位仁兄的swift版本而在oc上实现的。如果有想要swift版本的可以参考下：https://github.com/SherlockQi/HKTabBar_QQ
想要此Demo的可以去这：https://github.com/Hughhhhhhh/QQTabbar.git
有别的想法的同学可以私信我哦~
有更好的实现方式也欢迎提出来哦~
