Akhir tahun lalu saya membuat situs Chrome Dev Summit. Saya ingin memiliki tampilan dan nuansa Desain Material, karena ini adalah bahasa desain yang bagus, dan saya merasa bahasa ini akan sangat cocok untuk jenis situs yang ingin saya buat. Tetapi, seperti bahasa desain baru lainnya, selalu ada pertanyaan, tantangan, dan keputusan yang harus diambil, terutama ketika berhadapan dengan konvensi web.
Salah satu aspek situs yang sangat sulit untuk dibuat adalah efek “pengalihan” saat Anda mengklik kartu.
Mendapatkan efek seperti ini agar berjalan pada 60 fps memerlukan pemikiran, pembuatan prototipe, dan kompromi yang menarik. Di Chrome Dev Summit, saya berbicara tentang efek ini dan menjelaskan secara mendetail bagaimana saya membangunnya.
Membuat animasi berperforma tinggi
Animasi berperforma tinggi, setidaknya saat ini, adalah animasi yang mendukung compositor browser. Jika Anda dapat terus mengubah properti transformasi dan opasitas, biasanya Anda akan melihat performa yang luar biasa. Pendekatan umum yang saya lakukan pada animasi kartu adalah hal itu:
- Ukur posisi semua elemen pada kartu saat kartu diciutkan.
- Ganti class kartu untuk memperluasnya (tanpa menganimasikan).
- Ukur ulang posisi elemen dalam kartu saat kartu diluaskan.
- Hitung perbedaannya.
- Terapkan transformasi negatif untuk memindahkan elemen kembali ke posisi awal.
- Mengaktifkan animasi.
- Hapus transformasi negatif dan lihat elemen bergerak 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 ini dan pengguna akan mengalami penundaan. Anda dapat menggunakan waktu ini untuk melakukan pekerjaan persiapan yang mahal sehingga Anda dapat menjalankan dengan lebih murah selama animasi itu sendiri. Ada juga jendela di akhir sekitar 50-100 md untuk merapikan pekerjaan, yang mungkin berguna tergantung pada apa yang Anda coba lakukan.
Pekerjaan yang mahal untuk melakukan animasi dilakukan dalam 100 md pertama itu dan, pada Nexus 5 pekerjaan membutuhkan sesuatu di wilayah 70 md, jadi ada ruang luang.
Mendapatkan kode
Jika Anda tertarik untuk melihat situs ini secara lebih mendetail, Anda akan senang mendengar bahwa kode telah dirilis di GitHub. Jadi, kunjungi dan lihatlah.