Membuat Animasi dengan MotionLayout untuk Android

Tutorial ini menunjukkan bagaimana dengan mudah menghidupkan widget dalam aplikasi Android anda menggunakan MotionLayout, peningkatan yang ketara ke atas kaedah yang lebih rumit sebelum ini. MotionLayout, sebahagian daripada Constraintlayout 2.0 dan ke atas, memudahkan membuat peralihan tersuai.

Untuk memulakan, pastikan susun atur anda menggunakan Versi Constraintlayout 2.0.0 atau lebih tinggi. Cara paling mudah untuk mengintegrasikan MotionLayout adalah dengan menukar paparan susun atur anda di Android Studio dari "Kod" kepada "Reka Bentuk" atau "Split" paparan. Ini mendedahkan panel pokok komponen, di mana anda boleh menambah elemen MotionLayout. Kami akan menambah butang yang dilabel "melompat" di bawah TextView - mengklik butang ini akan mencetuskan animasi.

Inti animasi ditakrifkan dalam fail MotionScene (mis., ). Fail XML ini menggunakan tag activity_main_scene.xml untuk menentukan keadaan permulaan dan akhir widget. Inilah contoh yang mudah: ConstraintSet

<?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>

ini

mentakrifkan peralihan yang skala MotionScene ke dua kali saiznya dan mengubah warna apabila butang diklik. Tag TextView mencetuskan peralihan. Tag OnClick menentukan keadaan awal ("mula") dan akhir ("akhir"). ConstraintSet

Dalam kod Kotlin aktiviti anda, anda perlu mencetuskan animasi. Ini dilakukan dengan merujuk

dan memanggil MotionLayout: transitionToEnd()

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

Untuk animasi yang lebih kompleks, pertimbangkan untuk menggunakan editor gerakan Android Studio untuk reka bentuk visual. Ini membolehkan anda membuat dan pratonton animasi tanpa menulis semua XML secara manual. Anda juga boleh menambah

untuk melaksanakan kod pada pelbagai peringkat animasi. TransitionListener

Pendekatan ini menawarkan kawalan berbutir ke atas animasi anda, yang membolehkan peralihan dan pengendalian peristiwa yang canggih dalam kitaran hayat animasi. Ingatlah untuk menggantikan URL imej tempat letak dengan laluan imej sebenar.

Atas ialah kandungan terperinci Membuat Animasi dengan MotionLayout untuk Android. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!