Akhir tahun lalu, saya membuat situs Chrome Dev Summit. Saya ingin situs ini memiliki tampilan dan nuansa Desain Material, karena ini adalah bahasa desain yang bagus, dan saya merasa bahwa bahasa desain ini akan sangat cocok untuk jenis situs yang ingin saya buat. Namun, seperti halnya bahasa desain baru, ada pertanyaan, tantangan, dan keputusan yang harus diambil, terutama saat berurusan dengan konvensi web.
Salah satu aspek situs yang sangat sulit dibuat adalah efek “pengambilalihan” saat Anda mengklik kartu.
Untuk membuat efek seperti ini berjalan pada 60 fps, diperlukan pemikiran, pembuatan prototipe, dan beberapa kompromi menarik. Di Chrome Dev Summit, saya berbicara tentang efek ini dan menjelaskan secara mendetail cara saya membangunnya.
Membangun animasi berperforma tinggi
Animasi berperforma tinggi, setidaknya saat ini, adalah animasi yang mendukung compositor browser. Jika Anda dapat tetap menggunakan properti transformasi dan opasitas, biasanya Anda akan melihat performa yang bagus. Pendekatan umum yang saya lakukan untuk animasi kartu ini melakukan hal itu:
- Ukur posisi semua elemen dalam kartu saat kartu diciutkan.
- Alihkan class kartu untuk meluaskannya (tanpa animasi).
- Ukur kembali posisi elemen dalam kartu sekarang setelah kartu diluaskan.
- Hitung perbedaannya.
- Terapkan transformasi negatif untuk memindahkan elemen kembali ke posisi awal.
- Aktifkan animasi.
- Hapus transformasi negatif dan lihat elemen yang meluncur ke lokasi akhirnya di layar.
Semua ini mungkin terdengar mahal, tetapi ada jangka waktu 100 md dari saat pengguna berinteraksi sebelum animasi harus dimulai. Jika lebih dari itu, pengguna akan merasakan adanya penundaan. Anda dapat menggunakan waktu ini untuk melakukan pekerjaan persiapan yang mahal sehingga Anda dapat menjalankan animasi dengan lebih murah. Ada juga jendela di akhir sekitar 50-100 md untuk melakukan tugas pembersihan, yang mungkin berguna bergantung pada apa yang ingin Anda lakukan.
Tugas berat untuk melakukan animasi dilakukan dalam 100 md pertama tersebut dan, di Nexus 5, tugas tersebut membutuhkan waktu sekitar 70 md, jadi masih ada ruang untuk melakukan tugas lainnya.
Mendapatkan kode
Jika Anda tertarik untuk melihat situs secara lebih mendetail, Anda akan senang mendengar bahwa kode telah dirilis di GitHub, jadi buka dan lihat!