MotionLayout中的大小动画导致TextView闪烁

Question

我正在尝试使用MotionLayout创建工具栏动画。除了TextView的高度和宽度设置为"wrap_content"时，当TextView的大小增加时，由于约束居中而部分闪烁，一切正常。如果我将TextView对齐到左侧，一切都按预期工作。这是已知的错误还是您有任何想法可以解决这个问题？

布局

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF0000"
    android:fitsSystemWindows="false">

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:theme="@style/AppTheme.AppBarOverlay">

    <com.example.motionlayout.CollapsibleToolbar
            android:id="@+id/constraintToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="56dp"
            app:layoutDescription="@xml/scene_11_header"
            app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed">

        <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/icon"
                android:layout_width="wrap_content"
                android:layout_height="64dp"
                android:src="@drawable/maxmustermann" />

        <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Marco Schlosser"
                android:textColor="#FFFFFF"/>

        <ImageView
                android:id="@+id/ivMail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_mail" />

        <ImageView
                android:id="@+id/ivPhone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_phone" />

        <ImageView
                android:id="@+id/ivInfo"
                android:layout_width="24dp"
                android:layout_height="24dp"
                app:srcCompat="@drawable/ic_info_button" />


    </com.example.motionlayout.CollapsibleToolbar>

</com.google.android.material.appbar.AppBarLayout>

<include layout="@layout/content_scrolling" />

场景

<Transition
        app:constraintSetEnd="@id/end"
        app:constraintSetStart="@id/start"
        app:duration="1000"
        app:motionInterpolator="linear">

    <KeyFrameSet>
        <KeyPosition
                app:framePosition="30"
                app:keyPositionType="deltaRelative"
                app:motionTarget="@id/icon"
                app:percentX="0.9"
                app:percentY="0.1" />

        <KeyPosition
                app:framePosition="30"
                app:keyPositionType="deltaRelative"
                app:motionTarget="@id/name"
                app:percentX="0.9"
                app:percentY="0.1" />
    </KeyFrameSet>

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

        <Constraint
                android:id="@id/icon"
                android:layout_width="wrap_content"
                android:layout_height="64dp"
                android:layout_marginTop="50dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        <Constraint
                android:id="@id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/icon">

            <CustomAttribute
                    app:attributeName="textSize"
                    app:customFloatValue="22"/>

        </Constraint>

        <Constraint
                android:id="@id/ivMail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="50dp"
                android:layout_marginEnd="8dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/ivPhone"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintHorizontal_chainStyle="packed"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/name" />

        <Constraint
                android:id="@id/ivPhone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="50dp"
                android:layout_marginStart="8dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintHorizontal_chainStyle="packed"
                app:layout_constraintStart_toEndOf="@+id/ivMail"
                app:layout_constraintTop_toBottomOf="@+id/name" />

        <Constraint
                android:id="@id/ivInfo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="16dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

    </ConstraintSet>

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

        <Constraint
                android:id="@id/icon"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_marginStart="16dp"
                android:layout_marginBottom="16dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

        <Constraint
                android:id="@id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginBottom="16dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@id/icon">

            <CustomAttribute
                    app:attributeName="textSize"
                    app:customFloatValue="14"/>

        </Constraint>

        <Constraint
                android:id="@id/ivMail"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_marginEnd="16dp"
                android:layout_marginBottom="16dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/ivPhone" />

        <Constraint
                android:id="@id/ivPhone"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_marginEnd="16dp"
                android:layout_marginBottom="16dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/ivInfo" />

        <Constraint
                android:id="@id/ivInfo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:layout_marginEnd="16dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent" />

    </ConstraintSet>
</Transition>

- mkl

---

com.example.motionlayout.CollapsibleToolbar 是做什么用的？ - Darish

你解决了这个问题吗？我也遇到了一个非常简单的动画问题。 - j2emanue

检查我在类似问题上的回答，网址为stackoverflow.com/a/61199498/4231708。 - Vitalie Suba

Answer 1

我找到了解决闪烁问题的方法。

1.扩展运动布局并添加onChange接口：

class CollapsibleToolbar @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : MotionLayout(context, attrs, defStyleAttr), AppBarLayout.OnOffsetChangedListener {
    val TAG : String = "CollapsibleToolbar"
    var onHeaderOffsetChangeed: OnHeaderOffsetChangeed? = null

    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
        progress = -verticalOffset / appBarLayout?.totalScrollRange?.toFloat()!!
        onHeaderOffsetChangeed?.let {
           it.onChanged(progress)
        }
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        (parent as? AppBarLayout)?.addOnOffsetChangedListener(this)
    }


    interface OnHeaderOffsetChangeed{
        fun onChanged(progress: Float)
    }

}

2. 在Activity上设置接口并设置缩放计算

(info_header as CollapsibleToolbar).onHeaderOffsetChangeed = object : CollapsibleToolbar.OnHeaderOffsetChangeed {
            override fun onChanged(progress: Float) {
                // e.g. 23sp zoom to 14sp
                tv_title.textSize = 23 - 9 * progress
            }

        }

3. 从你的MotionScene中删除textSize自定义属性。

            <CustomAttribute
                app:attributeName="textSize"
                app:customFloatValue="14"/>

- Vison

---

其他视图怎么样？我会测试一下，看看如果我们改变TextView的大小，它是否会出现闪烁。 - FarshidABZ

Answer 2

看起来 beta 版本可能有一些 bug & 可能需要另一个发布版本，但在那之前：

要意识到调整字体大小在 CPU 上是昂贵的。作为一个 hack，现在尝试使用缩放，就像在您的 ending constraint 中这样：

<Constraint
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:transformPivotX="0dp"
            android:transformPivotY="14.5dp"
            android:scaleX="1.167"
            android:scaleY="1.167">

android:transformPivotY="14.5dp" 是通过将最终字体大小（以sp为单位）除以2来计算的。因此，如果最终字体大小为30，则使用15dp的中心轴Y。需要这些轴心的原因是，它旋转的方式使其似乎遵守了您的布局约束，因为它不再以比例缩放。

- j2emanue