MotionLayout中淡入淡出效果无法正常工作

Question

我正在尝试使用透明度和MotionLayout来实现淡入淡出的效果，但似乎无效。这是我想要淡化的imageView。

    <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>

这是运动文件

<?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>

我能看到这张图片，但是它没有进行透明度的淡入淡出。有任何想法吗？我需要触发它才能开始吗？

- Roberto Gimenez

Answer 1

看起来您已将alpha设置为1.0 android:alpha="1.0"在起始和结束的ConstraintSet中。

您可以通过从KeyAttribute中删除alpha并在Transition元素下方放置以下内容，更轻松地使用CustomAttribute更新alpha。

<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>

- kjanderson2

Answer 2

我认为我已经找到了问题和解决方案。所以你定义了两个ConstraintSet（start，end），在这两个ConstraintSet中都设置alpha = 1，这意味着你的视图在两个ConstraintSet中都可见，对吗？现在让我们看看你的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>

你的意思是在 framePosition = 0 时视图可见（alpha=1），然后在过渡中间（framePosition = 50）隐藏视图（alpha=0）。这意味着当你到达 framePosition = 100（过渡结束）时，alpha 将再次为 1，因为在 ConstraintSet（结束）中等于 1。

所以尝试像这样更改它，而不是 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>

- Matteo Pasotti

Answer 3

不需要设置CustomAttribute，这个解决方案应该可以工作：

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" />

内容场景

<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>

- Andrew