Membuat Horizontal Scrolling pada Overflow
- Hal lainnya yang masih aneh adalah komponen Filter Kategori yang seharusnya bisa digeser ke kanan. Namun, saat ini tidak terjadi apa pun ketika Anda menggesernya.
- Untuk mengatasinya, klik elemen Filter Kategori dan pilih Horizontal Scrolling pada Overflow scrolling. Jangan lupa untuk mengubah lebar elemen sesuai dengan lebar halaman supaya elemen tersebut menjadi overflow (melebihi batas).
- Jalankan kembali prototype dan lihat hasilnya.
Menambahkan Animasi pada Interaksi
-
Supaya prototype kita benar-benar mirip seperti aplikasi aslinya, kita akan menambahkan animasi pada setiap aksi. Caranya cukup mudah, klik garis interaksi dan pilih jenis animasi pada bagian Animation.
Berikut ini adalah beberapa jenis animasi yang bisa Anda pilih: Jenis Animasi Keterangan Dissolve Semakin memudar/transparan ke halaman selanjutnya. Smart Animate Otomatis membuat animasi untuk elemen yang mirip di kedua halaman. Move in/out Membuat animasi halaman selanjutnya masuk atau keluar. Push Animasi halaman selanjutnya masuk dan halaman sekarang keluar. Slide in/out Animasi halaman selanjutnya masuk dan halaman sekarang keluar dengan sedikit efek fade(pemudaran). Selain itu, juga ada pengaturan kecepatan animasi, seperti: Jenis Kecepatan Animasi Keterangan Linear Kecepatan datar Ease in Semakin cepat Ease out Semakin lambat Ease in and out Cepat di tengah Ease in back Memantul di awal Ease out back Memantul di akhir Ease in and out back Memantul di awal dan akhir Custom Mengatur kurva kecepatan sendiri -
Berikut ini adalah contoh hasil dari pengaturan animasi di atas.
-
Yuk kita terapkan juga pada setiap aksi lainnya! Sehingga, hasil akhir dari prototipe akan terlihat seperti ini.
Berikut ini adalah contoh link dari prototype pada latihan ini:
Sedangkan untuk project prototype dapat Anda lihat di sini: