如何重置MotionLayout场景并设置元素可见性？FlashCards翻卡应用问题排查与修复

我来帮你梳理下这个问题，看起来你在MotionLayout的状态管理和动画触发逻辑上踩了几个小坑，咱们一步步解决：

1. 动画触发逻辑混乱导致状态无法重置 #

你在btnCheck的点击事件里连续调用了transitionToStart()和transitionToEnd()，这两个方法都是异步执行的——MotionLayout还没完成回到Start状态的动画，就被要求跳到End状态，直接导致内部状态混乱，后续无法正确响应动画指令。另外rebuildScene()在这里完全没必要，它会重新加载整个MotionScene，不仅会覆盖你代码中设置的视图属性，还会带来额外的性能开销。

修复方案：
如果需要每次点击都从Start状态触发翻转动画，先重置MotionLayout到初始状态再执行动画，移除多余的rebuildScene()调用：

binding.btnCheck.setOnClickListener { 
    viewModel.changeSide()
    // 先无动画重置到Start状态
    binding.motionLayoutCard.setTransition(R.id.start, R.id.end)
    binding.motionLayoutCard.progress = 0f
    // 再触发翻转动画到End
    binding.motionLayoutCard.transitionToEnd()
}

2. 动画结束后视图属性被锁定导致可见性修改失效 #

你已经在MotionScene的ConstraintSet里给按钮设置了app:applyMotionScene="false"和app:visibilityMode="ignore"，这部分是正确的，但MotionLayout在运行动画时会临时接管文本视图的alpha、rotationY等属性，如果动画结束后没有释放控制权，会干扰后续的可见性修改。

修复方案：
给MotionLayout添加动画监听器，在动画结束后重置文本视图的属性控制权：

// 在Fragment的onViewCreated方法中添加监听器
binding.motionLayoutCard.setTransitionListener(object : MotionLayout.TransitionListener {
    override fun onTransitionStarted(motionLayout: MotionLayout?, startId: Int, endId: Int) {}
    override fun onTransitionChange(motionLayout: MotionLayout?, startId: Int, endId: Int, progress: Float) {}
    override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
        // 动画结束后重置文本视图的alpha，避免影响后续可见性控制
        binding.textView.alpha = 1f
        binding.textView2.alpha = 1f
    }
    override fun onTransitionTrigger(motionLayout: MotionLayout?, triggerId: Int, positive: Boolean, progress: Float) {}
})

3. 数据更新与动画执行的时序冲突 #

你在点击按钮时先调用viewModel.changeSide()，然后触发动画，这时候ViewModel的sidedCard观察者会立即更新视图的文本和按钮可见性，可能和动画的属性变化产生冲突。

修复方案：
让ViewModel的状态驱动动画，把动画触发逻辑移到观察者回调里，这样时序更清晰：

viewModel.sidedCard.observe(viewLifecycleOwner) { sidedCard -> 
    when { 
        sidedCard == null -> { 
            binding.textView.text = "End of Game!" 
            binding.brnDontKnow.isVisible = false 
            binding.btnKnow.isVisible = false 
            binding.btnCheck.isVisible = false 
            binding.btnEndOfGameBack.isVisible = true 
            viewModel.endOfGame() 
        } 
        sidedCard.side == 0 -> { 
            binding.textView.text = sidedCard.card.titles[0] 
            binding.brnDontKnow.isVisible = false 
            binding.btnKnow.isVisible = false 
            binding.btnCheck.isVisible = true 
            // 切换到正面时，重置MotionLayout到Start状态
            binding.motionLayoutCard.setTransition(R.id.start, R.id.end)
            binding.motionLayoutCard.progress = 0f
        } 
        else -> { 
            binding.textView2.text = sidedCard.card.titles[1] 
            binding.brnDontKnow.isVisible = true 
            binding.btnKnow.isVisible = true 
            binding.btnCheck.isVisible = false 
            // 切换到背面时，触发翻转动画
            binding.motionLayoutCard.transitionToEnd()
        } 
    } 
}

然后简化按钮点击事件，只负责更新ViewModel状态：

binding.btnCheck.setOnClickListener { 
    viewModel.changeSide()
}

额外小优化 #

• 你的MotionScene里Transition的duration设置为5000毫秒（5秒），翻转动画一般300-500毫秒就足够流畅，建议调整为motion:duration="300"。
• 给Start ConstraintSet补充textViewContainer的配置，保证动画前后状态连贯：

<ConstraintSet android:id="@+id/start">
    <!-- 现有按钮配置 -->
    <Constraint android:id="@+id/textViewContainer" 
        android:rotationY="0" 
        android:layout_width="300dp" 
        android:layout_height="300dp" 
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintEnd_toEndOf="parent" 
        app:layout_constraintStart_toStartOf="parent" 
        app:layout_constraintTop_toTopOf="parent"/>
</ConstraintSet>

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