Ringkasan metode penerapan efek rentetan di front end (termasuk metode penerapan css3 dan kanvas)

Dulu, di halaman togel seluler, jendela tampilan hasil togel diperlukan untuk menampilkan carousel rentetan. Saya telah melalui beberapa kendala sebelumnya. Sekarang saya akan merangkum cara mencapai efek rentetan front-end.

• css3 mengimplementasikan rentetan versi pengemis
• optimasi kinerja rentetan css3
• kanvas mengimplementasikan rentetan
• Fungsi rentetan kanvas yang diperluas

Pertama, mari kita lihat cara mengimplementasikan serangan paling sederhana melalui CSS:

Pertama tentukan struktur dom rentetan dalam HTML:

 <div class=block>Saya Danmaku</div>

Pergerakan rentetan dapat dilakukan dengan menggerakkan balok ini. Ambil contoh rentetan bergerak dari kanan ke kiri, posisi awal rentetan berada di sisi paling kiri wadah dan ujungnya tersembunyi (sisi paling kiri dari wadah). rentetan sama dengan sisi paling kanan wadah). Pemasangan) dapat dicapai dengan pemosisian absolut dan transformasi:

 .block{ posisi:mutlak;}

Posisi awal:

 dari{ kiri:100%; transformasi:translateX(0)}

Posisi akhir perpindahan ke paling kiri adalah (sisi paling kanan rentetan sejajar dengan sisi paling kiri wadah):

 ke{ kiri:0; transformasi:translateX(-100%)}

Ilustrasi spesifik posisi awal dan posisi akhir adalah sebagai berikut:

Animasi rentetan dua bingkai lengkap dapat ditentukan berdasarkan posisi awal dan posisi akhir:

 @keyframes rentetan{ dari{ kiri:100%; transform:translateX(0);

Perkenalkan animasi ini ke elemen rentetan:

 .block{ position:absolute; /* gaya dekorasi lainnya */ animation:barrage 5s linear 0s;}

Dengan cara ini, efek rentetan versi pengemis dapat dicapai:

Pertama, mari kita perjelas proses rendering css

I) Menghasilkan pohon DOM berdasarkan struktur HTML (pohon DOM berisi display:none node) II) Berdasarkan pohon DOM, menghasilkan pohon render berdasarkan atribut geometris dari node (margin/padding/width/height /kiri, dll.) III) Lanjutkan merender atribut seperti warna dan font berdasarkan pohon render

Jika properti pada I) dan II) berubah maka akan terjadi reflow. Jika hanya properti pada III) saja yang berubah maka yang terjadi hanyalah repaint. Tentunya kita juga bisa melihat dari proses rendering CSS: reflow harus disertai dengan redrawing.

reflow (reflow): Ketika sebagian atau seluruh pohon render berubah karena ukuran, margin, dll., prosesnya perlu dibangun kembali. Pengecatan ulang (redraw): Ketika beberapa atribut elemen berubah, seperti tampilan dan warna latar belakang , tidak akan menyebabkan layout. Proses rendering ulang karena adanya perubahan disebut menggambar ulang

Reflow akan mempengaruhi kecepatan rendering CSS browser, sehingga ketika mengoptimalkan kinerja halaman web, perlu untuk mengurangi terjadinya reflow.

Di bagian pertama, kita menggunakan atribut kiri untuk mencapai efek rentetan. Kiri akan mengubah tata letak elemen, sehingga terjadi reflow, yang akan menyebabkan animasi rentetan berhenti di halaman seluler.

Kami telah menemukan bahwa animasi rentetan di bagian pertama memiliki masalah macet. Mari kita lihat cara mengatasi animasi macet.

Gunakan CSS untuk mengaktifkan akselerasi perangkat keras di browser dan gunakan GPU (Graphics Processing Unit) untuk meningkatkan kinerja halaman web. Mengingat hal ini, kita dapat menggunakan kekuatan GPU untuk membuat kinerja situs web atau aplikasi kita lebih lancar.

Animasi, transformasi, dan transisi CSS tidak secara otomatis mengaktifkan akselerasi GPU, namun dilakukan oleh mesin rendering perangkat lunak browser yang lambat. Jadi bagaimana kita bisa beralih ke mode GPU? Banyak browser menyediakan aturan CSS tertentu yang dipicu.

