在关键帧中更改视图的高度和宽度

Changing height and width of view in keyframes

我需要从 wrap_contents 的高度和宽度扩展视图以匹配约束的动画,在我的例子中,它是扩展到父允许的宽度,但在 50% 的动画中我希望该视图首先移动到中心而不修改它的高度或宽度。

在第一个约束集中我有:

<ConstraintSet android:id="@+id/base">
    <Constraint android:id="@+id/backgroundView">
        <Layout
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginEnd="12dp"
            android:layout_marginBottom="12dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <CustomAttribute
            app:attributeName="radius"
            app:customDimension="30dp" />
    </Constraint>
</ConstraintSet>

最后一个是:

<ConstraintSet
    android:id="@+id/final"
    app:deriveConstraintsFrom="@id/base">
    <Constraint android:id="@+id/backgroundView">
        <Layout
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginEnd="0dp"
            android:layout_marginBottom="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <CustomAttribute
            app:attributeName="radius"
            app:customDimension="12dp" />
    </Constraint>
</ConstraintSet>

我的转换是:

<Transition
    app:constraintSetEnd="@id/final"
    app:constraintSetStart="@id/base"
    app:duration="300"
    app:motionInterpolator="easeInOut">

    <KeyFrameSet>
        <KeyPosition
            app:framePosition="50"
            app:keyPositionType="parentRelative"
            app:motionTarget="@id/backgroundView"
            app:pathMotionArc="startHorizontal"
            app:percentX="0.5"
            app:percentY="0.5" />

        <KeyAttribute
            app:framePosition="50"
            app:motionTarget="@id/backgroundView">
            <CustomAttribute
                app:attributeName="radius"
                app:customDimension="30dp" />
        </KeyAttribute>
    </KeyFrameSet>
</Transition>

通过这个过渡,我设法将视图移到中心,但同时视图正在扩展以匹配新的约束。如何在框架位置超过 50 之前保持视图的宽度和高度为 60dp?

只需将此关键位置添加到您的关键帧集中:

<KeyPosition
    app:keyPositionType="deltaRelative"
    app:framePosition="50"
    app:motionTarget="@id/backgroundView"
    app:sizePercent="0" />

通过组合 keyPositionType="deltaRelative"sizePercent="0",您可以定义开始大小在该关键帧之前应保持不变。