Chrome Dev Summit 2014 - Ilmu terapan performa runtime

Efek pengambilalihan kartu

Akhir tahun lalu saya membuat situs Chrome Dev Summit. Saya ingin memiliki tampilan dan nuansa Desain Material, karena ini bahasa desain yang bagus, dan menurut saya akan sangat cocok untuk jenis situs yang ingin saya buat. Tetapi, seperti halnya bahasa desain baru, ada pertanyaan, tantangan, dan keputusan yang harus diambil, terutama ketika berhadapan dengan konvensi web.

Salah satu aspek situs yang sangat sulit dibuat adalah efek “pengambilalihan” saat Anda mengklik kartu.

Mendapatkan efek seperti ini agar berjalan pada 60 fps memerlukan pemikiran, pembuatan prototipe, dan beberapa kompromi yang menarik. Di Chrome Dev Summit, saya berbicara tentang efek ini dan menjelaskan dengan sangat mendetail bagaimana saya membangunnya.

Membuat animasi berperforma tinggi

Animasi berperforma tinggi, setidaknya saat ini, adalah animasi yang mendukung compositor browser. Jika Anda dapat tetap mengubah properti transformasi dan opasitas, biasanya Anda akan melihat performa yang luar biasa. Pendekatan umum yang saya lakukan pada animasi kartu adalah untuk hal ini:

  1. Ukur posisi semua elemen pada kartu saat kartu diciutkan.
  2. Alihkan class kartu untuk meluaskannya (tanpa menganimasikan).
  3. Ukur ulang posisi elemen dalam kartu saat kartu diluaskan.
  4. Hitung perbedaannya.
  5. Terapkan transformasi negatif untuk memindahkan elemen kembali ke posisi awal.
  6. Aktifkan animasi.
  7. Hapus transformasi negatif dan lihat elemen bergerak ke lokasi akhirnya di layar.

Semua ini mungkin terdengar mahal, tetapi ada jendela 100 md dari saat pengguna berinteraksi sebelum animasi harus dimulai. Jika lebih dari ini, pengguna akan melihat keterlambatan. Anda dapat menggunakan waktu ini untuk melakukan pekerjaan persiapan yang mahal sehingga Anda dapat menjalankan animasi dengan lebih hemat selama animasi itu sendiri. Ada juga jendela di akhir sekitar 50-100 md untuk melakukan pekerjaan merapikan, yang mungkin berguna tergantung pada apa yang Anda coba lakukan.

Jendela persepsi untuk animasi.

Pekerjaan yang mahal untuk melakukan animasi dilakukan dalam 100 md pertama dan, pada Nexus 5, pekerjaan membutuhkan waktu sekitar 70 md, jadi ada ruang untuk cadangan.

Mendapatkan kode

Jika Anda tertarik untuk melihat situs ini secara lebih mendetail, Anda pasti akan senang karena kode tersebut telah dirilis di GitHub. Jadi, silakan mulai dan pelajari.