Pengenalan Percepatan Perkakasan dengan Animasi CSS

Dalam beberapa tahun kebelakangan ini, kami sering mendengar tentang pecutan perkakasan dan bagaimana ia membantu meningkatkan animasi di laman web, menjadikannya bagus dan lancar walaupun pada pelayar mudah alih. Tetapi saya fikir banyak pemaju yang kurang berpengalaman tidak tahu bagaimana pecutan perkakasan berfungsi dan bagaimana kita boleh menggunakannya dengan betul untuk membuat animasi kita bersinar.

istilah itu sendiri terdengar seperti sesuatu yang terlalu rumit, dekat dengan matematik yang lebih tinggi. Dalam artikel ini, saya akan memberi sedikit gambaran mengenai subjek ini dan menunjukkan cara menggunakan teknik ini dalam projek front-end anda.

Takeaways Key

Percepatan perkakasan dapat meningkatkan kualiti animasi CSS, menjadikannya lebih lancar dan lebih efisien, terutama pada pelayar mudah alih. Ini dicapai dengan mengimbangi proses rendering ke GPU (unit pemprosesan grafik), yang lebih baik dilengkapi untuk tugas -tugas tersebut.
transformasi CSS adalah sifat mesra GPU yang boleh digunakan untuk mengelakkan operasi mengecat mahal. 'Transformasi Hack' juga boleh digunakan untuk memaksa elemen yang akan diberikan dalam GPU sebelum animasi bermula, dengan itu mencetuskan percepatan perkakasan.
Penggunaan pecutan perkakasan harus dilakukan dengan berhati -hati kerana ia boleh membawa kepada masalah ingatan, terutama pada peranti mudah alih. Ia juga boleh mempengaruhi fon anti-aliasing kerana mekanisme rendering yang berlainan GPU dan CPU.
Harta 'Will-change' telah diperkenalkan untuk memaklumkan penyemak imbas yang akan berubah, supaya penyemak imbas dapat membuat pengoptimuman yang sama terlebih dahulu. Walau bagaimanapun, tidak semua penyemak imbas menyokong harta ini.

mengapa saya perlu peduli?

mari kita lihat contoh animasi mudah yang mengandungi beberapa bola yang disusun di atas satu sama lain (iaitu, pada paksi z, jadi ia kelihatan seperti satu bola). Matlamatnya adalah untuk menggerakkan kumpulan bola ini dengan animasi. Cara paling mudah untuk melakukan ini ialah menyesuaikan sifat kiri dan atas. Kita boleh melakukan ini dengan JavaScript, tetapi kita akan menggunakan animasi CSS sebaliknya. Sila ambil perhatian bahawa saya tidak termasuk mana -mana awalan vendor tetapi anda harus menggunakan sesuatu seperti AutoPrefixer untuk memastikan keserasian penuh.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Berikut adalah demo langsung yang menggunakan butang untuk memulakan animasi dengan JavaScript:

Lihat pena menindih bola yang bertindih dengan sifat atas/kiri oleh SitePoint (@SitePoint) pada codepen.

Selepas mengklik butang "Mula Animasi", anda akan melihat bahawa animasi tidak kelihatan sangat lancar, walaupun pada penyemak imbas desktop. Jika anda menguji animasi pada peranti mudah alih anda, anda akan melihat bahawa ia jauh dari 60fps. Untuk membetulkannya, kita boleh menggunakan transformasi CSS menggunakan fungsi Terjemahan (), bukannya menghidupkan nilai atas dan kiri.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>transform: translate(0, 0);
</span>  <span>}
</span>
  <span>25% {
</span>    <span>transform: translate(200px, 0);
</span>  <span>}
</span>
  <span>50% {
</span>    <span>transform: translate(200px, 200px);
</span>  <span>}
</span>
  <span>75% {
</span>    <span>transform: translate(0, 200px);
</span>  <span>}
</span><span>}</span>

Cuba kod di atas dalam demo di bawah:

Lihat pena menindih bola bertindih dengan CSS Transforms oleh SitePoint (@SitePoint) pada Codepen.

sekarang animasi bagus dan lancar. Hebat! Jadi mengapa ini membantu? Nah, transformasi CSS tidak menyebabkan pengecualian, tidak seperti animasi dengan sifat kiri dan atas. Mari kita lihat panel garis masa di Devtools Chrome semasa pelaksanaan animasi:

