Android Studio 4.0のMotion Editorでアニメーションを作ってみた

<br />

Android Studio 4.0でMotion Editorが追加されたのでこれを使ってアニメーションを作ってみた

・Convert to MotionLayout
ConstraintLayoutをビジュアルモードで右クリックすると
自動でMotionLayoutが作られると書かれていたが動かないw
androidx.constraintlayout:constraintlayout:2.0.0-beta3
以上を使う必要があるとのこと
最新は以下だったので以下を利用することをオススメ
androidx.constraintlayout:constraintlayout:2.0.0-beta6

Convertすると、layoutファイルがMotionLayout仕様になり
さらにmotion_scene.xmlが作られる

余談だけどLinearLayoutをConstraintLayoutにコンバートする機能が
いつの間にか付いてることに気づいた

・Motion Editorの使い方
StartとEndで特定のViewの位置を変える
その後、Transitionの矢印をクリックするとタイムラインが出てくる。
そして、再生を押すと自動で前後の間隔を補って再生してくれる

また、右側にあるOnClickをいじると
クリック時にアニメーション再生等のアクションを追加できる

・MainActivity.kt
ここからサンプルコード
motionLayoutに対してメソッドを実行するとActivity起動時にアニメーションしてくれる
setDebugModeするとアニメーションの線が引かれる

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.motion)

//        motionLayout.setDebugMode(MotionLayout.DEBUG_SHOW_PATH)
    }

    override fun onResume() {
        super.onResume()
        GlobalScope.launch {
            delay(1000L)
            motionLayout.transitionToEnd()
        }
    }
}

・motion.xml
試しに作ったlayoutをconvertした結果
一番外枠がMotionLayoutになった

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/motion_scene">

    <ImageView
        android:id="@+id/imageView_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_animation_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="animation start"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>

・motion_scene.xml
これがアニメーションの設定ファイル
読めばなんとなくわかるけど、ConstraintSetで最終的な位置を設定して
Transitionでstartとendを設定してる
OnClickはTranstionに一つしか設定できないので、割と使い勝手悪そう・・・・
普通にlayout側に書いた方が良いかもね

<?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>
        <OnClick motion:clickAction="transitionToStart"
            motion:targetId="@id/button_animation_start" />
    </Transition>

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

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:layout_height="wrap_content"
            android:layout_marginTop="492dp"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintHorizontal_bias="0.604"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            android:layout_width="wrap_content"
            android:id="@+id/imageView_test" />
    </ConstraintSet>
</MotionScene>

こうしてためしにMotion Editorでアニメーションを作ってみましたとさ
大分アニメーション作りやすくなりましたね！

参考
https://android-developers.googleblog.com/2020/05/android-studio-4.html
https://developer.android.com/studio/write/motion-editor

Pocket

関連記事: