アニメーション実装の新しい選択肢 MotionLayoutが中々便利で期待できそう 株式会社ヤプリ プロダクト開発部 佐々⽊ ⼤輔

⾃⼰紹介 株式会社ヤプリ プロダクト開発部 佐々⽊ ⼤輔 ヤプリのAndroidエンジニアとして⾃社アプリの実装、 改修をやっています 2 @DaisSasa

⾃⼰紹介 株式会社ヤプリ プロダクト開発部 佐々⽊ ⼤輔 ヤプリのAndroidエンジニアとして⾃社アプリの実装、 改修をやっています 3 初LTですのでお⼿柔らかにお願いします！

MotionLayoutとは？ 4

• 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

7

8

つまり各シーンでViewが • 異なる位置にある→「移動」 • 異なる⼤きさである→「拡⼤・縮⼩」 • 異なる⾓度である→「回転」 • 異なる透過率である→「透過」 と基本アニメーションが簡単に定義できる また、⾊や画像の切り替え等もアニメーション化できる 9

さらに！ MotionLayoutはスワイプを アニメーションのトリガーにできる！ 10

• MotionLayoutでは⼆種類のトリガーが指定できる • OnClick：クリック時にアニメーションを動作させる • OnSwipe：スワイプ時にアニメーションを連動させる 11

OnSwipeを設定すると？ 12

• 指の動きのあわせてアニメーションが連動する • フリックすると慣性があるかのようにアニメーションが続く • 途中で指を離すと各シーンの近い⽅の状態に戻る アニメーションが動く 13

今までは、⾯倒な計算を⾏い 結構な量のコードを書かなければならなかった それが⼀つのxmlで済むようになった 14

まとめ • MotionLayoutやばい • アニメーション開始時と終了時のViewを定義すれば 間のアニメーションを⾃動で⽣成してくれる • スワイプをトリガーにすると指に追従したアニメーションが 簡単に実現できる 補⾜ • まだalpha版なので⼤きな仕様変更があり得る • Key名が⼤幅変更になってエラーが⼤量に出た経験が・・・ 15

落ち 16

2019/5/9 にConstraintLayout(MotionLayout)の beta1がリリースされました！ この資料の原案はGWに決めており、 その時はまだalpha版でした orz 17