Di sebelah kiri dan atas, kita dapat melihat bar hijau pada setiap langkah animasi. Ini adalah operasi semula yang mahal. Kadar bingkai animasi kurang dari 60fps, yang kami selalu bertujuan untuk mencapai animasi lancar.

Sekarang lihat garis masa dalam kes CSS berubah:

seperti yang anda lihat, tidak ada bar hijau semasa animasi.

Satu lagi ciri yang terdapat di DevTools Chrome untuk mengesan proses mengecat adalah "membolehkan cat berkelip". Anda boleh mencari pilihan ini dengan membuka DevTools, memukul kunci ESC, kemudian memilih tab "Rendering". Apabila ciri ini dihidupkan, kotak hijau (iaitu segi empat tepat cat) akan muncul di sekitar kawasan yang dicat semula. Di sebelah kiri dan atas, bola mempunyai kotak hijau untuk keseluruhan proses animasi, yang menunjukkan pengecatan semula.

Sebaliknya, dalam CSS mengubah contoh, segi empat tepat cat hanya dipaparkan pada bingkai animasi pertama dan terakhir.

Jadi bagaimana sebenarnya transformasi menjadikan animasi tanpa mengecat semula? Jawapan asas adalah bahawa transformasi CSS berlaku secara langsung dalam memori GPU

yang menggunakan pecutan perkakasan, yang menghindari rendering perisian. Mari kita lihat ini dengan lebih terperinci.

bagaimana pecutan perkakasan berfungsi

Apabila penyemak imbas menerima markup halaman, ia mengasingkannya untuk membina pokok Dom. Pokok Dom dan CSS membolehkan penyemak imbas membina pokok render. Pokoknya terdiri daripada objek render - unsur -unsur yang akan diberikan pada halaman. Setiap objek render diberikan kepada lapisan grafik. Setiap lapisan dimuat naik ke GPU sebagai tekstur. Caranya di sini adalah bahawa lapisan boleh diubah dalam GPU tanpa mengecat semula, seperti dalam kes grafik 3D. Transformasi ini dibuat oleh proses kompositor yang berasingan. Anda boleh mendapatkan lebih banyak maklumat mengenai komposisi di Chrome di sini.

Dalam contoh kami, transformasi CSS mewujudkan lapisan komposit baru yang boleh diubah secara langsung dalam GPU. Devtools Chrome membolehkan melihat lapisan komposit menggunakan pilihan "Sempadan Layer Show". Setiap lapisan komposit mempunyai sempadan oren.

Bola kami dengan transformasi CSS mempunyai sempadan oren dan dipindahkan ke lapisan komposit yang berasingan:

Pada ketika ini, anda mungkin bertanya: Bilakah penyemak imbas membuat lapisan komposit yang berasingan?

Ia berbuat demikian dalam kes -kes berikut:

untuk transformasi CSS 3D atau perspektif (dalam contoh kami)
untuk atau elemen
semasa menggunakan penapis CSS
untuk elemen yang bertindih elemen lain yang diekstrak ke lapisan komposit (mis., Menggunakan z-indeks)

Anda mungkin berfikir, 'Pegang. Contoh ini menggunakan terjemahan 2D, bukan transformasi 3D '. Dan anda betul. Itulah sebabnya terdapat dua operasi tambahan semula - pada permulaan dan akhir proses animasi dalam garis masa kami.

Perbezaan antara transformasi 3D dan 2D ialah transformasi 3D menjadikan penyemak imbas membuat lapisan komposit yang berasingan terlebih dahulu, manakala 2D transformasi melakukannya dengan cepat. Pada permulaan animasi, lapisan komposit baru dicipta dan tekstur dimuatkan ke GPU, yang memulakan semula. Kemudian animasi dilakukan oleh kompositor dalam GPU. Apabila animasi selesai, lapisan komposit tambahan dikeluarkan, yang mengakibatkan operasi mengecat semula.

Rendering elements dalam GPU

Tidak semua perubahan harta CSS pada unsur -unsur boleh dikendalikan secara langsung dalam GPU. Hanya sifat berikut yang disokong:

Transform