Cara yang lebih umum adalah kita dapat mengaktifkan akselerasi perangkat keras melalui perubahan 3D (atribut translate3d).

 @keyframes rentetan{ dari{ kiri:100%; transform:translate3d(0,0,0 } ke{ kiri:0; transform:translate3d(-100%,0,0 }}

Dengan cara ini, Anda dapat mengoptimalkan kinerja halaman web dengan mengaktifkan akselerasi perangkat keras. Namun, metode ini tidak menyelesaikan masalah secara mendasar. Pada saat yang sama, penggunaan GPU meningkatkan penggunaan memori, yang akan mengurangi masa pakai baterai perangkat seluler dan sebagainya.

(2) Jangan mengubah atribut kiri

Cara kedua adalah mencari cara agar tidak mengubah nilai atribut left sebelum dan sesudah animasi rentetan, sehingga tidak terjadi reflow.

Kami ingin menentukan posisi awal node rentetan hanya melalui TranslateX, tetapi TranslateX(-100%) relatif terhadap node rentetan itu sendiri, bukan ke elemen induk, jadi kami memasangkan js dan css untuk mendapatkan lebar rentetan di js elemen induk tempat node berada, kemudian posisi awal node rentetan ditentukan berdasarkan lebarnya.

Ambil contoh ketika elemen induknya adalah body:

 //css .block{ posisi:absolute; kiri:0; visibilitas:tersembunyi; /* gaya dekorasi lainnya */ animasi:rentetan 5 detik linier;}//jslet style = document.createElement('style');document.head .appendChild(style);biarkan lebar = window.innerWidth;biarkan dari = `dari { visibilitas: terlihat -webkit-transform: TranslateX(${width}px); }`;biarkan ke = `ke { visibilitas: terlihat; -webkit-transform: TranslateX(-100%);style.sheet.insertRule(`@-webkit-keyframes rentetan { ${dari} ${ke} }`, 0);

Selain menggabungkan js untuk menghitung lebar elemen induk untuk menentukan posisi awal node rentetan, untuk mencegah posisi awal ditampilkan di node rentetan, kami menambahkan atribut visibilitas: tersembunyi. Cegah node rentetan ditampilkan di wadah induk sebelum posisi awal ditentukan. Rentetan hanya akan terlihat jika mulai bergulir dari posisi awalnya.

Namun metode implementasi CSS ini lebih merepotkan dalam mewujudkan fungsi lanjutan dari rentetan, seperti cara mengontrol jeda rentetan dan sebagainya.

Selain metode mewujudkan rentetan melalui css, rentetan juga dapat diwujudkan melalui kanvas.

Prinsip penerapan rentetan melalui kanvas adalah menggambar ulang teks dari waktu ke waktu. Mari kita terapkan langkah demi langkah.

Dapatkan kanvas

 biarkan kanvas = document.getElementById('kanvas'); biarkan ctx = kanvas.getContext('2d');

Menggambar teks

 ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = '#000000'; ctx.fillText('kanvas menggambar teks', x, y);

FillText di atas adalah API utama untuk mencapai efek rentetan, di mana x mewakili koordinat horizontal dan y mewakili koordinat vertikal Selama x dan y diubah dari waktu ke waktu dan digambar ulang, efek rentetan dinamis dapat dicapai. Salin kode

Hapus konten gambar

 ctx.clearRect(0, 0, lebar, tinggi);

Melalui pengatur waktu, x, y diubah secara berkala Sebelum setiap perubahan, layar dibersihkan terlebih dahulu, lalu digambar ulang berdasarkan x, y yang diubah. Jika terdapat beberapa serangan, tentukan:

 let colorArr=_this.getColor(color); Array warna yang sesuai dengan array rentetan let numArrL=_this.getLeft(); Array posisi koordinat x yang sesuai dengan array rentetan let numArrT=_this.getTop(); Array posisi koordinat y yang sesuai let speedArr=_this.getSpeed(); Array kecepatan gerak rentetan yang sesuai dengan array rentetan

Fungsi rentetan gambar ulang terjadwal adalah:

 _this.timer=setInterval(function(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); for(let j=0;j<barrageList.length;j++){ numArrL [j]-=speedArr[j]; ctx.fillStyle = warnaArr[j] ctx.fillText(barrageList[j],numArrL[j],numArrT[j]); ctx.restore();

Efek yang dicapai adalah:

Menerapkan serangan melalui kanvas sangat nyaman untuk fungsi tambahan seperti menjeda pengguliran rentetan. Selain itu, Anda juga dapat menambahkan avatar ke rentetan, menambahkan batas ke setiap rentetan, dan fungsi lainnya, yang akan ditambahkan nanti.

Terakhir, berikan komponen react rentetan sederhana; https://github.com/forthealllight/react-barrage

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.