Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Android SDK
Code

Menambahkan Animasi Berbasis Fisika ke Android Apps

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Kaustina Nurul Ilmi (you can also view the original English article)

Animasi yang terasa cair dan realistis cenderung membuat pengguna interface lebih atraktif. Tidak heran, Desain Bahan memberi penekanan begitu besar pada mereka!  

Jika anda pernah mencoba membuat animasi semacam itu, anda tahu bahwa animator dan interpolator sederhana yang ditawarkan oleh Android SDK seringkali tidak cukup baik. Itu sebabnya revisi terbaru dari Android Support Library hadir dengan modul fisika yang disebut Animasi dinamis .

Dengan Animasi Dinamis, Anda bisa menciptakan animasi berbasis fisika yang sangat mirip dengan pergerakan benda-benda di dunia nyata.  Anda juga dapat membuat mereka merespons terhadap tindakan pengguna secara real time. Dalam tutorial ini, saya akan menunjukkan cara membuat beberapa animasi semacam itu.

Prasyarat

Untuk mengikuti, pastikan anda memiliki hal berikut ini:

1.   Menambahkan Dependencies

Untuk dapat menggunakan Animasi Dinamis dalam proyek anda, anda harus menambahkannya sebagai dependency implementation  pada app module's build.gradle file:

Dalam tutorial ini, kita akan menjiwai sebuah widget ImageView. Tentu saja, ia harus menampilkan beberapa gambar, jadi bukalah Vector Assets Studio dan tambahkan ikon Material berikut ke proyek anda:

  • sentimen netral
  • sentimen sangat puas

Inilah penampilan mereka:

Two Material icons

Untuk hasil terbaik, saya sarankan Anda mengatur ukuran ikon   56 x 56 dp.

2.   Membuat Animasi Fling

Bila anda melemparkan benda ke dunia nyata, anda memberikannya momentum yang besar. Karena momentum tidak lain adalah produk dari massa dan kecepatan, objek awalnya akan memiliki kecepatan tinggi.  Berangsur-angsur, bagaimanapun, berkat gesekan, perlahan-lahan turun sampai berhenti bergerak sepenuhnya. Menggunakan kelas FlingAnimation Animasi Dinamis, anda dapat mensimulasikan perilaku ini di dalam aplikasi anda.

Demi demonstrasi, mari kita sekarang membuat layout yang berisi widget ImageView flingable, menampilkan ikon ic_sentiment_neutral_black_56dp, dan widget Button pengguna bisa menekan untuk memicu animasi fling. Jika anda menempatkan keduanya di dalam widget RelativeLayout, file XML layout anda akan terlihat seperti ini:

Dalam kode di atas, anda dapat melihat bahwa widget Button memiliki atribut onClick. Dengan mengeklik ikon bohlam lampu merah-ikon Android yang ditunjukkan di sampingnya, anda dapat membuat penangan event on-click yang terkait di dalam kelas Activity anda:

Anda sekarang dapat membuat instance baru dari kelas FlingAnimation menggunakan konstruktornya, yang mengharapkan objek View dan nama properti yang bisa digerakkan. Animasi Dinamis mendukung beberapa sifat animasi, seperti skala, terjemahan, rotasi, dan alfa. 

Kode berikut menunjukkan cara membuat instance FlingAnimation yang bisa menghidupkan koordinat X dari layout ImageView kita:

Secara default, instance FlingAnimation dikonfigurasi untuk menggunakan 0 piksel / detik sebagai kecepatan awalnya. Itu berarti animasi akan berhenti begitu dimulai.  Untuk mensimulasikan fling yang realistis, anda harus selalu ingat untuk memanggilnya metode setStartVelocity() dan memasukan nilai yang besar untuk itu.

Selain itu, anda harus mengerti bahwa tanpa gesekan, animasi tidak akan berhenti. Oleh karena itu, anda juga harus memanggil metode setFriction() dan mamasukan jumlah kecil untuk itu.

Kode berikut mengkonfigurasi instance FlingAnimation seperti ImageView tidak terlempar dari batas layar pengguna:

Pada titik ini, anda bisa langsung menghubungi metode start() untuk memulai animasi.   

Jika anda menjalankan aplikasi sekarang dan menekan tombolnya,anda bisa melihat animasi fling

Perlu dicatat bahwa anda tidak menentukan durasi atau nilai akhir saat membuat animasi berbasis fisika - animasi berhenti secara otomatis saat ia menyadari bahwa objek targetnya tidak menunjukkan pergerakan yang terlihat pada layar pengguna.

3.   Simulasikan Springs

Animasi Dinamis memungkinkan anda untuk dengan mudah menambahkan dinamika musim semi ke animasi Anda. Dengan kata lain, ini bisa membantu anda menciptakan animasi yang membuat widget anda memantul, meregang, dan squash dengan cara yang terasa alami.

Untuk menjaga hal-hal sederhana, sekarang mari kita gunakan kembali layout ImageView kita dan menerapkan animasi berbasis musim semi untuk itu. Agar pengguna dapat memulai animasi, anda harus menambahkan widget Button lain ke layout.

