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

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

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

F0bc859dd1f5725158d04e63289c6634?s=128

Dais-33

May 15, 2019
Tweet

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