Question

我想动画两个ConstraintLayouts - 一个是另一个的孩子。

我知道动画只适用于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设置为较低的数字）。由于我无法为内部子视图设置动画，因此我为内部csA和ConstraintLayout的可见性动画创建了4个约束集 - 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"
    }
}

按下第一个按钮可能会起作用 - 但是在第二次按下时，布局不会被隐藏，并且视图会保持原样。文本被剪切到第一个字母，下一次单击显示全文。当触发器从true设置为false时，背景会在非常短的时间内闪烁为白色，然后再次变为灰色。

该项目中没有其他任何内容。如果我禁用其中一个动画，则另一个动作没有任何问题。

我尝试过：

通过处理程序延迟vsB＆amp; postDelayed以及使用startDelay的{{1}}可见性动画设置自定义转换。

duration

使用处理程序和Handler().postDelayed({ TransitionManager.beginDelayedTransition(cl) vsB.applyTo(cl) }, 450)的延迟（我没有测试它的最小限制） - 动画确实有效。它没有滞后，每次按下按钮都会正确显示和隐藏布局，文本视图会向上移动。但这不是我的要求。我需要同时动画它们，甚至更好：向上运动延迟50ms。
使用处理程序和450 ms的延迟，首次按下时会显示布局，1 ms已经处于最终位置（无移动）。
使用TextView进行自定义转换，其响应类似于没有任何内容的版本：startDelay被剪切为第一个字母，背景闪烁为白色并返回灰色。过渡到似乎没有任何影响，甚至没有更大的TextView.text（例如startDelay）。

duration + 200

我在API 27上的模拟器和API 24上的Samsung S6上测试了这个。其他技术信息：

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

两个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的同步动画是否可能？

Answer 1

由于我仍然无法评论（没有足够的代表），我会在这里写下来，但是就像评论一样阅读。
你在想ConstraintSets是错的。
如果您只想设置一些可见的东西并将其设置为另一个位置，则需要制作两个.xml。它们需要在内部具有相同的视图（无论是否可见），然后通过TransitionManager和ConstraintSets应用它们。
没有代码的简单示例：

你有一个带有一个ImageView的ConstraintLayout xml。在第一个xml中，它设置在布局的顶部，在第二个中，它将它设置在底部。当您现在克隆这些布局并将其应用于另一个布局（可能在按钮上单击）时，它将从顶部到底部为ImageView设置动画。

再看一下official doc并尝试一下。如果你理解一次，它实际上很容易。如果您有其他问题或希望我给您一个更好的例子，请问。

Android Animating Constraint Layouts

1 个答案: