Membuat animasi dengan MotionLayout untuk Android

() translation by (you can also view the original English article)

Berkat fleksibilitas yang luar biasa, ConstraintLayout widget telah menjadi "Swiss Army knife" layout untuk pengembang aplikasi Android. Namun, menambahkan animasi kompleks didalamnya, meskipun mungkin, dapat cukup memakan waktu. Itulah sebabnya mengapa Google memperkenalkan widget MotionLayout di I/O 2018.

Widget MotionLayout, yang sekarang bagian dari Android Support Library, extend dari ConstraintLayout widget. Ini adalah sebuah widget yang unik yang memungkinkan Anda untuk membuat animasi dengan hanya menggunakan XML. Selain itu, itu menawarkan kendali yang mantap atas semua animasi.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana untuk menambahkannya ke proyek-proyek Android Studio Anda dan membuat beberapa animasi yang berbeda-beda

Prasyarat

Untuk mengikuti tutorial ini, Anda akan memerlukan:

Android Studio 3.1.3 atau lebih tinggi
perangkat atau emulator yang menjalankan Android API tingkat 21 atau lebih tinggi
pemahaman dasar tentang ConstraintLayout widget

1. Menambahkan dependensi

Untuk dapat menggunakan MotionLayout widget dalam proyek Android Studio Anda, Anda harus memiliki versi terbaru dari Constraint Layout support library sebagai dependency implementation. Selain itu, untuk menghindari konflik versi, pastikan Anda menyertakan ketergantungan untuk versi stabil terbaru v7 appcompat support library.

Dengan demikian, tambahkan kode berikut untuk modul app build.gradle file:

1	implementation 'com.android.support:appcompat-v7:27.0.2'
2	implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha1'

2. Menentukan Layout

MotionLayout widget dapat melakukan segala ConstraintLayout widget dapat lakukan. Oleh karena itu, Anda dapat dengan bebas mengganti setiap contoh keduanya Untuk sekarang, bagaimanapun, saya sarankan Anda membuat file XML baru layout dan menambahkan MotionLayout widget itu sebagai elemen root.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/motion_container">

    <!-- More code here -->

</android.support.constraint.motion.MotionLayout>

Selama tutorial ini, kita akan menganimasikan ImageView widget. Jadi tambahkan sebagai first child dari layout.

<ImageView
    android:id="@+id/actor"
    app:srcCompat="@color/colorAccent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Anda bebas untuk menggunakan setiap drawable sebagai sumber ImageView widget. Dalam kode di atas, saya menggunakan color drawable.

Selanjutnya, tambahkan tombol Anda dapat menekan untuk memulai animasi. Kode berikut memperlihatkan bagaimana posisi di pusat tata letak:

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Press Me"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:onClick="start"/>

Selain itu, untuk memantau progress animasi, tambahkan SeekBar widget untuk tata letak dan posisi itu di bawah tombol. Berikut adalah bagaimana:

<SeekBar
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_marginTop="10dp"
    android:id="@+id/seekbar"/>

Terakhir, karena ada sebuah di-klik event handler yang berhubungan dengan tombol, pastikan Anda menentukan dalam activity Anda.

1	fun start(v: View) {
2	// More code here
3	}

3. Membuat Motion Scene

Anda mungkin telah memperhatikan bahwa kita tidak menambahkan ketidakleluasaan widget ImageView sedangkan menentukan tata letak. Itu karena kami akan menambahkan mereka ke motion scene. Motion secene adalah sebuah file XML yang berisi rincian tentang animasi yang Anda inginkan untuk membuat dengan MotionLayout widget.

Untuk membuat motion secene baru, buatlah sebuah file XML resource dan menambahkan elemen MotionScene untuk itu.

<?xml version="1.0" encoding="utf-8"?>
<MotionScene
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <!-- More code here -->
    
</MotionScene>

Motion scene berisi unsur-unsur ConstraintSet yang menentukan constraint yang harus diterapkan ke widget pada titik-titik berbeda dalam animasi. Motion secene file biasanya berisi dua constraint set: satu untuk awal animasi dan satu untuk akhir.

Kode berikut memperlihatkan bagaimana untuk membuat dua constraint set yang akan membantu MotionLayout widget bergerak ImageView widget dari sudut kanan bawah layar ke sudut kiri atas:

<ConstraintSet android:id="@+id/starting_set">
    <Constraint android:id="@+id/actor"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="60dp"
        android:layout_height="60dp"
        />
