() translation by (you can also view the original English article)
Bahasa Material Design dibuat untuk menyelesaikan masalah flat design di layar yang lebih kecil dengan menyediakan isyarat visual kepada elemen interaktif. Di artikel ini kamu akan belajar mengenai beberapa konsep dasar dari animasi dan cara mereka digunakan untuk menyediakan sebuah kesan hidup yang natural ke elemen. Kamu akan melihat cara menggunakan ide tersebut untuk memanjakan penggunamu sambil membantu mereka memahami UI aplikasi.
Ide Inti dari Material Motion
Google menyarankan bahwa semua animasi harus menjadi responsif, natural, sadar, dan sengaja. Objek di layar harus bertingkah sebagaimana mereka dibuat dari material tertentu dengan berat dan volume mereka sendiri yang mendikte cara mereka bergerak dan bertingkah di layar.
Animasi yang terjadi harus secara langsung berkorelasi ke sebuah aksi dan harus terasa berguna dan hidup. Mereka harus bermakna dan membantu pengguna menggunakan aplikasimu dengan memiliki sebuah tujuan dan menyajikan tujuan tersebut. Animasi harus membuat konteks bagi penggunamu dan membantu mata mereka ke layar sehingga mereka sadar apa yang mungkin di aplikasimu.
Motion harus lebih fokus pada jumlah waktu yang ia butuhkan untuk pergi dari titik A ke B daripada mengenai jarak yang butuh untuk dilingkupi. Jarak akan berubah tergantung dari ukuran layar, tapi kecepatan dari sebuah objek akan menambahkan penenakan dan membantu pengguna memahami apa yang terjadi.
Ketika sebuah objek peru dihapus dan lainnya ditambahkan ke layar (seperti sebuah tombol yang berubah dari play ke pause), maka kamu perlu mengubah objek pertama ke yang kedua. Dan juga, kamu bisa memberi signal perubahan signifikan kepada sebuah objek dengan merubah warna dan alpha sebuah item di layar. Dengan begini, pengguna akan sadar tentang apa yang telah berubah dan kamu bisa memberi penekanan pada apa yang tersedia di aplikasimu untuk berinteraksi dengan pengguna.
Ilusi dari Kehidupan
Satu dari referensi terbaik untuk memahami animasi natural adalah buku Ilusi dari Kehidupan oleh Frank Thomas dan Ollie Johnston yang memiliki sebuah bab detil mengenai prinsip dari animasi yang digunakan Disney dalam film animasi mereka. Thomas dan Johnson menggaris besarkan 12 prinsip dasar di dalam bukunya. Di bagian ini kita akan membahas beberapa dari prinsip ini dan bagaimana mereka bisa berhubungan dengan Material Design.
Squash and Strecth
Ketika sebuah objek berkembang melalui sebuah aksi, dia akan menunjukkan perubahan dari bentuknya berdasarkan meterial yang membuatnya.
Konsep ini diwakili oleh Prinsip Squash and Strecth, di mana bisa diillstrasikan dengan baik dengan membayangkan sebuah bola memantul. Saat paksaan eksternal muncul ke bola, seperti gravitasi dan percepatan, bolanya akan merenggang. Saat objeknya menabrak dasar, dia akan menimpa dan menggencet permukaannya. Objek yang bergerak dan berinteraksi dengan permukaan di aplikasimu harus menggunakan ide ini untuk memberikan ilusi dari berat dan volume dari objekmu saat dia bergerak.
Antisipasi
Tidak ada aksi besar yang harus terjadi. Ketika menjalankan sebuah animasi dari aplikasimu, kamu harus memiliki sebuah aksi lain yang lebih kecil yang memimpin animasi utama. Prinsip ini disebut antisipipasi, dan ini membantu untuk mencegah situasi di mana pengguna menanyakan, "Kenapa ini terjadi?" Pergerakan natural umumnya dimulai dengan sebuah pemanasan ketimbang langsung begitu saja mulai. Di Android, kamu bisa menggunakan class AnticipateInterpolator untuk membuat sebuah animasi yang mencadangkan sedikit jarak sebelum bergerak.
Staging
Tujuan dari staging adalah untuk membuat kontenmu jelas dan mudah dipahami oleh penggunamu. UI dan animasimu harus terasa alami dan berlabuh ke tugas atau konsep utama, ketimbang membuat penggunamu tidak yakin mengenai mengapa sesuatu terjadi dalam cara tertentu. Kamu hanya perlu melakukan satu aksi besar dalam satu waktu untuk membuatnya tetap sederhana dan disengaja.
Follow-Through and Overlapping Action
Ketika sebuah objek bergerak menjadi berhenti, dia tidak berhenti dalam sekejap (tidak seperti menabrak benda solid lainnya, karena itu mengenai Strecth and Squash). Tambahan dari sebuah objek akan terus bergerak untuk beberapa waktu setelah objek utama telah berhenti.
Ketika membuat Material Animation, kamu harus berusaha menggunakan dua posisi berbeda: poin berhenti yang diinginkan, dan satu lagi sedikit lebih jauh darinya, di mana animasimu bisa berhenti sepenuhnya dan memantul kembali ke posisi final. Ini mencegah animasimu dari terlihat flat dan mekanik. Animasi macam ini dapat dihasilkan menggunakan class BounceInterpolator atau OvershootInterpolator.
Slow In and Slow Out
Pergerakan alami tidak akan terjadi dalam kecepatan yang konstan, begitu pula dengan animasimu.
Ketika sebuah objek pergerak dari luar pandangan ke dalam layar, dia harus terjadi dengan sangat cepat dan melambat saat sampai di posisi akhir. Pergerakan cepat tersebut akan menarik perhatian pengguna dan menyediakan waktu yang cukup bagi mereka untuk menyadari di mana itu berhenti.
Sebaliknya, sebuah objek meninggalkan layar harus dimulai perlahan dan bertambah cepat saat meninggalkan layar. Ini akan memberikan penggunamu waktu yang cukup untuk menyadari objeknya bergerak, dan saat itu bertambah cepat dan pergi. Mereka akan paham bahwa mereka harus berhenti peduli dengan benda tersebut di layar.
Ketika sebuah objek bergerak dari satu posisi ke posisi lainnya, tanpa meninggalkan layar di titik manapun, kamu harus menggabungkan kedua ide ini sehingga pengguna melihat apa yang terjadi selama animasimu menjaga kesan alaminya. Prinsip ini juga diterapkan ke daftar, seiring mereka akan digulung secara cepat oleh pengguna, dan akan melambat hingga mereka berhenti. Ketika sebuah daftar melompat antara dua bagian, dia menjadi kurang mendalam dan terasa mekanik. Kamu bisa menggunakan LinearOutSlowInInterpolator, FastOutLinearInInterpolator, atau FastOutSlowInInterpolator untuk menambah efek animasi.
Arcs
Dengan sangat sedikit pengecualian, pergerakan alami terjadi dalam busur ketimbang dalam garis lurus yang presisi. Ketika objek bergerak melintasi layar, sebagai tambahan ke prinsip slow in and slow out, kamu harus berusaha untuk menggerakkan objek di dalam jalur sebuah busur untuk menghindari sebuah kesan tidak alami dalam animasimu. Kamu bisa menggunakan objek Arcmotion Android untuk menggerakkan objekmu dalam jalur melengkung.
Aksi Sekunder
Aksi sekunder adalah aksi kecil dan sederhana yang mendukung ide dari aksi utama yang terjadi. Aksi sekunder tidak harus membayangi maupun tampil lebih menarik dari aksi utama, karena mereka hanya muncul sebagai penekanan.
Sebuah contoh dari aksi sekunder bisa jadi saat kamu membuka laci navigasi di aplikasi Android. Sementara lacinya terbuka sebagai aksi utama, animasi ikon hamburger yang menjadi tanda panah adlah efek seerhana yang menkankan apa yang terjadi tanpa membayangi perubahan utama di layar.
Timing
Ketika bekerja dengan animasi, timing adalah segalanya. Jika sebuah animasi bergerak terlalu cepat atau lambat, pengguna akan menyadari sesuatu terasa "hilang".
Penting untuk mengingat bahwa Material Design memanggil objek untuk tampil sebagaimana mereka dibuat dari beberapa material. Jika sebuah objek dibuat untuk terasa seperti kertas bergeser di sebuah permukaan, maka itu tidak seharusnya bergerak secara cepat melintasi layar. Maklum, tidak ada formula pasti untuk kecepatan animasi dalam aplikasi, tapi dengan beberapa waktu dan latihan, kamu harus bisa membuat animasi dengan timing yang tepat an sesuai dengan tema dan tujuan aplikasimu.
Kesimpulan
Sekarang kamu sadar akan konsep utama dari Material Motion dan beberapa konsep dasar dari animasi, kamu bisa mulai bermain dengan aneka aplikasi yang tersedia untuk menganimasikan aplikasimu dan menambah sedikit letupan senang ke penggunamu.
Jika kamu ingin belajar lebih tentang pembuatan animasi di Android, cek panduan mendalam Menganimasikan Aplikasi Android-mu dari Ashraff Hathibelagal di Envato Tuts+.
Atau cek panduan lain mengenai animasi di Android!
