AutoTransition not working in Motion layout

Viewed 3197

I currently learning motionlayout. I created a small app in which the image in the center rotates for 5 seconds. onClick and onSwipe attributes are working fine on the device but with autotransition = animateToEnd nothing is happening when I run the app on the device. Basically I want my transition to happen automatically as the activity starts. Here is my motion layout file:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_main_scene">

    <ImageView
        android:id="@+id/back"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="TODO"
        android:src="@drawable/background" />

    <ImageView
        android:id="@+id/moon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_moon"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>

Here is my motionScene:

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="5000"
        motion:autoTransition="animateToEnd">
       <KeyFrameSet>
           <KeyCycle
               motion:motionTarget="@+id/moon"
               motion:framePosition="0"
               motion:wavePeriod="2"
               motion:waveShape="sawtooth"
               android:rotation="180"
               motion:waveOffset="0" />
       </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

If there is any alternative way to run transition with motion layout please do tell. **For running the app I used to create debug apk and then run it on my device.

6 Answers

just add

app:motionInterpolator="linear"

to the Transition tag

note: when the version of Constrainlayout is 2.0.0-beta6 and higher, I find some differ in MotionLayout. there is the condition that this.mCurrentTransition == transition in MotionScene#autoTransition(...). I suspect the condition filter the operation back to start.

there are two solutions. 1.Downgrade to 2.0.0-beta6 or lower. 2. control it programmatically:

motionLayout.setTransitionListener(object : TransitionAdapter() {
    override fun onTransitionCompleted(motionLayout: MotionLayout, currentId: Int) {
        super.onTransitionCompleted(motionLayout, currentId)
        if (currentId == R.id.end) {
            motionLayout.transitionToStart()
        }
    }
})

Did you use constraintLayout:2.0.0-beta7? I think that version has a bug. Downgrade to 2.0.0-beta6 should fix it.

It is because of its version. Use androidx.constraintlayout.constraintlayout-2.0.1.

Auto transition wont work if you dont set your objects like imageview in constraint set add any widget you want to transtion inside constraint set use constraint tag and it will work On start constraint set put first postion of your image On end constraint set put postion of your image view when after 5 sec done in your case use android:rotation=""

Don't put the KeyCycle at motion:framePosition="0" it's a known issue.

KeyCycle really needs 2 or 3 values to be meaning full Typically position 0 and position 100 and one in the middle. If you only put one in it will replicate a start(0) and end(100).

The value of KeyCycles in this case is that you can vary the speed of the rotation over time. So that you can ramp up the speed or start it fast and slow down over time.

Related