如何重置MotionLayout至首个ConstraintSet及ViewPager页面重选时重启动画

1. 如何将MotionLayout重置至第一个ConstraintSet？ #

有两种实用方式，你可以根据场景需求选择：

• 瞬间重置（无过渡动画）：直接调用motionLayout.setProgress(0f)。这个方法能让MotionLayout立刻跳转到起始ConstraintSet（也就是第一个ConstraintSet），不管当前是否在运行动画，状态瞬间到位，适合需要快速、确定重置的场景。

• 平滑过渡回起始状态：调用motionLayout.transitionToStart()。这个方法会播放从当前状态到起始状态的过渡动画，但如果动画正在运行或者需要立刻重置的话，可能会出现延迟或中断问题，更适合需要平滑视觉过渡的场景。

如果要确保状态完全可控，优先推荐setProgress(0f)，它能避免动画过渡带来的不确定性。

2. ViewPager页面重选时重置MotionLayout并重新运行动画的最优方案 #

你遇到的transitionToStart()在快速回滑时无法完成的问题，本质是动画还在执行过程中就被页面切换打断，导致状态不一致。这里给你一套更可靠的优化方案：

核心优化思路 #

先强制同步重置状态，再启动动画，同时处理页面切换时的动画中断问题：

• 步骤1：用setProgress(0f)替代transitionToStart()做重置
  当页面被重选（或切换回来）时，先调用motionLayout.setProgress(0f)，瞬间将MotionLayout拉回起始状态，彻底避免动画过渡带来的延迟或中断问题。

• 步骤2：重新启动动画
  重置完成后，调用motionLayout.transitionToEnd()（或你对应的目标ConstraintSet方法）来重新运行动画。

• 步骤3：处理页面切换时的动画中断
  当页面被滑出当前可见区域时，在页面的onPause或onStop方法里调用motionLayout.stop()，终止当前正在运行的动画，避免动画在后台继续执行导致内存泄漏或状态混乱：

  override fun onPause() {
      super.onPause()
      motionLayout.stop()
  }
  

• 步骤4：监听页面重选事件
  默认的ViewPager页面切换回调不会触发重选同一页的逻辑，所以需要配合TabLayout的重选监听（如果用TabLayout导航的话）：

  tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
      override fun onTabSelected(tab: TabLayout.Tab) {
          // 正常切换页面的逻辑
      }
  
      override fun onTabUnselected(tab: TabLayout.Tab) {}
  
      override fun onTabReselected(tab: TabLayout.Tab) {
          // 重选当前Tab时，获取对应Fragment并触发重置动画
          val currentFragment = viewPager.adapter?.instantiateItem(viewPager, tab.position) as? YourTargetFragment
          currentFragment?.resetMotionAnimation()
      }
  })
  

  在你的Fragment中定义重置方法：

  fun resetMotionAnimation() {
      motionLayout.apply {
          stop() // 先停止当前可能在运行的动画
          setProgress(0f)
          transitionToEnd()
      }
  }
  

如果用的是ViewPager2，监听页面变化可以用registerOnPageChangeCallback，结合TabLayout的onTabReselected逻辑是类似的。

这样处理后，不管用户怎么快速切换页面，MotionLayout的状态都能保持可控，重选时也能可靠地重置并重新运行动画。

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