</ConstraintSet>

<ConstraintSet android:id="@+id/ending_set">
    <Constraint android:id="@+id/actor"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="60dp"
        android:layout_height="60dp"
        />
</ConstraintSet>

Perhatikan bahwa setiap elemen ConstraintSet selalu harus menentukan posisi yang diinginkan dan ukuran yang diinginkan. Hal ini penting karena itu akan menimpa informasi sebelumnya ditata layout.

Untuk membantu MotionLayout widget memahami urutan di mana constraint set yang harus diterapkan, berikutnya Anda harus membuat sebuah elemen Transition. Dengan menggunakan atributnya intuitif bernama constraintSetStart dan constraintSetEnd, Anda dapat menentukan set mana harus diterapkan pertama dan yang terakhir. Elemen Transition juga memungkinkan Anda untuk menentukan durasi animasi.

<Transition
    android:id="@+id/my_transition"
    app:constraintSetStart="@+id/starting_set"
    app:constraintSetEnd="@+id/ending_set"
    app:duration="2000">
    
</Transition>

Pada titik ini, motion scene ini lengkap. Namun, MotionLayout widget masih tidak menyadari hal itu. Jadi pergi kembali ke layout file XML, tambahkan atribut layoutDescription widget, dan set nilainya ke nama file adegan gerak.

Jika nama file adegan gerak my_scene.xml, widget MotionLayout Anda sekarang harus terlihat seperti ini:

<android.support.constraint.motion.MotionLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/my_scene"
    android:id="@+id/motion_container">

    ...

</android.support.constraint.motion.MotionLayout>

4. Mulai animasi

Ketika Anda menjalankan aplikasi, MotionLayout widget akan secara otomatis berlaku kendala yang mengatur ditetapkan dalam atribut constraintSetStart elemen Transition. Oleh karena itu, untuk memulai animasi, semua yang perlu Anda lakukan adalah memanggil metode transitionToEnd() widget. Kode berikut, yang harus ditambahkan ke event di klik handler yang Anda buat pada langkah sebelumnya, menunjukkan Anda bagaimana:

1	motion_container.transitionToEnd()

Pada titik ini, jika Anda menjalankan app dan tekan tombol, Anda harus dapat melihat ImageView widget bergerak dengan lancar di layar.

5. Menangani Event Animasi

Dengan melampirkan sebuah objek TransitionListener MotionLayout widget, Anda dapat memantau progress animasi.

motion_container.setTransitionListener(
    object: MotionLayout.TransitionListener {
        // More code here        
    }
)

Antarmuka TransitionListener memiliki dua metode yang abstrak, dan Android Studio akan secara otomatis menghasilkan Rintisan bertopik bagi mereka.

Metode onTransitionCompleted() disebut ketika transisi dari satu constraint diatur ke lain selesai. Untuk sekarang, mari kita menggunakannya untuk me-reset constraint ImageView widget dengan memanggil metode transitionToStart() di dalamnya.

override fun onTransitionCompleted(motionLayout: MotionLayout?,
                                   currentId: Int) {
    if(currentId == R.id.ending_set) {
        // Return to original constraint set
        motion_container.transitionToStart()
    }
}

Metode onTransitionChange() ini dipanggil setiap kali perubahan progress animasi. Dengan demikian, progress adalah angka floating-point yang terletak antara nol dan satu. Kode berikut memperlihatkan bagaimana untuk memperbarui SeekBar berdasarkan progress animasi:

override fun onTransitionChange(motionLayout: MotionLayout?,
                                startId: Int,
                                endId: Int,
                                progress: Float) {
    seekbar.progress = ceil(progress * 100).toInt()
}

Silahkan jalankan app lagi untuk melihat dua animasi sekarang.

6. Membuat Key Frames

Dalam animasi kami, ImageView widget bergerak dalam path yang tampak seperti garis lurus. Itu adalah karena MotionLayout widget diberikan hanya dua poin untuk bekerja dengan: titik awal, yang di bagian bawah sudut kanan layar, dan titik akhir, yang adalah di sudut kiri atas layar. Jika Anda ingin mengubah bentuk dari path, Anda harus memberikan beberapa poin menengah, yang terletak antara titik awal dan akhir. Untuk melakukannya, Anda harus membuat key frame baru.

Sebelum Anda mulai membuat key frame, Anda harus menambahkan elemen KeyFrameSet elemen Transition adegan gerak Anda. Di dalam element baru, Anda akan bebas untuk membuat sejumlah key frame.

