Update kemampuan animasi dengan akselerasi hardware

Una Kravets

Ringkasan: Chromium mengupdate kemampuan akselerasi hardware secara otomatis untuk animasi SVG, transformasi berbasis persentase, dan yang akan segera hadir, animasi warna latar belakang dan jalur klip.

Dalam hal performa animasi web, istilah "akselerasi hardware" dan animasi "diakselerasi GPU" kemungkinan akan muncul. Tapi apa artinya? Gaya dengan akselerasi hardware adalah gaya yang memanfaatkan GPU (Unit Pemrosesan Grafis), bukan CPU (Unit Pemrosesan Pusat) untuk merender gaya visual. Hal ini karena GPU dapat merender perubahan visual di halaman web lebih cepat daripada CPU.

Menggunakan GPU untuk memindahkan transisi dan animasi yang intensif grafis akan menghasilkan visual yang lebih halus dan lebih sedikit jank, karena animasi tersebut tidak terpengaruh oleh thread utama. Dengan mengambilnya dari thread utama, animasi Anda akan melewati sisi skrip aktif lainnya yang berjalan di halaman, yang akan memperlambat visual Anda dan menimbulkan jank.

Mengaktifkan animasi dengan akselerasi hardware

Animasi dengan akselerasi hardware disusun sebagai lapisan dan membantu developer mencapai animasi 60 FPS (frame per detik) yang mulus untuk meningkatkan performa rendering visual. Saat ini ada beberapa cara untuk menentukan dan mengaktifkan animasi dan transisi dengan akselerasi hardware di web:

  • Gunakan fungsi transform CSS atau transisikan nilai opacity atau filter
  • Tambahkan properti will-change ke elemen Anda.
  • Buat gambar kanvas animasi melalui OffscreenCanvas
  • Membuat gambar 3D WebGL
Tim rendering Chromium terus melacak penggunaan properti yang paling beranimasi untuk menentukan langkah berikutnya dalam kaitannya dengan pengaktifan akselerasi hardware. Meskipun properti CSS saat ini yang diakselerasi dengan hardware secara default hanya menyertakan opacity, filter, dan transform untuk saat ini, background-color dan clip-path akan segera bergabung dalam daftar.

Apa lagi yang menjadikan akselerasi hardware meningkat secara default di Chromium? Ada beberapa hal yang akan masuk dalam pipeline, termasuk animasi SVG, sesuatu yang sangat diminta oleh developer.

Animasi SVG dengan akselerasi hardware

SVG adalah tambahan yang bagus untuk situs web apa pun, dan kini interaksi tersebut dengan SVG bisa lebih berperforma tinggi. Mulai Chromium 89, Chrome akan bergabung dengan Firefox untuk mengaktifkan akselerasi hardware secara default pada animasi SVG. Apa yang perlu Anda, sebagai developer, lakukan? Tidak ada—cara ini akan otomatis diterapkan untuk animasi SVG di Chromium 89+.

Contoh

Mari kita lihat perbedaan antara animasi SVG dengan dan tanpa mengaktifkan akselerasi hardware. Indikator pemuatan adalah elemen UI yang biasa digunakan, seperti yang terlihat di facebook.com. Indikator ini mengisyaratkan tugas yang sedang dilakukan di server, sementara pengguna menunggu respons. Pada kasus yang ditampilkan di sini, responsnya adalah memuat hasil tambahan di sidebar.

UI sidebar Facebook menampilkan loader berbentuk lingkaran saat memuat konten tambahan.

Saat membuka DevTools, kita dapat mulai membuat profil dan benar-benar melihat perbedaan antara pengalaman animasi yang dipercepat oleh CPU dan GPU.

Panel performa dengan flash cat diaktifkan
Kiri: Chromium 88. Kanan: Chromium 89, dengan akselerasi hardware untuk animasi SVG. Lihat demo oleh Benoit Girard di JSFiddle.

Anda dapat melihat bahwa di sebelah kiri (Chromium 87), penggambaran ulang terjadi setiap kali indikator lingkaran berputar dianimasikan (yang terus berlanjut). Di sebelah kanan, tidak ada pengecatan ulang (Chromium 89 dan Firefox). Kita dapat menguji ini di panel Rendering DevTools, saat mengaktifkan flash Paint.

Panel performa yang menampilkan rendering
Kiri: Chromium 88. Kanan: Chromium 89, dengan akselerasi hardware untuk animasi SVG. Lihat demo oleh Benoit Girard di JSFiddle.

Setelah melihat panel Performa lebih lanjut, Anda dapat melihat lagi efek ini, dan pengaruhnya terhadap keseluruhan performa properti web. Anda menghindari waktu rendering dan proses menggambar sepenuhnya untuk animasi, yang berarti animasi lebih halus dan aplikasi yang berperforma lebih baik. Meskipun Facebook tidak akan mengirimkan loader berbasis SVG ini hingga dukungan browser untuk SVG dengan akselerasi hardware semakin besar, Facebook akan memungkinkan lebih banyak fleksibilitas dalam hal tema, penskalaan dan persyaratan resolusi, serta pemeliharaan yang lebih mudah.

Animasi persentase

Tim Interactions juga mengirimkan dukungan untuk animasi transformasi persentase di Chromium 89. Animasi berbasis persentase menjelaskan interaksi yang mencakup gerakan berbasis persentase. Misalnya, Anda dapat meningkatkan skala sebesar 20%, atau menggeser menu sidebar responsif dari luar layar menggunakan sesuatu seperti translateX: -100%.

Contoh navigasi dari waze.com, yang menggunakan transformasi persentase untuk membuka dan menyembunyikan menu pada ukuran layar yang lebih kecil.

Jenis animasi UI ini relatif umum, tetapi saat ini tidak memanfaatkan akselerasi hardware karena sebelumnya kami tidak dapat menggabungkan animasi tersebut. Persentase dalam transformasi bergantung pada ukuran kotak (yaitu tata letak), tetapi sekarang, selama ukuran tata letak tidak berubah setiap frame, browser dapat menghitung sebelumnya nilai transformasi absolut dan menjalankannya seolah-olah developer telah memberikan nilai piksel. Kabar baiknya adalah tim Chromium sedang mengerjakan fitur ini, dan dalam waktu dekat, jenis animasi ini akan otomatis digabungkan dan diakselerasi dengan hardware.

Apa yang akan terjadi berikutnya?

Animasi yang diperbarui ini akan membuat gaya web jauh lebih halus. Dan seperti yang disebutkan di atas, tim ini selalu mencari tahu apa kebutuhan web yang akan datang muncul. Saat ini, kita bersiap untuk mengonversi background-color dan clip-path agar otomatis menggunakan akselerasi hardware di Chromium versi mendatang.

background-color menjadi prioritas karena jumlah penggunaannya yang tinggi untuk transisi dan efek, dan clip-path memungkinkan efek transisi berperforma jauh lebih baik di seluruh web. Ketika kinerja bertemu interaktivitas, semua orang menang!

transition.style: situs demo yang menyoroti efek transisi CSS oleh Adam Argyle.

Gambar Sampul: Siora Fotografi untuk Unsplash.