如何实现Android底部导航栏指定GIF动画？iOS端也需适配

首先明确这个动画属于底部导航栏的选中弹跳动画，核心效果是：选中项图标放大+轻微上移，未选中项恢复原状态，切换过程带有平滑过渡。以下是Android和iOS的具体实现方案：

Android 实现方式 #

通过自定义BottomNavigationView的选中监听，结合ViewPropertyAnimator实现动画：

// 绑定底部导航栏
val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav)

bottomNav.setOnItemSelectedListener { item ->
    val targetView = item.actionView ?: item.icon
    // 选中项动画：1.2倍缩放+上移8dp
    targetView.animate()
        .scaleX(1.2f)
        .scaleY(1.2f)
        .translationY(-8f)
        .setDuration(200)
        .start()
    
    // 重置其他未选中项的状态
    bottomNav.menu.forEach { menuItem ->
        if (menuItem != item) {
            val view = menuItem.actionView ?: menuItem.icon
            view.animate()
                .scaleX(1f)
                .scaleY(1f)
                .translationY(0f)
                .setDuration(200)
                .start()
        }
    }
    true
}

如果需要更通用的封装，可以自定义BottomNavigationItemView，把动画逻辑内置进去，避免重复代码。

iOS 实现方式 #

通过自定义UITabBarItem和UITabBarController来实现动画，支持基础平滑过渡或弹簧弹跳效果：

1. 自定义TabBarItem（带自定义图标视图） #

class CustomTabBarItem: UITabBarItem {
    var customIconView: UIImageView!
    
    override init() {
        super.init()
        setupCustomIcon()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupCustomIcon()
    }
    
    private func setupCustomIcon() {
        customIconView = UIImageView(image: image)
        customIconView.contentMode = .scaleAspectFit
        customIconView.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
        // 后续需要将此视图添加到自定义UITabBar中
    }
}

2. 在TabBarController中实现切换动画 #

class CustomTabBarController: UITabBarController {
    override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
        guard let selectedItem = item as? CustomTabBarItem else { return }
        
        // 基础平滑动画
        UIView.animate(withDuration: 0.2) {
            selectedItem.customIconView.transform = CGAffineTransform(scaleX: 1.2, y: 1.2).translatedBy(x: 0, y: -8)
        }
        
        // 重置其他未选中项
        for barItem in tabBar.items ?? [] {
            if let otherItem = barItem as? CustomTabBarItem, otherItem != selectedItem {
                UIView.animate(withDuration: 0.2) {
                    otherItem.customIconView.transform = .identity
                }
            }
        }
        
        // 可选：替换为弹簧弹跳动画，效果更贴合示例
        let springAnim = CASpringAnimation(keyPath: "transform")
        springAnim.fromValue = NSValue(caTransform3D: CATransform3DIdentity)
        springAnim.toValue = NSValue(caTransform3D: CATransform3DScale(CATransform3DMakeTranslation(0, -8, 0), 1.2, 1.2, 1))
        springAnim.duration = springAnim.settlingDuration
        springAnim.damping = 8
        selectedItem.customIconView.layer.add(springAnim, forKey: "bounceAnim")
    }
}

内容的提问来源于stack exchange，提问作者Vishal Sojitra