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倍にスケーリングする遷移を定義し、ボタンをクリックしたときに色を変更します。

<code class="language-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="200" motion:motioninterpolator="easeIn">
        <onclick motion:targetid="@+id/button" motion:clickaction="transitionToEnd"></onclick>
    </transition>

    <constraintset android:id="@+id/start">
        <constraint android:id="@+id/textView">
            <customattribute motion:attributename="textColor" motion:customcolorvalue="@color/black"></customattribute>
        </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"></layout>
            <customattribute motion:attributename="textColor" motion:customcolorvalue="@color/teal_700"></customattribute>
        </constraint>
    </constraintset>

</motionscene></code>

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

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

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

<code class="language-kotlin">fun start(v: View) {
    val motionContainer = findViewById<motionlayout>(R.id.motion_container)
    motionContainer.transitionToEnd()
}</motionlayout></code>

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

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