Android用のMolidLayoutを使用してアニメーションを作成します

このチュートリアルでは、Molidlayoutを使用してAndroidアプリでウィジェットを簡単にアニメーション化する方法を示しています。これは、以前のより面倒な方法よりも大幅に改善されています。 Constraintlayout 2.0以上の一部であるMolidLayoutは、カスタムトランジションの作成を簡素化します。

開始するには、レイアウトがconstraintlayoutバージョン2.0.0以降を使用していることを確認します。 MotionLayoutを統合する最も簡単な方法は、Android Studioのレイアウトビューを「コード」から「デザイン」または「スプリット」ビューに切り替えることです。 これにより、コンポーネントツリーパネルが明らかになり、

要素を追加できます。 「ジャンプ」というラベルの付いたボタンを追加します。このボタンをクリックすると、アニメーションがトリガーされます。

アニメーションのコアは、MotionLayoutファイル（例えば、TextView）で定義されています。このXMLファイルは、

タグを使用して、ウィジェットの開始および終了状態を定義します。 簡略化された例を次に示します：

MotionScene activity_main_scene.xmlこれは、ConstraintSetを

をそのサイズの2倍にスケーリングする遷移を定義し、ボタンをクリックしたときに色を変更します。

<?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="200"
        motion:motionInterpolator="easeIn">
        <OnClick motion:targetId="@+id/button" motion:clickAction="transitionToEnd" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/textView">
            <CustomAttribute motion:attributeName="textColor" motion:customColorValue="@color/black" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/textView"
            android:scaleX="2"
            android:scaleY="2">
            <Layout
                android:layout_marginBottom="40sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                motion:layout_constraintBottom_toTopOf="@id/button" />
            <CustomAttribute motion:attributeName="textColor" motion:customColorValue="@color/teal_700" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

タグは遷移をトリガーします。

タグは、初期（ "start"）およびfinal（ "end"）状態を指定します。 MotionSceneアクティビティのKotlinコードでは、アニメーションをトリガーする必要があります。 これは、TextViewを参照し、OnClick：ConstraintSetを呼び出すことによって行われます。

より複雑なアニメーションについては、Android Studioのモーションエディターを視覚デザインに使用することを検討してください。 これにより、すべてのXMLを手動で書くことなく、アニメーションを作成およびプレビューできます。 アニメーションのさまざまな段階でコードを実行するには、MotionLayoutを追加することもできます。 transitionToEnd()

fun start(v: View) {
    val motionContainer = findViewById<MotionLayout>(R.id.motion_container)
    motionContainer.transitionToEnd()
}

TransitionListenerこのアプローチは、アニメーションをよく制御し、洗練されたトランジションとアニメーションライフサイクル内でのイベント処理を可能にします。プレースホルダーの画像URLを実際の画像パスに置き換えることを忘れないでください。

以上がAndroid用のMolidLayoutを使用してアニメーションを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。