• opacity
• penapis
dan sebagainya untuk memastikan peluang terbaik untuk animasi yang lancar, berkualiti tinggi, kita harus sentiasa cuba menggunakan sifat-sifat mesra GPU ini.

memaksa elemen yang akan diberikan dalam gpu

Dalam kes -kes tertentu, ia mungkin diperlukan untuk menjadikan elemen dalam GPU sebelum animasi telah bermula. Ini membantu mengelakkan operasi mengecat pertama yang disebabkan oleh penciptaan lapisan baru. Untuk mencapai ini, yang disebut "Transform Hack" boleh berguna.

Apa ini adalah membiarkan penyemak imbas tahu bahawa kita mahu melakukan transformasi 3D. Ini menjadikan penyemak imbas membuat lapisan yang berasingan dan gerakkan elemen ke GPU terlebih dahulu, dengan itu mencetuskan percepatan perkakasan.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Teknik ini juga boleh berguna apabila mengecat satu elemen terlalu mahal kerana elemen lain di belakangnya. Mari kita kembali ke contoh pertama, dan sedikit mengubahnya supaya ia mengandungi bola tunggal dan bekas dengan imej latar belakang kabur menggunakan penapis CSS. Bola animasi dengan sifat kiri dan atas.

Lihat pena menghidupkan bola dengan sifat atas/kiri oleh SitePoint (@SitePoint) pada Codepen.

Sekali lagi, pergerakan bola adalah jerky. Ini berlaku kerana setiap kos operasi mengecilkan terlalu banyak kerana latar belakang kabur.

Sekarang mari kita tambahkan hack transform ke bekas.

Lihat pena animasi kiri/sifat atas dengan pecutan perkakasan oleh SitePoint (@SitePoint) pada Codepen.

Hasilnya tidak terlalu buruk dan animasi berfungsi dengan baik. Kenapa? Kerana sekarang latar belakang yang mahal cat kabur dipindahkan ke lapisan komposit lain, dan mengecat bola pada setiap langkah animasi adalah murah.

Gunakan pecutan perkakasan dengan berhati -hati

Tidak ada yang datang secara percuma. Terdapat beberapa isu yang berkaitan dengan pecutan perkakasan.

memori
Isu yang paling penting adalah berkaitan dengan ingatan. Memuatkan terlalu banyak tekstur ke GPU boleh menyebabkan masalah ingatan. Ini benar -benar kritikal pada peranti mudah alih dan bahkan boleh merosakkan pelayar mudah alih. Fikiran akibatnya dan jangan gunakan pecutan perkakasan untuk setiap elemen pada halaman.

font rendering
Rendering dalam GPU mempengaruhi font anti-aliasing. Ini berlaku kerana GPU dan CPU mempunyai mekanisme rendering yang berbeza. Oleh itu, walaupun anda mematikan percepatan perkakasan pada akhir animasi, teks akan dipaparkan kabur semasa animasi. Anda boleh membaca lebih lanjut mengenai isu -isu rendering fon dalam jawatan ini oleh Keith Clark.

masa depan yang dekat

Keperluan untuk menggunakan "Transform Hack" untuk membuat lapisan komposit berasingan adalah rumit. Penyemak imbas pastinya menyediakan cara yang mudah untuk melakukan ini. Itulah sebabnya harta pusaka akan diperkenalkan. Ciri ini membolehkan anda memaklumkan penyemak imbas yang akan berubah, jadi penyemak imbas boleh membuat pengoptimuman yang sama terlebih dahulu. Berikut adalah contoh yang memberitahu penyemak imbas bahawa harta transformasi akan diubah:

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Malangnya, tidak semua penyemak imbas menyokong perubahan. Anda boleh mengetahui lebih lanjut mengenai Will-change dalam sumber-sumber berikut:

• Pengenalan kepada harta CSS akan menukar harta oleh Nick Salloum
• semua yang anda perlu ketahui mengenai harta CSS akan menukar harta oleh Sara Soueidan.

Kesimpulan

untuk meringkaskan apa yang kita dilindungi:

• menggunakan GPU dapat meningkatkan kualiti animasi anda
• animasi yang diberikan GPU hendaklah 60fps pada setiap peranti
• Gunakan sifat CSS yang mesra GPU
• memahami cara memaksa elemen yang akan diberikan dalam GPU menggunakan "Transform Hack".