Untuk membuat animasi berbasis musim semi, anda harus menggunakan kelas SpringAnimation. Konstruktornya juga mengharapkan objek View dan properti animasi.  Kode berikut membuat instance SpringAnimation yang dikonfigurasi untuk menghidupkan koordinat x dari ImageView:

Untuk mengendalikan perilaku animasi berbasis musim semi, anda memerlukan spring. Anda bisa membuat satu menggunakan kelas SpringForce, yang memungkinkan anda untuk menentukan posisi istirahat musim semi, rasio redamannya, dan kekakuannya.  Anda bisa memikirkan rasio redaman sebagai konstanta yang, seperti gesekan, yang menjadi bertanggung jawab untuk memperlambat animasi sampai berhenti. Kekakuan, di sisi lain, menentukan berapa banyak kekuatan yang dibutuhkan untuk meregangkan spring. 

Jika semua yang terdengar agak rumit, kabar baiknya adalah bahwa kelas SpringForce menawarkan beberapa konstanta bernama intuitif yang dapat anda gunakan untuk mengkonfigurasi spring anda dengan cepat. Misalnya, kode berikut menciptakan spring yang sangat melenting dan sangat fleksibel:

Dalam kode di atas, anda dapat melihat bahwa kita telah menetapkan nilai posisi peristirahatan terakhir dari spring ke koordinat awal X dari ImageView. Dengan konfigurasi ini, anda bisa membayangkan ImageView dilekatkan pada karet gelang yang tak terlihat, yang dengan cepat menarik ImageView kembali ke posisi semula setiap kali dipindahkan.

Anda sekarang dapat mengasosiasikan spring dengan instance SpringAnimation menggunakan metode setSpring().

 Terakhir, sebelum memulai animasi, anda harus memastikan bahwa anda memberikannya kecepatan awal yang besar dengan menggunakan metode setStartVelocity ().

Jika anda menjalankan aplikasi sekarang, anda harus melihat sesuatu seperti ini:

4.   Mendengarkan event Animasi

Animasi yang dibuat menggunakan perpustakaan Animasi Dinamis harus selalu dimulai dari untaian UI. Anda juga bisa memastikan bahwa itu akan dimulai segera setelah anda memanggil metode start().  Namun, itu berjalan asynchronous. Karena itu, jika anda ingin memeperoleh pemberitahuan saat ia berakhir, anda harus melampirkan objek OnAnimationEndListene dengan menggunakan metode addEndListener ()   .

Untuk melihat pendengar beraksi, mari kita ubah ikon Material tampilan ImageView setiap saat animasi berbasis spring, yang telah kita buat pada langkah sebelumnya, dimulai dan diakhiri.  Saya sarankan anda menggunakan ikon ic_sentiment_very_satisfied_black_56dp saat animasi dimulai, dan ikon ic_sentiment_neutral_black_56dp saat itu berakhir. Kode berikut menunjukkan caranya:

Dengan kode diatas, animasi akan terlihat seperti ini:

5.   Animasi multi Properti

Konstruktor dari kelas FlingAnimation dan SpringAnimation hanya bisa menerima satu properti animasi. Jika anda ingin menghidupkan beberapa properti secara bersamaan, anda dapat membuat beberapa contoh kelas, yang bisa saja rumit, atau membuat properti khusus baru yang merangkum semua properti yang anda inginkan.

Untuk membuat custom animatable property, anda harus membuat subclass dari kelas FloatPropertyCompat, yang memiliki dua metode abstrak:   setValue() dan getValue().  Seperti yang mungkin sudahanda duga, anda dapat memperbarui nilai semua properti animatable yang anda inginkan di dalamnya metode setValue(). Namun, di dalam metode getValue(), anda harus mengembalikan nilai saat ini dari satu properti saja.  Karena keterbatasan ini, anda biasanya harus memastikan nilai dari sifat yang dienkapsulasi tidak sepenuhnya independen satu sama lain.

Misalnya, kode berikut menunjukkan cara membuat properti khusus yang disebut scale, yang secara seragam dapat menghidupkan properti SCALE_X   dan   SCALE_Y dari sebuah widget:

Sekarang, properti custom sudah siap, anda bisa menggunakannya seperti properti animasi lainnya. Kode berikut menunjukkan cara membuat objek SpringAnimation dengan itu:

Saat membuat animasi yang menggunakan properti khusus, ada baiknya juga memanggil metode setMinimumVisibleChange ()  dan masukan nilai yang berarti untuk itu untuk memastikan bahwa animasi tidak mengonsumsi terlalu banyak siklus CPU. Untuk animasi kita, yang memiliki skala widget, anda bisa menggunakan kode berikut:

Inilah tampilan animasi properti kustom:

Kesimpulan

Anda sekarang tahu dasar-dasar bekerja dengan Animasi Dinamis. Dengan teknik yang anda pelajari dalam tutorial ini, anda dapat menciptakan animasi berbasis fisika yang meyakinkan dalam hitungan menit, bahkan jika anda memiliki sedikit pengetahuan tentang fisika Newton.

Untuk mempelajari lebih lanjut tentang Animasi Dinamis, lihat dokumentasi resmi . Sementara itu, lihat beberapa pos terbaru kami lainnya mengenain pengembangan aplikasi Android!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.