如何在MotionLayout中运行特定的过渡？

Question

我有一个MotionScene，其中包含4个ConstraintSets，代表屏幕的4个状态（加载状态），并且它们之间有3个转换。当我的应用程序状态从加载转变为处理时，我想运行Transition 1（set1 -> set2），再次更改状态时，我想运行Transition 2（set2 -> set3）。但是我找不到实现的方法。

我尝试了以下方法：

使用“setCurrentTransition”来设置当前转换。

     motion_layout.setTransition(R.id.set1, R.id.set2)
     motion_layout.transitionToState(R.id.set2)

只需设置过渡效果。

motion_layout.setTransition(R.id.set1)

为了过渡到某个状态：

---

motion_layout.transitionToState(R.id.set1)

但上述所有方法都会将我所有的设置合并在一起，即使我使用了app:autoTransition="none"。

---

我尝试将所有内容放入一个Transition中，并设置app:progress = 0，然后通过进度控制动画的状态：

 motion_layout.setProgress(0.25f, 1.0f)

它只是将所有动画运行到结束，或者我尝试过

motion_layout.progress = 0.25f

它不会执行动画，只会显示动画进度的0.25，没有任何运动。

如何控制动画的流程？如何运行特定的设置？使用进度条是否更好？如何解决这个问题？

P.S. 我使用了

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta7'

- StayCool

---

嘿，我更新了我的答案 - 我第一次没有注意到这个问题 ;) - Mariusz Brona

Answer 1

我不确定你在做什么（代码不够），但这是我能制作的尽可能简单的5个状态示例。

<MotionScene 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">

<Transition
    motion:constraintSetStart="@id/state1"
    motion:constraintSetEnd="@+id/state2"/>
<Transition
    motion:constraintSetStart="@id/state2"
    motion:constraintSetEnd="@+id/state3"/>

<Transition
    motion:constraintSetStart="@id/state3"
    motion:constraintSetEnd="@+id/state4"/>

<Transition
    motion:constraintSetStart="@id/state4"
    motion:constraintSetEnd="@+id/state5"/>

<Transition
    motion:constraintSetStart="@id/state1"
    motion:constraintSetEnd="@+id/state5"/>

<ConstraintSet android:id="@+id/state1">
    <Constraint         android:id="@+id/view">
    <CustomAttribute motion:attributeName="text" motion:customStringValue="state1" />
    </Constraint>
</ConstraintSet>

<ConstraintSet android:id="@+id/state2">
    <Constraint         android:id="@+id/view">
        <Transform android:translationX="-100dp"/>
        <CustomAttribute motion:attributeName="text" motion:customStringValue="state2" />
    </Constraint>

</ConstraintSet>

<ConstraintSet android:id="@+id/state3">
    <Constraint         android:id="@+id/view">
        <Transform android:translationX="100dp"/>
        <CustomAttribute motion:attributeName="text" motion:customStringValue="state3" />

    </Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/state4">
    <Constraint         android:id="@+id/view">
        <Transform android:translationY="-100dp"/>
        <CustomAttribute motion:attributeName="text" motion:customStringValue="state4" />
    </Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/state5">
    <Constraint         android:id="@+id/view">
        <Transform android:translationY="100dp"/>
        <CustomAttribute motion:attributeName="text" motion:customStringValue="state5" />
    </Constraint>
</ConstraintSet>

这个场景文件与这个main_activity.xml文件配合使用。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/activity_main_scene"
android:id="@+id/motionlayout"
tools:context=".MainActivity">

<TextView
    android:id="@+id/view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#4DD3D3"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="transition"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:onClick="nextState"
    />
 </androidx.constraintlayout.motion.widget.MotionLayout>

并且这是MainActivity.kt文件

package com.example.multistate

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
}

fun nextState(view: View) {
   when (motionlayout.currentState ) {
       R.id.state1 -> motionlayout.transitionToState(R.id.state2)
       R.id.state2 -> motionlayout.transitionToState(R.id.state3)
       R.id.state3 -> motionlayout.transitionToState(R.id.state4)
       R.id.state4 -> motionlayout.transitionToState(R.id.state5)
       R.id.state5 -> motionlayout.transitionToState(R.id.state1)
   }
}
}

- hoford

---

我将测试它，并明天回复答案。 - StayCool

完美运行。现在我必须深入挖掘并理解为什么我的布局不起作用。 - StayCool

MotionLayout如何确定其初始状态（1-5）？即，当第一次运行motionLayout.currentState时应返回什么？ - ddolce

由于历史原因，文件中第一个转换的起始状态是初始状态。（原始motionLayout只有2个状态和一个转换） - hoford

Answer 2

除非你调用 ml.transitionToState(R.id.xx);，否则它只会过渡到你所调用的状态。

在你的 motionScene 中删除所有的 autoTransition 属性。

- hoford

---

不起作用。我在每个ConstraintSet上都将autoTransition=false设置了。 - StayCool

@StayCool 只需要在布局描述中的 transactions 中添加 motion:autoTransition="none" 即可。 - Reza

Answer 3

也许可以尝试这样做：

motion_layout.setTransitionListener(
    object : MotionLayout.TransitionListener {
        override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
        }

        override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
            when(currentId) {
                R.id.set1 -> motion_layout.setTransition(currentId, R.id.set2)
                R.id.set2 -> motion_layout.setTransition(currentId, R.id.set3)
                R.id.set3 -> motion_layout.setTransition(currentId, R.id.set4)
                R.id.set4 -> motion_layout.setTransition(currentId, R.id.set1)
        }
    }
)

motion_layout.transitionToEnd()

然后控制每次要更改状态时调用motion_layout.transitionToEnd()

- Mariusz Brona

---

实际上，我只想在一个过渡完成后停止它。然后在一段时间后触发下一个过渡。我将尝试使用此回调，并随后反馈结果。 - StayCool

就像我之前所说的那样，它会停留在R.id.set2处，然后过一段时间调用motion_layout.transitionToEnd，它就会跳转到R.id.set3。 - Mariusz Brona

这个motionLayout太混乱了。实际上，我甚至无法尝试你的解决方案。因为我的场景完全崩溃了，我无法将其全部运行到最后。几天后我会回来处理这个任务，并首先尝试你的解决方案。 - StayCool