アニメーション実装の新しい選択肢 MotionLayoutが中々便利で期待できそう / MotionLayout is useful and can be expected

2018年のGoogleIO でMotionLayoutについての発表がありましたが、まだまだalpha版で利用者が少ないと感じています。
今回、私が業務の都合でMotionLayoutを知り、その便利さを知ったので、それを簡単に紹介します。

Transcript

1. アニメーション実装の新しい選択肢 MotionLayoutが中々便利で期待できそう 株式会社ヤプリ プロダクト開発部 佐々⽊ ⼤輔
2. ⾃⼰紹介 株式会社ヤプリ プロダクト開発部 佐々⽊ ⼤輔 ヤプリのAndroidエンジニアとして⾃社アプリの実装、 改修をやっています 2 @DaisSasa
3. ⾃⼰紹介 株式会社ヤプリ プロダクト開発部 佐々⽊ ⼤輔 ヤプリのAndroidエンジニアとして⾃社アプリの実装、 改修をやっています 3 初LTですのでお⼿柔らかにお願いします！
4. MotionLayoutとは？ 4
5. • ConstraintLayoutを継承したView • 異なる複数のシーンを定義する事で両シーン間のアニメーショ ンを提供してくれる • ConstraintLayoutのバージョン2から提供される 5 dependencies { // androidX implementation 'androidx.appcompat:appcompat:2.0.0-alpha3’ // そうでない implementation 'com.android.support.constraint:constraint- layout:2.0.0-alpha3' }
6. 6 <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" /> </ConstraintSet>
7. 7 <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" /> </ConstraintSet>
8. 8 <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" /> </ConstraintSet>
9. つまり各シーンでViewが • 異なる位置にある→「移動」 • 異なる⼤きさである→「拡⼤・縮⼩」 • 異なる⾓度である→「回転」 • 異なる透過率である→「透過」 と基本アニメーションが簡単に定義できる また、⾊や画像の切り替え等もアニメーション化できる 9
10. さらに！ MotionLayoutはスワイプを アニメーションのトリガーにできる！ 10
11. • MotionLayoutでは⼆種類のトリガーが指定できる • OnClick：クリック時にアニメーションを動作させる • OnSwipe：スワイプ時にアニメーションを連動させる 11 <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start"> <OnSwipe motion:dragDirection="dragDown" motion:touchAnchorId="@id/button" motion:touchAnchorSide="bottom" /> </Transition>
12. OnSwipeを設定すると？ 12
13. • 指の動きのあわせてアニメーションが連動する • フリックすると慣性があるかのようにアニメーションが続く • 途中で指を離すと各シーンの近い⽅の状態に戻る アニメーションが動く 13
14. 今までは、⾯倒な計算を⾏い 結構な量のコードを書かなければならなかった それが⼀つのxmlで済むようになった 14 <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start"> <OnSwipe motion:dragDirection="dragDown" motion:touchAnchorId="@id/button" motion:touchAnchorSide="bottom" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" /> </ConstraintSet> </MotionScene>
15. まとめ • MotionLayoutやばい • アニメーション開始時と終了時のViewを定義すれば 間のアニメーションを⾃動で⽣成してくれる • スワイプをトリガーにすると指に追従したアニメーションが 簡単に実現できる 補⾜ • まだalpha版なので⼤きな仕様変更があり得る • Key名が⼤幅変更になってエラーが⼤量に出た経験が・・・ 15
16. 落ち 16
17. 2019/5/9 にConstraintLayout(MotionLayout)の beta1がリリースされました！ この資料の原案はGWに決めており、 その時はまだalpha版でした orz 17