Jika anda telah menggunakan teknik ini, atau mempunyai maklum balas, sila bebas untuk menawarkan komen anda.

soalan yang sering ditanya mengenai pecutan perkakasan dan animasi CSS

Apakah peranan GPU dalam animasi CSS yang dipercepatkan perkakasan? Ia bertanggungjawab untuk memberikan grafik dan pemprosesan imej. Apabila animasi CSS dipercepatkan perkakasan, GPU mengambil alih tugas memberikan animasi dari unit pemprosesan pusat (CPU). Ini menghasilkan animasi yang lebih lancar, lebih cepat, dan lebih cekap kerana GPU direka khusus untuk mengendalikan tugas -tugas tersebut. animasi CSS dengan mengimbangi beberapa tugas pemprosesan grafik dari CPU ke GPU. Ini membolehkan CPU memberi tumpuan kepada tugas -tugas lain, dengan itu meningkatkan prestasi keseluruhan laman web atau aplikasi. Di samping itu, GPU lebih baik dilengkapi untuk mengendalikan tugas grafik, menghasilkan animasi yang lebih lancar dan lebih cekap. Boleh meningkatkan prestasi, terdapat kelemahan yang berpotensi. Salah satu kebimbangan utama ialah isu keserasian. Tidak semua peranti atau pelayar menyokong pecutan perkakasan, yang boleh membawa kepada pengalaman pengguna yang tidak konsisten. Di samping itu, berlebihan pecutan perkakasan boleh menyebabkan peningkatan penggunaan kuasa, yang boleh menjadi kebimbangan untuk peranti mudah alih. boleh dilakukan dengan menggunakan harta 'Transform' dalam kod CSS anda. Harta ini mencetuskan GPU untuk mengambil alih penyerahan animasi. Sebagai contoh, anda boleh menggunakan 'Transform: TranslateZ (0)' atau 'Transform: Putar (0Deg)' untuk membolehkan pecutan perkakasan. > Animasi CSS yang melibatkan tugas grafik yang kompleks, seperti transformasi 3D, peralihan, dan animasi kerangka utama, boleh mendapat manfaat daripada pecutan perkakasan. Tugas-tugas ini boleh menjadi intensif sumber apabila dikendalikan oleh CPU, tetapi GPU dapat memprosesnya dengan lebih efisien, menghasilkan animasi yang lebih lancar. 🎜> Untuk memastikan keserasian apabila menggunakan animasi CSS yang dipercepatkan perkakasan, penting untuk menguji laman web atau aplikasi anda pada pelbagai peranti dan penyemak imbas. Anda juga boleh menggunakan sandaran dalam kod CSS anda untuk menyediakan animasi alternatif untuk peranti atau penyemak imbas yang tidak menyokong pecutan perkakasan.

Bolehkah pecutan perkakasan digunakan dengan peralihan CSS?

Ya, percepatan perkakasan boleh digunakan dengan peralihan CSS. Dengan menggunakan harta 'Transform', anda boleh mencetuskan GPU untuk menjadikan peralihan, menghasilkan animasi yang lebih lancar dan lebih cekap. Walaupun pecutan perkakasan dapat meningkatkan prestasi animasi CSS, ia juga dapat meningkatkan penggunaan kuasa, yang berpotensi mempengaruhi hayat bateri pada peranti mudah alih. Adalah penting untuk menyeimbangkan antara prestasi dan penggunaan kuasa apabila menggunakan pecutan perkakasan.

Bolehkah saya menggunakan pecutan perkakasan untuk animasi 2D? Dengan menggunakan harta 'Transform' dalam kod CSS anda, anda boleh mencetuskan GPU untuk menjadikan animasi, menghasilkan animasi yang lebih lancar dan lebih cekap. >

Mengoptimumkan kod CSS anda untuk pecutan perkakasan melibatkan menggunakan harta 'transform' untuk mencetuskan GPU untuk memberikan animasi. Ia juga penting untuk mengelakkan pecutan perkakasan yang terlalu banyak, kerana ini boleh menyebabkan peningkatan penggunaan kuasa. Di samping itu, menguji laman web atau aplikasi anda pada pelbagai peranti dan pelayar dapat membantu memastikan keserasian.

Atas ialah kandungan terperinci Pengenalan Percepatan Perkakasan dengan Animasi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!