MotionEditor で始めるアニメーション実装

はじめに

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 を使うことにより効率よく作業できるようになります。

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

導入手順

アプリの build.gradle ファイルに ConstraintLayout 依存関係を追加(MotionLayout は ConstraintLayout2.0.0から導入されたので、それ以上を指定)

dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.0.2"
}

アニメーションさせたい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 の属性を細かく設定することができます。