淡入淡出在 MotionLayout 中不起作用

Question

I'm trying to make an effect of fade in, fade out using alpha and motionLayout, but it seems that it's not working.

This is the imageView that I want to fade.

    <ImageView
    android:id="@+id/tijeras"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:contentDescription="@string/tijeras"
    android:src="@drawable/ic_tijeras" />
    </android.support.constraint.motion.MotionLayout>

And this is the motion file

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Transition
        app:duration="2000"
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@+id/end">
        <KeyFrameSet>
            <KeyAttribute
                app:framePosition="0"
                app:motionTarget="@id/tijeras"
                android:alpha="1.0"/>
            <KeyAttribute
                app:framePosition="50"
                app:motionTarget="@id/tijeras"
                android:alpha="0.0"/>
        </KeyFrameSet>
    </Transition>
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/tijeras"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="1.0"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/logo"/>
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/tijeras"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="1.0"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/logo"/>
    </ConstraintSet>
</MotionScene>

I can see the image, but it's not doing the alpha in and out. Any idea? Do I need to trigger it for starting?

Answer 1

I think that i have found the problem and the solution. So you are defining two ConstraintSet (start, end) and in both alpha = 1, it means that your view is visible in both of them right ? Now let's see your KeyFrameSet

<KeyFrameSet>
        <KeyAttribute
            app:framePosition="0"
            app:motionTarget="@id/tijeras"
            android:alpha="1.0"/>
        <KeyAttribute
            app:framePosition="50"
            app:motionTarget="@id/tijeras"
            android:alpha="0.0"/>
    </KeyFrameSet>

You're saying that at framePosition = 0 your view is visible (alpha=1), then in the middle of your transition (framePosition = 50 ) you are hiding your view (alpha=0). It means that when you are at framePosition = 100 (end of your transition) the alpha will be 1 again because in your ConstraintSet (end) is equal to 1.

So try to change it like this, instead of 50, framePosition = 100

<KeyFrameSet>
        <KeyAttribute
            app:framePosition="0"
            app:motionTarget="@id/tijeras"
            android:alpha="1.0"/>
        <KeyAttribute
            app:framePosition="100"
            app:motionTarget="@id/tijeras"
            android:alpha="0.0"/>
    </KeyFrameSet>

Answer 2

It looks like you have set the alpha as 1.0 android:alpha="1.0" on both the start and end ConstraintSet .

You can more easily set the alpha to update with a CustomAttribute by removing alpha from the KeyAttribute and placing the following below your Transition element

<ConstraintSet android:id="@+id/start">
    <Constraint android:id="@+id/tijeras"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo">
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="0.0" />
    </Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
    <Constraint android:id="@+id/tijeras"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:alpha="1.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo">
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="1.0" />
    </Constraint>
</ConstraintSet>

Answer 3

There is no need setting a CustomAttribute , this solution should work:

BaseView

<!-- Other views -->

<ImageView
    android:id="@+id/tijeras"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:contentDescription="@string/tijeras"
    android:src="@drawable/ic_tijeras" />

Content Scene

<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
     <Transition
        app:duration="2000"
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@+id/end">

        <KeyFrameSet>
            <KeyAttribute
                app:framePosition="50"
                app:motionTarget="@id/tijeras"
                android:alpha="0.0"/> <!-- Set alpha to zero -->
        </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@id/tijeras" <!-- without + -->
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="0.0" <!-- set alpha to zero -->
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/logo"/>
    </ConstraintSet>

</MotionScene>

Answer 4

I have not worked with MotionLayout but I was able to achieve a fade in effect for ImageView using the Animation Java class.

First, the Java code. mContext is simply the Context of the Activity/Fragment and can be retrieved by calling getApplicationContext() if you don't already have it saved as a global variable.

ImageView mIV = mRootView.findViewById(R.id.bank_prof_iv);
Animation mAnim = AnimationUtils.loadAnimation(mContext, R.anim.fade_in);
mIV.startAnimation(mAnim);

Next, the fade in effect XML code in fade_in.xml. You can of course change the duration and offset.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:startOffset="600"
android:interpolator="@android:anim/accelerate_interpolator">

<scale
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="0.9"
    android:toXScale="1.0"
    android:fromYScale="0.9"
    android:toYScale="1.0"/>

<alpha
    android:fromAlpha="0.0"
    android:toAlpha="1.0"/>

</set>

I was able to achieve a fade out effect using the same format of Java code, just create a new Animation object and call startAnimation() whenever you want the fade out effect to take place. The XML is achieved by simply flipping the fromAlpha and toAlpha values.

<alpha
    android:fromAlpha="1.0"
    android:toAlpha="0.0"/>