はじめに

2020年5月にリリースされた AndroidStudio4 では主にビルドツールやデザインツールに関して追加・改善されました。
前回 Layout Inspector について記事を書きましたが、今回はデザインツールの中の MotionEditor についてみていきたいと思います。


MotionEditor を使うとこのようなアニメーションも気軽に数分で作れます。

開発環境

Android Studio 4.0.2
macOS Catalina 10.15.6

簡単におさらい

MotionEditor とは?

  • MotionLayout を作成・編集・プレビューできるAndroidStudio の機能
  • Android Studio 4.0 Canaryから導入された

MotionLayout とは?

  • MotionScene というXMLファイルに開始と終了のレイアウトを定義すると、その間を補間してレイアウトにアニメーションを付与してくれる機能
  • ConstraintLayout のサブクラス
  • API レベル14 との下位互換性がある

これまでは手作業で編集 → エミュレータで確認を繰り返し行っていた部分が、MotionEditor を使うことにより効率よく作業できるようになります。

それでは導入手順をみていきましょう!

導入手順

  1. アプリの build.gradle ファイルに ConstraintLayout 依存関係を追加(MotionLayout は ConstraintLayout2.0.0から導入されたので、それ以上を指定)
dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.0.2"
}
  1. アニメーションさせたいxml を MotionLayout へ変換
    ConstraintLayout のレイアウトファイルを開いて、デザインエディタ上で右クリック > 「Convert to MotionLayout」

これで androidx.constraintlayout.motion.widget.MotionLayout に変換されました。

またデザインエディタは以下のように MotionEditor 部分の表示が追加されていると思います。
ここを触ってアニメーションをつけていきます。


またxmlフォルダには MotionScene ファイル(activity_main_scene.xml)が自動生成されています。

<?xml version="1.0" encoding="utf-8"?>
<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"
        motion:duration="1000">
       <KeyFrameSet>
       </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

導入手順は以上です。とても簡単すぎて手間取るところがないですね。
次は MotionEditor でアニメーションを付けてみましょう!

MotionEditor でアニメーションをつける

開始・終了状態の設定

作業としては MotionLayout と同様に、開始と終了の状態を MotionEditor で作っていきます。

まずは開始状態の設定をするために、MotionEditor の start を選択して、アニメーション させたいViewを選びましょう。
そして編集ボタンで Create Constraint を選択してください。

これで開始状態の設定ができました。
MotionScene ファイル内も以下のように自動で更新されています。

<?xml version="1.0" encoding="utf-8"?>
<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"
        motion:duration="1000">
       <KeyFrameSet>
       </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <!-- ここが追加された -->
        <Constraint
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

あとは開始時の view の位置や色・大きさ・表示などの属性を設定していきます。

左のデザインエディタで view の位置を設定することができます。リアルタイムに右側の Attributes の内容も変わっているのが分かると思います。
それ以外にも Attributes では view の属性を細かく設定することができます。

一例として、背景色のアニメーションをつけたい場合は、属性設定下部の CustomAttributes で以下のように設定します。

忘れずに終了状態も設定できたら、どんなアニメーションになったか AndroidStudio 上で確認しましょう!

AndroidStudio でのアニメーションの確認

MotionEditor の start から end に伸びている矢印をタップします。
すると動画編集ソフトのタイムラインのような表示が出てきます。
ここで下向きの三角をスライドさせて任意のフレームの動きを確認したり、再生ボタンタップで全体のアニメーションを確認することができます。

なお、ここでは触れませんが MotionLayout のKeyFrames は、時計アイコンをタップすると設定できます。

アニメーションについては、Google公式ドキュメントに MotionLayout のサンプル例がいろいろ載っているので、こちらも参考にしてみてください。

まとめ

いかがだったでしょうか。
MotionEditorを使うことによって、MotionLayout での作業をより効率よくできるようになっているのではないかと思います。特にエミュレータをいちいち起動しなくても AndroidStudio 上で確認できるのはいいですね。

参考HP



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある!一緒に働いてみたい!という方は下記よりご応募お待ちしております。
採用情報をみる