Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Dais-33

May 15, 2019
Tweet

More Decks by Dais-33

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. MotionLayoutとは?
    4

    View Slide

  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'
    }

    View Slide

  6. 6

    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" />


    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" />

    View Slide

  7. 7

    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" />


    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" />

    View Slide

  8. 8

    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" />


    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" />

    View Slide

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

    View Slide

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

    View Slide

  11. • MotionLayoutでは⼆種類のトリガーが指定できる
    • OnClick:クリック時にアニメーションを動作させる
    • OnSwipe:スワイプ時にアニメーションを連動させる
    11
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@+id/start">
    motion:dragDirection="dragDown"
    motion:touchAnchorId="@id/button"
    motion:touchAnchorSide="bottom" />

    View Slide

  12. OnSwipeを設定すると?
    12

    View Slide

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

    View Slide

  14. 今までは、⾯倒な計算を⾏い
    結構な量のコードを書かなければならなかった
    それが⼀つのxmlで済むようになった
    14
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@+id/start">
    motion:dragDirection="dragDown"
    motion:touchAnchorId="@id/button"
    motion:touchAnchorSide="bottom" />


    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" />


    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" />


    View Slide

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

    View Slide

  16. 落ち
    16

    View Slide

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

    View Slide