Android 动画约束布局

Question

我想为两个 ConstraintLayouts 制作动画 - 一个是另一个的 child 。

我知道动画只适用于 ConstraintLayout 的直接子级，所以这是我的布局:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/cl"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#393939"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:visibility="visible">

        <TextView
            android:id="@+id/textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Move me!"
            android:textColor="#fff"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.8" />
    </android.support.constraint.ConstraintLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Animate" />
</android.support.constraint.ConstraintLayout>

它有一个 ConstraintLayout 作为根布局和一个内部 ConstraintLayout，它有一个背景颜色和一个 TextView。内部布局在开始时设置为 gone。

我想淡入内部 ConstraintLayout(将其可见性设置为 View.VISIBLE)并向上移动 TextView(设置其vertical Bias 到一个较低的数字)。由于我无法为内部 subview 设置动画，因此我创建了 4 个约束集 - csA 用于内部 ConstraintLayout 的可见性动画，csB 用于向上移动 TextView 的动画。

class MainActivity : AppCompatActivity() {
    val csA1 = ConstraintSet()
    val csA2 = ConstraintSet()

    val csB1 = ConstraintSet()
    val csB2 = ConstraintSet()

    lateinit var btn: Button
    lateinit var cl: ConstraintLayout
    lateinit var root: ConstraintLayout

    var switch = false


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        root = findViewById(R.id.root_layout)
        val tv: TextView = findViewById(R.id.textview)
        cl = findViewById(R.id.cl)
        btn = findViewById(R.id.button)

        btn.setOnClickListener { toggle() }

        csA1.clone(root)
        csA2.clone(csA1)
        csA2.setVisibility(R.id.cl, View.VISIBLE)

        csB1.clone(cl)
        csB2.clone(csB1)
        csB2.setVerticalBias(R.id.textview, 0.3f)

    }

    fun toggle() {
        TransitionManager.beginDelayedTransition(root)
        val cs = if (!switch) csA2 else csA1
        cs.applyTo(root)
        val vsB = if (!switch) csB2 else csB1

        TransitionManager.beginDelayedTransition(cl)
        vsB.applyTo(cl)

        switch = !switch
        btn.text = "switch: $switch"
    }
}

第一次按下按钮可能有效 - 但在第二次按下时，布局不会被隐藏，并且 View 保持在原处。文本被剪切到第一个字母，全文在下一次点击时显示。当触发器从 true 设置为 false 时，背景闪烁为白色并持续很短的时间，然后再次变为灰色。

该项目中没有其他内容。如果我禁用其中一个动画，另一个可以正常工作。

我尝试过的:

• 通过 Handler 和 postDelayed 延迟 vsB 以及使用 startDelay 和 duration 设置自定义转换可见性动画。

   
    Handler().postDelayed({
        TransitionManager.beginDelayedTransition(cl)
        vsB.applyTo(cl)
    }, 450)

• 使用处理程序和 450 毫秒 的延迟(我没有测试这个的最小限制)- 动画确实有效。它不会滞后，布局会在每次按下按钮时正确显示和隐藏，并且 TextView 会向上移动。但这不完全是我的要求。我需要同时为它们制作动画，甚至更好:在向上移动时延迟 50 毫秒。

• 使用处理程序和 1 ms 的延迟，布局在第一次按下时显示，TextView 已经在其最终位置(没有移动) .

• 带有 startDelay 的自定义过渡，它的 react 与没有任何内容的版本一样:TextView.text 被剪切到第一个字母，背景闪烁为白色并消失回到灰色。过渡到似乎没有任何效果，即使使用更大的 startDelay(例如，duration + 200)也没有效果。

   
    fun toggle() {
        val duration = 200L
        val transitionA = AutoTransition()
        transitionA.duration = duration

        val transitionB = AutoTransition()
        transitionB.startDelay = duration

        TransitionManager.beginDelayedTransition(root, transitionA)
        val cs = if (!switch) csA2 else csA1
        cs.applyTo(root)

        val vsB = if (!switch) csB2 else csB1

        TransitionManager.beginDelayedTransition(cl,transitionB)
        vsB.applyTo(cl)

        switch = !switch
        btn.text = "switch: $switch"
    }

我在 API 27 的模拟器和 API 24 的三星 S6 上对此进行了测试。其他技术信息:

   
    compileSdkVersion 27

    minSdkVersion 21
    targetSdkVersion 27

    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.0'


    Android Studio Version 3.1.2
    Android SDK Tools 26.1.1 

两个 ConstraintLayouts 的同步动画是否可能？

Answer 1

由于我仍然无法评论(rep 不够)，所以我会写在这里，但像评论一样阅读。
您认为 ConstraintSet 是错误的。
如果您只想设置一些可见的东西并将其动画化到另一个位置，则需要制作两个 .xml。它们需要在内部具有相同的 View (无论是否可见)，然后通过 TransitionManager 和 ConstraintSets 应用它们。
没有代码的简单示例:

您有一个包含一个 ImageView 的 ConstraintLayout xml。在第一个 xml 中，它被设置在布局的顶部，在第二个中，您将它设置在底部。当您现在克隆这些布局并将一个布局应用到另一个布局时(可能在单击按钮时)，它将使 ImageView 从上到下动画化。

再看看 official doc并像那样尝试。如果你理解一次，其实很容易。如果您还有其他问题或希望我给您举一个更好的例子，请尽管提问。