swift - tabbar点击动画

先上swift版效果图 OC版本点击动画

tabbatAnimation.gif

因为是刚学习swift4,所以代码工程相对规范一点,考虑长期。有需要的朋友可以直接去github下载

swift点击动画GitHub

前言:本人刚接触swift语法,之前一直从事开发Object-C。所以对于swift还是小白一枚。demo如果能帮到大家还希望点个星星谢谢。
直接上实现代码
首先为了满足我们tabbar点击时,只有图片做放大缩小动画。那么我们需要考虑几个问题
1.找到指定点击tabbar按钮
2.寻找tabbr上边的图片
基于这些思路,我们就可以开动代码了。

首先创建tabbarController,然后创建三个vc,这里创建不做细讲,主要看实现动画代码

1.自定义tabbar继承系统UITabBar,为了我们后续动画做铺垫,这里自定义tabbar我们命名为SignTabbar

image.png

2.创建好我们的signTabbar后,通过系统KVC方式,替换掉系统原生tabbar使用我们自定义的signTabbar

image.png

        let tab = SignTabbar()

        setValue(tab, forKey: "tabBar")//KVC替换
3.替换成我们自定义的signTabbar之后,我们先打印一下UITabbar的视图

image.png

[<_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,自己增加点击事件。上代码

image.png

    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)

image.png


[<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了,是不是再做动画,就简单多了呢,这里举例做一个放大缩小的动画

image.png

    @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代码

image.png

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")
    }
}

小结:可以看出,swift代码相对于OC还是比较简洁的,感觉到swift4了都。属于swift的时代已经到来了。希望和大家一起学习一起进步

swift点击动画GitHub

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值