XYTabBarAnimation

Tabbar click on animation renderings

Implementation approach

usingUITabBarControllertheUITabBarControllerDelegateTo implement the proxy method

- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController
Copy the code

The following is the concrete implementation code

- (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;
    // Stop the last animation
    if (self.currentIndex ! = index) {// Stop the animation of the previous image
        [self.currentImageView stopAnimating];
        // Empty the array of animated images from the previous image
        self.currentImageView.animationImages = nil;
    } else {
        return NO;
    }

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

    // Start animation
    [imageView startAnimating];

    // Record the picture view of the currently selected button
    self.currentImageView = imageView;
    // Record the currently selected subscript
    self.currentIndex = index;

    return YES;
}
Copy the code

• PS animation, is the use of frame animation, the design of the selected picture frame animation picture to us

• Code portal :github.com/XYXiaoYuan/…

A new approach

This animation was made a long time ago, and if I could do it now, I would definitely use itLottieAnimate now, let the designer design the Lottie file

just like this

The integration steps

Add to Podfile and executepod install

pod 'lottie-ios'.'3.1.9'
Copy the code

Here is the code for the integration

Custom tabbar main code

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

override func layoutSubviews(a) {
    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
}
Copy the code

Custom UITabBarController core code

extension TabBarViewController: UITabBarControllerDelegate {
    /// passive click
    override var selectedIndex: Int {
        didSet {
            tabAnimated(tag: selectedIndex)
        }
    }
    
    /// click click
    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()
    }
}
Copy the code

GIF effect display