如何 运行 MotionLayout 中的特定过渡?
How to run particular transition in MotionLayout?
我有一个带有 4 个 ConstraintSet 的 MotionScene,代表屏幕的 4 个状态(加载状态)以及它们之间的 3 个过渡。
当我的应用程序状态从例如加载到处理,我想 运行 转换 1 (set1 -> set2),当状态再次改变时,我想 运行 转换 2 (set2 -> set3)。而且我找不到办法。
接下来我尝试了:
使用
设置当前转换
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 on ,然后控制动画的状态:
motion_layout.setProgress(0.25f, 1.0f)
这只是 运行 所有动画都结束了,或者我试过了
motion_layout.progress = 0.25f
没有动画,它只显示 0.25 的动画进度,没有任何动作。
如何控制动画的流向?如何运行特定设置?使用进度会更好吗?如何解决?
P.S。
我用
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta7'
也许可以尝试这样的事情:
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()
除非你有,否则它应该只在你调用 ml.transitionToState(R.id.xx);
时转换到你调用的状态
删除您的 motionScene 中的所有 autoTransition 属性
我不确定你在做什么(代码不够),但这是一个尽可能简单的 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)
}
}
}
我有一个带有 4 个 ConstraintSet 的 MotionScene,代表屏幕的 4 个状态(加载状态)以及它们之间的 3 个过渡。 当我的应用程序状态从例如加载到处理,我想 运行 转换 1 (set1 -> set2),当状态再次改变时,我想 运行 转换 2 (set2 -> set3)。而且我找不到办法。
接下来我尝试了:
使用
设置当前转换 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 on ,然后控制动画的状态:
motion_layout.setProgress(0.25f, 1.0f)
这只是 运行 所有动画都结束了,或者我试过了
motion_layout.progress = 0.25f
没有动画,它只显示 0.25 的动画进度,没有任何动作。
如何控制动画的流向?如何运行特定设置?使用进度会更好吗?如何解决?
P.S。 我用
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta7'
也许可以尝试这样的事情:
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()
除非你有,否则它应该只在你调用 ml.transitionToState(R.id.xx);
时转换到你调用的状态删除您的 motionScene 中的所有 autoTransition 属性
我不确定你在做什么(代码不够),但这是一个尽可能简单的 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)
}
}
}