如何在ViewPager2滑动/切换页面时实现标题动画效果？

针对你遇到的滑动/点击Tab指示器切换页面时，TextView动画异常的问题，这里提供一套统一且顺滑的实现方案：

核心思路 #

1. 滑动场景：利用onPageScrolled的偏移量实时调整TextView透明度，实现跟随滑动的渐变效果
2. 点击Tab场景：通过动画序列先执行淡出，完成后更新文本再执行淡入，避免文本先变再动画的顺序问题

完整代码实现 #

1. 提前初始化动画（避免重复创建） #

在Activity/Fragment的初始化阶段（如onCreate）定义动画：

// 淡出动画：300ms从完全显示到透明
val fadeOut = AlphaAnimation(1.0f, 0.0f).apply {
    duration = 300
    fillAfter = true // 动画结束后保持透明状态
}

// 淡入动画：300ms从透明到完全显示
val fadeIn = AlphaAnimation(0.0f, 1.0f).apply {
    duration = 300
    fillAfter = true
}

2. 修改ViewPager2页面切换回调 #

binding.viewpager.adapter = MyAdapter(this)
TabLayoutMediator(binding.intoTabLayout, binding.viewpager) { _, _ -> }.attach()

// 记录当前页面位置，避免重复切换同一页面触发动画
var currentPagePosition = 0

binding.viewpager.registerOnPageChangeCallback(object : OnPageChangeCallback() {
    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
        // 滑动过程中实时调整透明度，实现顺滑的渐变过渡
        binding.myTextView.alpha = 1.0f - positionOffset
        super.onPageScrolled(position, positionOffset, positionOffsetPixels)
    }

    override fun onPageSelected(position: Int) {
        // 同一页面切换不执行动画
        if (position == currentPagePosition) return

        // 先执行淡出动画，动画结束后更新文本并执行淡入
        fadeOut.setAnimationListener(object : Animation.AnimationListener {
            override fun onAnimationStart(animation: Animation?) {}

            override fun onAnimationEnd(animation: Animation?) {
                // 更新文本
                binding.myTextView.text = when(position) {
                    0 -> "First page"
                    1 -> "Second page"
                    // 更多页面可继续扩展
                    else -> ""
                }
                // 执行淡入动画
                binding.myTextView.startAnimation(fadeIn)
            }

            override fun onAnimationRepeat(animation: Animation?) {}
        })

        binding.myTextView.startAnimation(fadeOut)
        currentPagePosition = position
        super.onPageSelected(position)
    }
})

方案说明 #

• 滑动场景优化：onPageScrolled中通过positionOffset动态调整alpha，让标题跟随滑动过程实时渐变，比单独的淡入淡出动画更自然
• 点击Tab场景修复：点击指示器时直接触发onPageSelected，通过动画监听器确保淡出完成后再更新文本，解决了之前文本先变更再动画的顺序问题
• 性能优化：提前初始化动画对象，避免每次切换页面都创建新的动画实例

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