话不多说,效果如下:
HKTabBar_QQ.gif
全部代码已上传至 ---Github--- 欢迎 Star.
使用
class HKTabBarViewController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
...
viewControllers = [vc0, vc1, vc2]
/**
* imageName 图片名称
* title 文字
* distance 最大的偏移距离
* mini_x_Coef 小图x偏移系数
* mini_y_Coef 小图y偏移系数
*/
let item = HKTabBarModel(imageName: "recent", title: "消息", distance: 10, mini_x_Coef: 0.2, mini_y_Coef: 0.4)
let item1 = HKTabBarModel(imageName: "buddy", title: "联系人")
let item2 = HKTabBarModel(imageName: "qworld", title: "动态", distance: 10, mini_x_Coef: -0.2, mini_y_Coef: 0.2)
// let tabbar = HKTabBar(items: [item, item1, item2])
// tabbar.hk_delegate = self
let tabbar = HKTabBar(items: [item, item1, item2]) { (btn, index) in
print(btn?.title ?? "title")
self.selectedIndex = index
}
self.setValue(tabbar, forKey: "tabBar")
}
}
//extension HKTabBarViewController: HKTabBarDelegate {
// func hk_tabBar(_ tabBar: HKTabBar, didSelect item: HKDragButton, index: Int) {
// self.selectedIndex = index
// }
//}
分析
我们分析动画效果可以猜出,QQ的TabBar 是在按钮上放置了两张图片.在拖拽时两张图片分别有着不同的偏移量.(在QQ的资源包里发现了,这样的图片,证实确实是两张图片而成).
工作
所以呢,实现这个效果有几个重点(重点不是难点 都很简单),
1.让按钮响应拖拽(pan)手势,并能根据手指的位置计算两张图片应有的偏移
代码如下
//distance 最大偏移量
// dragButton_x & dragButton_y 需要偏移的量
//
var point = pan.location(in: self)
point = CGPoint(x: point.x - bounds.size.width * 0.5, y: point.y - bounds.size.height * 0.5)
let X = point.x
let Y = point.y
let R = sqrt(pow(X , 2) + pow(Y , 2))
let scale = R / distance
self.dragButton_x = X / scale
self.dragButton_y = Y / scale
2.更改图片位置
//mini_x_Coef ,mini_y_Coef 是小图的偏移差异,为了造成"立体(诡异)"的效果
private func dragIcon() {
let x = (bounds.size.width - imageView_big.bounds.size.width) * 0.5 + dragButton_x
let y = (bounds.size.height - imageView_big.bounds.size.height) * 0.5 + dragButton_y
self.imageView_big.frame = CGRect(x: x,
y: y,
width: self.imageView_big.bounds.size.width,
height: self.imageView_big.bounds.size.height
)
self.imageView_mini.frame = CGRect(x: x + self.dragButton_x * mini_x_Coef,
y: y + self.dragButton_y * mini_y_Coef,
width: self.imageView_big.bounds.size.width,
height: self.imageView_big.bounds.size.height
)
}
3.放手归位
//让计算出的偏移量位0 即可
self.dragButton_y = 0
self.dragButton_x = 0
UIView.animate(withDuration: 0.3) {
self.imageView_big.frame = CGRect(x: 0.0 , y: 0.0, width: self.itemW, height: self.itemH - 15.0)
self.imageView_mini.frame = CGRect(x: 0.0 , y: 0.0, width: self.itemW, height: self.itemH - 15.0)
}
4.选中动画
//首先更改图片
...
//最简单的动画
UIView.animate(withDuration: 0.2, animations: {
self.imageView_big.transform = CGAffineTransform(scaleX: 0.85, y: 0.85)
self.imageView_mini.transform = CGAffineTransform(scaleX: 0.85, y: 0.85)
}) { (_) in
UIView.animate(withDuration: 0.2, animations: {
self.imageView_big.transform = CGAffineTransform(scaleX: 1, y: 1)
self.imageView_mini.transform = CGAffineTransform(scaleX: 1, y: 1)
})
}
以上便是 <实现QQ的TabBar拖拽动效> 的主要代码 Github
