使用 ConstraintLayout 製作漂亮的動畫

wutongke發表於2019-02-23
AI動畫

使用 ConstraintLayout 製作漂亮的動畫

最近ConstrainLayout是Android中比較火的一個東西。ConstrainLayout可以使View層級扁平化，提升效能，支援任意的邊框，其目的就是修復之前layout的一些短板。其實ConstrainLayout還有一個大多數人沒有注意到的特性：可以利用Constrainlayout快速構建漂亮的動畫效果。

方法

我這裡假設已經你已經掌握了Constrainlayout基本知識（比如：app:layout_constraintLeft_toLeftOf等）。Constrainlayout可以通過TransitionManager 在兩組constraints之間執行動畫（需要API>19或者使用support library），以下是一個demo。

Simple demo

使用 ConstraintLayout 製作漂亮的動畫

我們先寫一個xml佈局：

<!-- activity_main.xml -->
<android.support.constraint.ConstraintLayout ...>

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        ... />

    <Button ... />

</android.support.constraint.ConstraintLayout>複製程式碼

到目前為止，這只是一個普通的xml佈局，我們再定義另一個佈局：

<!-- activity_main_alt.xml -->
<android.support.constraint.ConstraintLayout ...>

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        **app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"**
        ... />

    <Button ... />

</android.support.constraint.ConstraintLayout>複製程式碼

這兩個佈局只有ImageView的高度不同，為了執行動畫，只需要在Activity中寫幾行程式碼即可：

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    val constraintSet1 = ConstraintSet()
    constraintSet1.clone(constraintLayout)
    val constraintSet2 = ConstraintSet()
    constraintSet2.clone(this, R.layout.activity_main_alt)

    var changed = false
    findViewById(R.id.button).setOnClickListener {
        TransitionManager.beginDelayedTransition(constraintLayout)
        val constraint = if (changed) constraintSet1 else constraintSet2
        constraint.applyTo(constraintLayout)
        changed = !changed
    }
}複製程式碼

程式碼使用Kotlin寫的，即使沒有學過，基本也沒有什麼障礙，不過還是很有必要學習一下的。

程式碼中我們使用TransitionManager在Constrainlayout中啟動了一個延時動畫，TransitionManager在交換兩種佈局時會自動使用動畫。

重複的xml Layout

這種方式使用了兩個xml佈局，是否重複了呢，沒有人喜歡重複的程式碼。

其實沒有你想的那麼糟糕，如果為了動畫的目的定義多餘的xml，可以省略所有的非佈局屬性（如textSize等屬性）。Constrainlayout會自動捕獲所有layout的基本約束屬性並拋棄其中的一些。

如果你還是想避免重複的程式碼，還可以在程式碼中動態修改約束屬性：

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    val constraintSet1 = ConstraintSet()
    constraintSet1.clone(constraintLayout)
    val constraintSet2 = ConstraintSet()
    constraintSet2.clone(constraintLayout)
    constraintSet2.centerVertically(R.id.image, 0)

    var changed = false
    findViewById(R.id.button).setOnClickListener {
        TransitionManager.beginDelayedTransition(constraintLayout)
        val constraint = if (changed) constraintSet1 else constraintSet2
        constraint.applyTo(constraintLayout)
        changed = !changed
    }
}複製程式碼

使用transition 框架也可以實現這些動畫

當然可以這樣，我們可以通過使用transition框架或者使用屬性設定也可以實現動畫。然而，當需要的動畫可通過使用特定的約束來實現時，ConstrainLayout的方法就很有效，否則就需要大量的程式碼來實現動畫效果。

另一個使用場景是當很多元素需要動效時，看一個例子：

使用 ConstraintLayout 製作漂亮的動畫

使用ConstrainLayout可以實現以上的效果，通過指定不同的xml，動畫就會自動執行。

注意事項

1. 啟動動畫的方法：

TransitionManager.beginDelayedTransition(constraintLayout)複製程式碼

2. 自定義動畫

還可以自定義Transition：

val transition = AutoTransition()
transition.duration = 1000
TransitionManager.beginDelayedTransition(
        constraintLayout, transition)複製程式碼

3. 巢狀問題

ConstraintLayout只可以對其直接子View執行動畫，這就意味著它不能很好地處理巢狀的ViewGroup。在以上的例子中，CardView中的TextView還需要手動處理動畫，也許可以通過巢狀ConstrainLayout來實現，但是我並沒有進行實驗。

4. 非佈局屬性

ConstraintLayout只支援約束佈局的動畫，不支援其他屬性（如座標修改，文字修改等）。

5. 其他

如果動態修改ConstraintLayout中元素的基本佈局屬性（比如使用translationY），動畫後並不會同步這個變更，也就是說動畫執行後，之前修改的屬性將會復原。

此文主要整理自Beautiful animations using Android ConstraintLayout

相關文章