Update kemampuan animasi dengan akselerasi hardware

Una Kravets

Twitter Mastodon Halaman beranda

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

Jika menyangkut performa animasi web, istilah animasi "diakselerasi hardware" dan "diakselerasi GPU" mungkin akan muncul. Tapi, apa artinya? Gaya yang diakselerasi 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 berarti visual yang lebih halus dan lebih sedikit jank, karena animasi ini tidak terpengaruh oleh thread utama. Dengan menariknya dari thread utama, animasi Anda akan mengabaikan kulit skrip aktif lain yang berjalan di halaman, yang akan memperlambat visual dan membuat jank.

Mengaktifkan animasi dengan akselerasi hardware

Animasi yang diakselerasi hardware digabungkan sebagai lapisan dan membantu developer mendapatkan animasi 60 FPS (frame per detik) yang sangat halus 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 animasi gambar kanvas melalui OffscreenCanvas
• Membuat gambar 3D WebGL

Tim rendering Chromium terus melacak penggunaan properti yang paling dianimasikan untuk menentukan apa yang harus dilakukan berikutnya terkait pengaktifan akselerasi hardware. Sementara properti CSS saat ini yang mengaktifkan akselerasi hardware secara default hanya menyertakan opacity, filter, dan transform untuk saat ini, background-color dan clip-path akan segera bergabung dalam daftar.

Hal apa lagi yang menjadi akselerasi hardware akselerasi secara default di Chromium? Ada beberapa hal yang akan diproses, 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 dengan SVG dapat berperforma lebih baik. Mulai Chromium 89, Chrome akan bergabung dengan Firefox untuk mengaktifkan akselerasi hardware secara default pada animasi SVG. Apa yang perlu Anda, developer, lakukan? Tidak ada—hal 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 umum digunakan, seperti yang terlihat di facebook.com. Indikator ini mengisyaratkan bahwa pekerjaan sedang dilakukan di server, saat pengguna menunggu respons. Dalam kasus yang ditampilkan di sini, responsnya adalah memuat hasil tambahan di sidebar.

UI sidebar Facebook menampilkan loader melingkar saat memuat konten tambahan.

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

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), pengecatan ulang terjadi setiap kali indikator lingkaran berputar bergerak (yang secara terus-menerus). Di sebelah kanan tidak ada pengecatan ulang (Chromium 89 dan Firefox). Kita dapat mengujinya di panel Rendering DevTools, saat mengaktifkan Paint flashing.

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

Dengan melihat lebih dekat panel Performa, Anda dapat melihat lagi efek ini, dan pengaruhnya terhadap keseluruhan performa properti web Anda. Anda menghindari waktu rendering dan proses menggambar sepenuhnya untuk animasi, yang berarti animasi akan lebih halus dan aplikasi yang berperforma lebih baik. Meskipun Facebook tidak akan mengirimkan loader berbasis SVG ini hingga dukungan browser untuk SVG akselerasi hardware lebih besar, Facebook akan memberikan fleksibilitas yang lebih besar dalam hal penentuan tema, penskalaan dan resolusi, dan 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 alat 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 langkah selanjutnya?

Animasi yang diperbarui ini akan membuat penataan gaya web jauh lebih halus. Dan seperti yang disebutkan di atas, tim selalu mencari tahu kebutuhan web yang akan datang muncul. Saat ini, kami dijadwalkan 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 dengan performa yang jauh lebih baik di seluruh web. Saat kinerja bertemu interaktivitas, semua orang menang!

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

Gambar Sampul: Siora Fotografi untuk Unsplash.