1	<KeyFrameSet android:id="@+id/my_keys">
2	<!-- More code here -->
3	</KeyFrameSet>

MotionLayout widget mendukung banyak jenis key frame. Dalam tutorial ini, kita akan bekerja dengan hanya dua tipe: KeyPosition frame dan KeyCycle frame.

KeyPosition frame adalah orang-orang yang membantu Anda mengubah bentuk path. Sementara membuat mereka, pastikan Anda memberikan ID dari target widget, posisi sepanjang waktu, yang dapat menjadi nomor antara 0 dan 100, dan masukkan koordinat X atau Y yang ditentukan sebagai persentase. Koordinat dapat dibandingkan sebenarnya X atau Y kapak atau menjadi relatif terhadap jalan itu sendiri.

Kode berikut memperlihatkan bagaimana untuk membuat dua key frame yang memaksa ImageView widget untuk mengikuti path yang menghindari tabrakan dengan tombol dan seek bar:

<KeyPosition
    app:target="@+id/actor"
    app:framePosition="30"
    app:type="deltaRelative"
    app:percentX="0.85" />
    
<KeyPosition
    app:target="@+id/actor"
    app:framePosition="60"
    app:type="deltaRelative"
    app:percentX="1" />

Jika Anda menjalankan app sekarang, Anda akan melihat sebuah animasi yang terlihat seperti ini:

Anda adalah, tentu saja, bebas untuk menambahkan key frame lebih. Sebagai contoh, dengan menambahkan key frame berikut menjelang akhir timeline, Anda dapat membuat widget ImageView mengikuti path lebih bergelombang:

<KeyPosition
    app:target="@+id/actor"
    app:framePosition="80"
    app:type="deltaRelative"
    app:percentX="0.5" />

Dengan menggunakan frame KeyCycle bersama dengan KeyPosition frame, Anda dapat menambahkan osilasi untuk animasi. Sekaligus menciptakan itu, Anda harus sekali lagi memberikan ID dari target widget, posisi sepanjang timeline, dan masukkan nilai properti yang terombang-ambing bolak. Selain itu, Anda harus mengkonfigurasi osilator dengan menyediakan rincian seperti bentuk gelombang untuk menggunakan dan periode gelombang.

Kode berikut menciptakan frame KeyCycle yang menggunakan osilator gelombang sinus untuk secara berkala memutar ImageView widget dengan 50 derajat:

<KeyCycle
    app:target="@+id/actor"
    app:framePosition="30"
    android:rotation="50"
    app:waveShape="sin"
    app:wavePeriod="1" />

Jalankan app lagi, Anda akan melihat sebuah animasi yang terlihat seperti ini:

7. Membua tWidget Animasi interaktif

Semua saat ini, Anda telah telah menekan sebuah tombol untuk memulai animasi. Sebuah tombol, namun, ini tidak selalu diperlukan karena MotionLayout widget memungkinkan Anda untuk langsung pasang event handler untuk widget yang sedang menjalankan animasi. Saat ini mendukung di-klik dan on-swipe event.

Misalnya, Anda dapat menambahkan elemen OnClick berikut, yang menargetkan ImageView widget, di dalam elemen Transition motion scene Anda untuk membuat tombol redundant:

1	<OnClick
2	app:target="@+id/actor"
3	app:mode="transitionToEnd"/>

Demikian pula, Anda dapat menggunakan elemen OnSwipe untuk memungkinkan pengguna untuk secara manual menarik ImageView widget di layar. Sementara membuat elemen, Anda harus memastikan Anda memberikan arah drag dan sisi widget yang harus bertindak sebagai drag handle.

1	<OnSwipe
2	app:touchAnchorId="@+id/actor"
3	app:touchAnchorSide="top"
4	app:dragDirection="dragUp" />

Jika Anda menjalankan app lagi, Anda sekarang harus mampu men-drag ImageView widget.

Kesimpulan

Anda sekarang tahu bagaimana cara menggunakan MotionLayout widget untuk cepat menambahkan animasi kompleks, interaktif untuk aplikasi Android Anda. Anda dapat yakin bahwa animasi akan berjalan tanpa lag apapun atau jitter pada sebagian besar perangkat, selama anda menghindari nested view

It's worth dicatat bahwa rilis mendatang Android Studio akan mencakup gerak Editor visual, yang kemungkinan akan lebih meningkatkan kegunaan dari widget.

Untuk selengkapnya, lihat dokumentasi resmi.