先上swift版效果图 OC版本点击动画
因为是刚学习swift4,所以代码工程相对规范一点,考虑长期。有需要的朋友可以直接去github下载
swift点击动画GitHub
前言:本人刚接触swift语法,之前一直从事开发Object-C。所以对于swift还是小白一枚。demo如果能帮到大家还希望点个星星谢谢。
直接上实现代码
首先为了满足我们tabbar点击时,只有图片做放大缩小动画。那么我们需要考虑几个问题
1.找到指定点击tabbar按钮
2.寻找tabbr上边的图片
基于这些思路,我们就可以开动代码了。
首先创建tabbarController,然后创建三个vc,这里创建不做细讲,主要看实现动画代码
1.自定义tabbar继承系统UITabBar,为了我们后续动画做铺垫,这里自定义tabbar我们命名为SignTabbar
2.创建好我们的signTabbar后,通过系统KVC方式,替换掉系统原生tabbar使用我们自定义的signTabbar
let tab = SignTabbar()
setValue(tab, forKey: "tabBar")//KVC替换
3.替换成我们自定义的signTabbar之后,我们先打印一下UITabbar的视图
[<_UIBarBackground: 0x10278c530; frame = (0 0; 320 49); userInteractionEnabled = NO; layer = <CALayer: 0x10278a3f0>>,
<UITabBarButton: 0x1027aa410; frame = (2 1; 103 48); opaque = NO; layer = <CALayer: 0x1027b3b80>>,
<UITabBarButton: 0x10652b630; frame = (109 1; 102 48); opaque = NO; layer = <CALayer: 0x10652c180>>,
<UITabBarButton: 0x1027bab10; frame = (215 1; 103 48); opaque = NO; layer = <CALayer: 0x10652ddc0>>]
[<_UIBarBackground: 0x10278c530; frame = (0 0; 320 49); userInteractionEnabled = NO; layer = <CALayer: 0x10278a3f0>>,
<UITabBarButton: 0x1027aa410; frame = (2 1; 103 48); opaque = NO; layer = <CALayer: 0x1027b3b80>>,
<UITabBarButton: 0x10652b630; frame = (109 1; 102 48); opaque = NO; layer = <CALayer: 0x10652c180>>,
<UITabBarButton: 0x1027bab10; frame = (215 1; 103 48); opaque = NO; layer = <CALayer: 0x10652ddc0>>]
打印tabbar的所有视图即可出现以上打印结果
print(subviews)
4.请大家自动忽略走了两次的问题,直接看今天的主题UITabBarButton,没错我们今天搞事情的对象就是这位大大
5.找到当前的UITabBarButton,自己增加点击事件。上代码
override func layoutSubviews() {
super.layoutSubviews()
print(subviews)
for tabBarButton in subviews {
if NSStringFromClass(tabBarButton.classForCoder) == "UITabBarButton"{
let ctr = tabBarButton as! UIControl
ctr.addTarget(self,
action: #selector(self.barButtonActin(sender:)),
for: UIControlEvents.touchUpInside)
}
}
}
6.实现点击方法
@objc func barButtonActin(sender:UIControl) {
}
7.这里我们就要找到当前的UIImageView了,因为我们要给图片做动画,所以,打印UIControl的所有view,即subViews
我们看下打印的控制台输出
print(sender.subviews)
[<UITabBarSwappableImageView: 0x101adfdf0; frame = (40 13; 22 22); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x101ade900>>,
<UITabBarButtonLabel: 0x101ad8660; frame = (41 35; 20.5 12); text = '推荐'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x101ab99e0>>]
当我们点击按钮的时候,看下打印的控制台,出现了两个属性。一个UITabBarSwappableImageView,我们要做动画的视图,一个就是UITabBarButtonLabel,暂且不管
8.那么我们拿到了ImageView了,是不是再做动画,就简单多了呢,这里举例做一个放大缩小的动画
@objc func tabBarAnimationWithView(view:UIView){
let scaleAnimation = CAKeyframeAnimation()
scaleAnimation.keyPath = "transform.scale"
scaleAnimation.values = [1.0,1.3,1.5,1.25,0.8,1.25,1.0]
scaleAnimation.duration = 0.5
scaleAnimation.calculationMode = kCAAnimationCubic
scaleAnimation.repeatCount = 1
view.layer.add(scaleAnimation, forKey: "123")
}
OK,到这里动画实现就完毕了,我们来看下完整的SignTabbar代码
class SignTabbar: UITabBar {
override func layoutSubviews() {
super.layoutSubviews()
for tabBarButton in subviews {
if NSStringFromClass(tabBarButton.classForCoder) == "UITabBarButton"{
let ctr = tabBarButton as! UIControl
ctr.addTarget(self,
action: #selector(self.barButtonActin(sender:)),
for: UIControlEvents.touchUpInside)
}
}
}
@objc func barButtonActin(sender:UIControl) {
print(sender.subviews)
for imageView in sender.subviews {
if NSStringFromClass(imageView.classForCoder) == "UITabBarSwappableImageView"{
self.tabBarAnimationWithView(view: imageView)
}
}
}
@objc func tabBarAnimationWithView(view:UIView){
let scaleAnimation = CAKeyframeAnimation()
scaleAnimation.keyPath = "transform.scale"
scaleAnimation.values = [1.0,1.3,1.5,1.25,0.8,1.25,1.0]
scaleAnimation.duration = 0.5
scaleAnimation.calculationMode = kCAAnimationCubic
scaleAnimation.repeatCount = 1
view.layer.add(scaleAnimation, forKey: "123")
}
}