- 前言
直到近期才發(fā)現(xiàn)QQTab上的一個動畫，覺得挺有趣的，便上網(wǎng)找了相關(guān)的資料，想了解下這個是如何實現(xiàn)的。
一開始以為以為是做了一大堆的動畫，旋轉(zhuǎn)之類的才能夠?qū)崿F(xiàn)，后來發(fā)現(xiàn)其實整個的實現(xiàn)效果還是挺簡單的。
效果.gif
- 下面的展示下代碼部分：
-
首先我們肯定是需要自定義Tabbar以及一個特殊的Button，才能夠?qū)崿F(xiàn)我們自定義的動畫效果。
結(jié)構(gòu).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的自定義的話其實就是跟我們平常使用的差不多啦。這一塊的代碼也就不單獨貼出來了。
-
想要實現(xiàn)這一個效果也是需要UI上面的支持的。
總icon展示.png
圖片上面我們可以看到我們也是需要拿到里面的表情圖片的。這一點也是需要我們注意的。
- 結(jié)尾
這一個的實現(xiàn)也是參照網(wǎng)上一位仁兄的swift版本而在oc上實現(xiàn)的。如果有想要swift版本的可以參考下：https://github.com/SherlockQi/HKTabBar_QQ
想要此Demo的可以去這：https://github.com/Hughhhhhhh/QQTabbar.git
有別的想法的同學(xué)可以私信我哦~
有更好的實現(xiàn)方式也歡迎提出來哦~
