Android-native, IDE Android Studio

Membuat animasi dengan Motion Layout di Android (Part-2)

Motion Layout adalah class baru yang tersedia di library ConstraintLayout 2.0 yang memiliki fungsi untuk membantu android developer untuk mengatur motion atau...

Ikhwan Written by Ikhwan · 3 min read >

Motion Layout adalah class baru yang tersedia di library ConstraintLayout 2.0 yang memiliki fungsi untuk membantu android developer untuk mengatur motion atau animasi di aplikasi. Dan kita sekarang ada di part ke dua.

Di part pertama, kita telah membahas tentang pembuatan motion layout sederhana dengan melakukan convert, lalu menggunakan MotionScene, sedikit Transition, ConstraintSet, Constraint, dan Layout sebagai salah satu child dari Constraint. Pada tulisan kali ini kita akan membahas child lainnya yang bisa digunakan di dalam Constraint. Langsung saja, yuk ngoding 😀

1. Transform

Tag ini memiliki fungsi seperti melakukan rotasi (rotation), skala ukuran (scale), translation dan juga ketinggian (elevation). Gunakan lah code berikut ini:

<?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"
    motion:defaultDuration="500">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:autoTransition="animateToEnd"
        motion:duration="1000">

        <KeyFrameSet></KeyFrameSet>

    </Transition>

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

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

        <Constraint android:id="@+id/view2">

            <Transform
                android:elevation="4dp"
                android:rotation="45"
                android:scaleY="2"
                android:translationZ="20dp" />

        </Constraint>

    </ConstraintSet>

</MotionScene>
  • elevation, akan memberikan perubahan pada ketinggian. Hal ini tentunya juga akan memberikan efek bayangan karena perubahan ketinggian tersebut
  • rotation, akan membuat object berputar. Property ini menggunakan hitungan derajat. Jika 45 derajat berarti seperempat lingkaran, 90 derajat setengah lingkaran, dan seterusnya. Pada Transform ini juga terdapat rotationX dan rotationY. Rotation ini akan membuat object berputar sesuai dengan sumbunya.
  • scaleY, akan membuat penambahan ukuran berdasarkan scala sumbu Y. Selain itu juga ada scaleX yang berarti penambahan untuk sumbu X
  • translationZ, akan memberikan pergeseran object. Jika sumbu Z berarti ketinggian, translationX berarti sumbu X, dan translationY berarti ke sumbu Y.
  • selain itu juga terdapat property transformPivotX dan juga transformPivotY. Property ini akan memberikan efek transformasi dilakukan berdasarkan pusat/pivot yang ditentukan. Jika misalkan transformPivotY bernilai 20dp, makan transformasi akan dilakukan dengan pusat/pivot 20dp diatas object.

Berikut hasil dari code di atas:

Transform
Transform

2. PropertySet

Tag ini memiliku fungsi untuk mengatur visibility object. Berikut contoh codenya:

<?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"
    motion:defaultDuration="500">

    <Transition .. />

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

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

        <Constraint android:id="@+id/view2">

            <PropertySet android:visibility="invisible" />

        </Constraint>

    </ConstraintSet>

</MotionScene>

Berikut hasil dari code di atas:

PropertySet

3. Motion

Jika sebelumnya perpindahan object menggunakan <Layout … /> adalah linear atau garis lurus. Dengan motion kita bisa mengubahnya menjadi parabola atau pun motion yang lebih kompleks dengan menggunakan keyframes.

Disini mimin belum akan melampirkan code, karena setelah diuji coba sesuai dengan guide dari engineer Google, hasilnya tetap saja linear.

*Bagian ini akan diupdate nantinya, setelah mimin menemukan cara untuk memperbaikinya, apakah itu bug, atau mimin aja yang salah codenya :3

4. CustomAttribute

Property ini akan membuat developer memiliki akses yang lebih luas. Setiap view tentu memiliki berbagai method yang biasanya digunakan developer untuk melakukan perubahan pada view secara programmatically. Method-method yang diawali dengan set bisa kita gunakan dalam motion layout, yaitu melalui CustomAtribute.

Pada tulisan sebelumnya telah dijelaskan kalau kita menggunakan layout <View /> di activity_main.xml seperti berikut:

    <View
        android:id="@+id/view2"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginBottom="56dp"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

View ini memiliki method untuk mengganti warna background, seperti berikut:

view2.setBackgroundColor(ContextCompat.getColor(this, R.color.colorAccent))

Code tersebut bisa kita gunakan pada activity ataupun fragment. Tapi kali ini kita akan menggunakannya di MotionLayout. Gunakanlah code berikut ini:

<?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"
    motion:defaultDuration="500">

    <Transition .. />

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/view2">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="@color/colorAccent" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/view2">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#89F26D" />
        </Constraint>
    </ConstraintSet>

</MotionScene>
  • CustomAttribute harus di gunakan di kedua ConstraintSet
  • CustomAttribute, attributeName, digunakan untuk memberikan method apa yang terdapat di dalam view yang akan kita gunakan. Penulisan method dilakukan tanpa menggunakan awalan set.
  • CustomAttribute, customColorValue, digunakan untuk memberikan value yang dibutuhkan oleh attributeName
  • Selain customColorValue, juga ada customBoolean, customIntegerValue dan sebagainya. Gunakanlah sesuai dengan kebutuhan yang ada pada attributeName.
  • Jika pada child lainnya hanya boleh ada satu jenis di setiap <Constraint…/> nya, CustomAttribute diperbolehkan lebih dari satu. Penggunaan CustomAttribute lebih dari satu ini tentu dengan menggunakan attributeName yang berbeda ya.

Berikut adalah hasil dari code tersebut:

Nah kita telah mempelajari berbagai child pada Constraint. Pada part selanjutnya kita akan membahas tentang Transition. Sebelumnya kita memang telah menggunakannya, tapi itu baru sedikit. Kita akan bahas lebih lanjut di part ke tiga. Sekian dulu tulisan kali ini, terimakasih ya 😀

Oh iya di website ini ada tulisan menarik lainnya juga loh, seperti berikut:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *