使用ConstraintLayout製作漂亮的動畫
最近ConstrainLayout是Android中比較火的一個東西。ConstrainLayout可以使View層級扁平化,提升性能,支持任意的邊框,其目的就是修復之前layout的一些短板。其實ConstrainLayout還有一個大多數人沒有注意到的特性:可以利用Constrainlayout快速構建漂亮的動畫效果。
方法
我這裡假設已經你已經掌握了Constrainlayout基本知識(比如:app:layout_constraintLeft_toLeftOf等)。Constrainlayout可以通過TransitionManager在兩組constraints之間執行動畫(需要API>19或者使用support library),以下是一個demo。
Simple demo
GIF/2K
我們先寫一個xml布局:
到目前為止,這只是一個普通的xml布局,我們再定義另一個布局:
這兩個布局只有ImageView的高度不同,為了執行動畫,只需要在Activity中寫幾行代碼即可:
代碼使用Kotlin寫的,即使沒有學過,基本也沒有什麼障礙,不過還是很有必要學習一下的。
代碼中我們使用TransitionManager在Constrainlayout中啟動了一個延時動畫,TransitionManager在交換兩種布局時會自動使用動畫。
重複的xml Layout
這種方式使用了兩個xml布局,是否重複了呢,沒有人喜歡重複的代碼。
其實沒有你想的那麼糟糕,如果為了動畫的目的定義多餘的xml,可以省略所有的非布局屬性(如textSize等屬性)。Constrainlayout會自動捕獲所有layout的基本約束屬性並拋棄其中的一些。
如果你還是想避免重複的代碼,還可以在代碼中動態修改約束屬性:
使用transition 框架也可以實現這些動畫
當然可以這樣,我們可以通過使用transition框架或者使用屬性設置也可以實現動畫。然而,當需要的動畫可通過使用特定的約束來實現時,ConstrainLayout的方法就很有效,否則就需要大量的代碼來實現動畫效果。
另一個使用場景是當很多元素需要動效時,看一個例子:
GIF/1K
使用ConstrainLayout可以實現以上的效果,通過指定不同的xml,動畫就會自動執行。
注意事項
1. 啟動動畫的方法:
2. 自定義動畫
還可以自定義Transition:
3. 嵌套問題
ConstraintLayout只可以對其直接子View執行動畫,這就意味著它不能很好地處理嵌套的ViewGroup。在以上的例子中,CardView中的TextView還需要手動處理動畫,也許可以通過嵌套ConstrainLayout來實現,但是我並沒有進行實驗。
4. 非布局屬性
ConstraintLayout只支持約束布局的動畫,不支持其他屬性(如坐標修改,文字修改等)。
5. 其他
如果動態修改ConstraintLayout中元素的基本布局屬性(比如使用translationY),動畫後並不會同步這個變更,也就是說動畫執行後,之前修改的屬性將會復原。
此文主要整理自Beautiful animations using Android ConstraintLayout
TAG:wutongke |