XYTabBarAnimation

tabbar点击动画效果图

实现思路

利用UITabBarController的UITabBarControllerDelegate,实现代理方法

- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController

下面是具体的实现代码

- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController
{
    NSInteger index = [tabBarController.childViewControllers indexOfObject:viewController];

    UIButton *tabBarBtn = tabBarController.tabBar.subviews[index+1];
    UIImageView *imageView = tabBarBtn.subviews.firstObject;
    // 切换过了,就停止上一个动画
    if (self.currentIndex != index) {
        // 把上一个图片的动画停止
        [self.currentImageView stopAnimating];
        // 把上一个图片的动画图片数组置为空
        self.currentImageView.animationImages = nil;
    } else {
        return NO;
    }

    imageView.animationImages = self.allImages[index];
    imageView.animationRepeatCount = 1;
    imageView.animationDuration = ImageCount * 0.025;

    // 开始动画
    [imageView startAnimating];

    // 记录当前选中的按钮的图片视图
    self.currentImageView = imageView;
    // 记录当前选中的下标
    self.currentIndex = index;

    return YES;
}

• PS 动画的实现,是利用的帧动画,设计对选中的图片做好帧动画图片给到我们

• 代码传送门:github.com/XYXiaoYuan/…

新做法

这种动画是好久以前做的,现在如果让我做,我肯定是用Lottie动画了,让设计师设计好Lottie文件

just like this

集成步骤

在Podfile里添加,并执行pod install

pod 'lottie-ios', '3.1.9'

下面是集成的代码

自定义tabbar主要代码

public var animationViews: [AnimationView] = []
public var animationFileNames: [String] = ["home_store","class","","cart","mine_store"]

override func layoutSubviews() {
    super.layoutSubviews()

    guard let count = items?.count else { return }

    let btnW: CGFloat = frame.size.width / (CGFloat(count) + 1)
    let btnH: CGFloat = tabbarHeight
    let btnY: CGFloat = 0

    for item in animationViews {
        item.removeFromSuperview()
    }
    animationViews.removeAll()
    var index = 0
    for subview in subviews {
        if let tabbarButton: AnyClass = NSClassFromString("UITabBarButton"), subview.isKind(of: tabbarButton) {
            if index ==  count / 2 {
                index += 1
            }

            let btnX: CGFloat = CGFloat(index) * btnW
            subview.frame = CGRect(x: btnX, y: btnY, width: btnW, height: btnH)

            let animation = Animation.named(animationFileNames[index], subdirectory: "LottieAnimation")
            let animationView = AnimationView()
            animationView.animation = animation
            animationView.frame = CGRect(x: btnW/2 - 12, y: 9, width: 24, height: 24)
            animationView.contentMode = .scaleAspectFit
            subview.addSubview(animationView)
            animationViews.append(animationView)
            animationView.isUserInteractionEnabled = false

            subview.bringSubviewToFront(animationView)

            index += 1
        }
    }

    animationViews[oldTag].play(fromProgress: 0.5, toProgress: 1, loopMode: .playOnce) { (_) in }

    var tempMiddleViewP = middleView.center
    tempMiddleViewP.x = frame.size.width * 0.5
    middleView.center = tempMiddleViewP

    var tempMiddleViewF = middleView.frame
    tempMiddleViewF.origin.y = tabbarHeight - middleView.frame.size.height
    middleView.frame = tempMiddleViewF
}

自定义 UITabBarController核心代码

extension TabBarViewController: UITabBarControllerDelegate {
    /// 被动点击
    override var selectedIndex: Int {
        didSet {
            tabAnimated(tag: selectedIndex)
        }
    }
    
    /// 点击点击
    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        
        let tag = tabBarController.selectedIndex
        tabAnimated(tag: tag)
    }
    
    private func tabAnimated(tag: Int) {
        guard oldTag != tag else { return }
        oldTag = tag
        
        let bar: TabBar = self.tabBar as! TabBar
        bar.oldTag = tag
        for item in bar.animationViews {
            item.stop()
        }
        let animationView = bar.animationViews[tag]
        animationView.play()
    }
}

gif效果展示