Motion Editor — Android Studio 4.0 新功能
Android Studio 4.0加了一個新功能是MotionLayout 的視覺化編輯功能。
在開始之前，我們先看一下MotionLayout是什麼
Motion Layout是ConstraintLayout的子類別，是在ConstraintLayout 2.0 版本新增的。Motion Layout 可以讓我們用xml 的方式宣告動畫。什麼時候需要用MotionLayout呢？當我們需要與UI互動時產生動畫時，就會使用MotionLayout。
上圖就是一個MotionLayout的動畫，可以參考我的Android動畫線上課程
在開始之前，我們再來複習一下MotionLayout 與 MotionLayout KeySet。
在Android Studio 4.0之前，要編輯MotionLayout，你必須直接在xml編輯MotionScene，而在Android Studio則提供了視覺編輯工具。
我們就來看在4.0要怎麼做。首先在ConstraintLayout上按右鍵，Convert to MotionLayout。將ConstraintLayout轉為MotionLayout。
轉完之後可以看到在xml的資料夾多了 activity_main_scene，這個xml裡就是MotionScene。
同時在畫面上看到右邊有一個編輯MotionLayout的區塊
這樣就可以開始編輯ConstranintSet的起始與結束。
點選start後將Constraint拉至左上，代表MotionLayout的起始位置。
點選end後將Constraint拉至右下，代表MotionLayout的結束位置。
拉完之後，要來看MotionLayout的變化。點選下圖1，左邊將出現下圖2的區塊，接著點選Transitions。
在Transition拉動從0~100看到左邊Constraint的變化。下方的0~100則是代表Transition的從起始到結束百分比。
接著在OnSwipe加上dragDirection=dragDown表示往下滑的時候，Constraint的Transition從start到end。
執行App後，往下拉就可以看到Button也跟著往下。
接著我們來為Transition加入KeyFrameSet。點選下圖的1，接著會看到2的區塊出現Transition，會出現下方的Transition。
在Transition點選右上+
點選KeyAttribute
點選Create Key Attribute，Position 50指的是在Transition在50%時，要修改Attribute的scaleX的改變。
接著在右邊的scaleX填入1.5。
整個KeyAttribute則表示，Transition在framePosition為50%時要將x軸放大1.5倍。
設定完成之後，就可以看到滑到中間(50%)的時候，Button的寬度變1.5倍了。
在Android Studio 4.0之後用MotionLayout來做動畫是不是變的很簡單。
參考： Android Studio 4.0的其他功能
https://developer.android.com/studio/preview/index.html
https://www.youtube.com/watch?v=vqDwSK5t7Hk
試試線上課程，學習更快速，更多的動畫技巧。
Android 動畫入門到進階
出版書：Android TDD 測試驅動開發：從 UnitTest、TDD 到 DevOps 實踐
