Android-native, IDE Android Studio

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

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 · 2 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 tiga.

#Flashback

Di part sebelumnya kita udah bahas berbagai hal terkait MotionLayout, dan di part ini kita bakalan bahas tentang Transition. Dan di part sebelumnya juga kita telah menggunakan transition, untuk mengingatnya kembali kita lihat codenya lagi yuk

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

        ...

    </Transition>

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

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

</MotionScene>

Dengan menggunakan autoTransition seperti pada code di atas, animasi dari motion layout akan langsung berjalan secara otomatis ketika Activity yang menggunakan layout dan motion tersebut aktif. Lalu bagaimana jika kita ingin menggunakan animasi, tapi tidak langsung berjalan seperti itu? Melalui click misalnya?

1. OnClick

Tentu saja hal tersebut bisa dilakukan. Kita bisa menambahkan OnClick pada child dari Transition. Berikut contoh hasil dan codenya:

OnClick
<?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:duration="1000">

        <KeyFrameSet></KeyFrameSet>

        <OnClick
            motion:targetId="@id/view2" />

    </Transition>

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

    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/view2">
            <Layout
                android:layout_width="200dp"
                android:layout_height="128dp"
                android:layout_marginEnd="32dp"
                android:layout_marginRight="32dp"
                motion:layout_constraintBottom_toBottomOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintTop_toTopOf="parent" />
        </Constraint>
    </ConstraintSet>

</MotionScene>
  • targetId berperan untuk menentukan view yang mana yang akan jadi pemicu untuk animasi / motion.
  • jika targetId tidak ditambahkan maka, animasi / motion akan berjalan ketika pengguna melakukan click pada aplikasi (pada view apapun clicknya, animasi akan tetap berjalan).
  • pada code selanjutnya kita hanya akan fokus pada code Transition ya 😀

Selain targetId kita juga bisa menambahkan property lainnya yaitu clickAction, berikut contoh hasil dan codenya:

OnClick dan clickAction
    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">

        <KeyFrameSet></KeyFrameSet>

        <OnClick
            motion:clickAction="jumpToStart|transitionToEnd"
            motion:targetId="@id/view2" />

    </Transition>
  • Terdapat beberapa value yang bisa digunakan pada clickAction yaitu, jumpToStart, jumpToEnd, transitionToEnd, transitionToStart dan toogle.
  • jumpToStart akan men skip animasi dan langsung ke scene awal atau pada constraint yang di set di constraintSetStart.
  • transitionToEnd akan menjalankan animasi dari constraintSetStart ke constraintSetEnd.

Selain value yang terdapat pada code di atas, kita juga bisa menggunakan value berikut pada clickAction.

  • jumpToEnd akan men skip animasi dan langsung ke scene terakhir atau pada constraint yang di set di constraintSetEnd.
  • transitionToStart akan menjalankan animasi dari constraintSetEnd ke constraintSetStart.
  • toogle akan menjalankan animasi secara bergantian. Click pertama akan menjalankan animasi dari constraintSetStart ke constraintSetEnd. Click kedua akan menjalankan animasi constraintSetEnd ke constraintSetStart dan begitu seterusnya secara bergantian

2. OnSwipe

Selain menggunan click sebagai pemicu, kita juga bisa menggunakan swipe. Berikut contohnya:

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

        <KeyFrameSet></KeyFrameSet>

        <OnSwipe
            motion:onTouchUp="autoCompleteToEnd"
            motion:touchAnchorId="@id/view2"/>

    </Transition>
  • touchAnchorId memiliki peran yang sama seperti targetId pada OnClick. Untuk menentukan view yang mana yang akan menjadi pemicu
  • onTouchUp memiliki fungsi untuk menentukan tindakan seperti apa yang akan dilakukan jika swipe berhenti dilakukan. Pada code di atas kita menggunakan autoCompleteToEnd yang berarti animasi akan otomatis bergerak ke constraintSetEnd. Jika animasi telah berada di salah satu Constraint, maka animasi tidak akan bergerak otomatis ke constraintSetEnd.

Selain autoCompleteToEnd, kita juga bisa menggunakan beberapa value lainnya, seperti berikut:

  • autoCompleteToStart, animasi akan otomatis bergerak ke constraintSetStart. Tapi jika animasi telah berada di salah satu Constraint, maka animasi tidak akan bergerak otomatis ke constraintSetStart
  • autoComplete, animasi akan menyesuaikan dengan progressnya. Jika dari progressnya, animasi cenderung masih pada bagian constraintSetStart, maka animasi akan bergerak ke constraint tersebut. Sedangkan jika animasi telah mendekati constraint terakhir atau dekat dengan constraintSetEnd, maka animasi akan bergerak ke constraint akhir.
  • stop, animasi akan langsung berhenti ketika swipe berhenti dilakukan.
  • declarate, animasi akan berhenti dengan penurunan kecepatan. Layaknya mobil yang mau berhenti, mobil tersebut tetap memiliki jarak yang ditempuh sebelum akhirnya benar-benar behenti. Begitu juga animasi ini.
  • decelerateAndComplete, animasi akan memiliki sifat gabungan dari declarate, dan autoComplete.

Note lainnya:

  • Terdapat beberpa property lainnya pada OnSwipe, seperti kecepatan maximum, percepatan maximum. Tapi karena bagi mimin, sepertinya belum terlalu bermanfaat, jadi tidak mimin jelaskan lebih lanjut ya 😀
  • Penggunaan OnSwipe lebih cocok jika Constraint memiliki perpindahan lokasi atau menggunakan Layout.

Sekian dulu tulisan kali ini. Nantikan part selanjutnya ya. 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 *