Question

我正在尝试使用alpha和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>

我可以看到图像，但它没有进行Alpha内外转换。任何想法？我需要触发才能启动吗？

Answer 1

我没有使用MotionLayout，但是使用Animation Java类可以使ImageView变淡。

首先是Java代码。 mContext只是活动/片段的上下文，如果尚未将其保存为全局变量，则可以通过调用getApplicationContext（）进行检索。

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

接下来，在fade_in.xml中的渐隐效果XML代码。您当然可以更改持续时间和偏移量。

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

我能够使用相同格式的Java代码实现淡入淡出效果，只需创建一个新的Animation对象，并在需要发生淡入淡出效果时调用startAnimation（）。通过简单地翻转fromAlpha和toAlpha值即可实现XML。

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

Answer 2

我认为我已经找到了问题和解决方案。因此，您要定义两个ConstraintSet（开始，结束），并且两个alpha = 1，这意味着您的视图在两个视图中都是可见的，对吗？现在，让我们看看您的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>

Answer 3

似乎您已在android:alpha="1.0"的开始和结束处都将alpha设置为1.0 ConstraintSet。

通过从CustomAttribute删除Alpha并将以下内容放在KeyAttribute元素下方，您可以更轻松地将Alpha设置为以Transition更新

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

无需设置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>

淡入淡出在MotionLayout中不起作用

4 个答案:

BaseView

内容场景