ก่อนหน้านี้ ในหน้าลอตเตอรีบนมือถือ หน้าต่างแสดงผลลอตเตอรีที่จำเป็นในการแสดงภาพหมุนเขื่อน ฉันเคยผ่านข้อผิดพลาดบางประการมาก่อน ตอนนี้ฉันจะสรุปวิธีการบรรลุเอฟเฟกต์เขื่อนกั้นน้ำ
ขั้นแรก มาดูวิธีการใช้เขื่อนกั้นน้ำที่ง่ายที่สุดผ่าน CSS:
ขั้นแรกให้กำหนดโครงสร้าง dom ของเขื่อนกั้นน้ำใน HTML:
<div class=block>ฉันคือดันมาคุ</div>
การเคลื่อนที่ของเขื่อนสามารถทำได้โดยการเคลื่อนย้ายบล็อกนี้ โดยยกตัวอย่างเขื่อนกั้นน้ำที่เคลื่อนที่จากขวาไปซ้ายเป็นตัวอย่าง ตำแหน่งเริ่มต้นของเขื่อนจะอยู่ที่ด้านซ้ายสุดของคอนเทนเนอร์และซ่อนอยู่ตามขอบ (ด้านซ้ายสุดของ เขื่อนกั้นน้ำจะเหมือนกับด้านขวาสุดของคอนเทนเนอร์) ซึ่งสามารถทำได้โดยการวางตำแหน่งและการแปลงแบบสัมบูรณ์:
.block{ ตำแหน่ง:สัมบูรณ์;}ตำแหน่งเริ่มต้น:
จาก { ซ้าย: 100%; แปลง: แปล X (0)}ตำแหน่งท้ายสุดของการเคลื่อนไปทางซ้ายสุดคือ (ด้านขวาสุดของเขื่อนกั้นน้ำอยู่ในแนวเดียวกับด้านซ้ายสุดของตู้คอนเทนเนอร์):
ถึง { ซ้าย: 0; แปลง: แปล X (-100%)}ภาพประกอบเฉพาะของตำแหน่งเริ่มต้นและตำแหน่งสิ้นสุดมีดังนี้:
ภาพเคลื่อนไหวเขื่อนกั้นน้ำแบบสองเฟรมที่สมบูรณ์สามารถกำหนดได้ตามตำแหน่งเริ่มต้นและตำแหน่งสิ้นสุด:
@keyframes เขื่อนกั้นน้ำ{ จาก{ ซ้าย:100%; แปลงร่าง:translateX(0); } ถึง{ ซ้าย:0;แนะนำภาพเคลื่อนไหวนี้ให้กับองค์ประกอบเขื่อนกั้นน้ำ:
.block{ ตำแหน่ง:สัมบูรณ์; /* สไตล์การตกแต่งอื่น ๆ */ แอนิเมชั่น:barrage 5s เชิงเส้น 0s;}ด้วยวิธีนี้ เอฟเฟกต์เขื่อนกั้นน้ำแบบขอทานสามารถทำได้:
ก่อนอื่น เรามาทำความเข้าใจกระบวนการเรนเดอร์ของ CSS กันก่อน
I) สร้างแผนผัง DOM ตามโครงสร้างของ HTML (แผนผัง DOM มีจอแสดงผล:ไม่มีโหนด) II) ตามแผนผัง DOM สร้างแผนผังการแสดงผลตามคุณลักษณะทางเรขาคณิตของโหนด (ระยะขอบ/ช่องว่างภายใน/ความกว้าง/ความสูง /left ฯลฯ) III) ดำเนินการเรนเดอร์แอตทริบิวต์ เช่น สีและฟอนต์ตามแผนผังการเรนเดอร์ต่อไป
หากคุณสมบัติใน I) และ II) เปลี่ยนแปลง การรีโฟลว์จะเกิดขึ้น หากเพียงคุณสมบัติใน III) เปลี่ยนไป จะมีการทาสีใหม่เท่านั้น แน่นอนว่าเราสามารถเห็นได้จากกระบวนการเรนเดอร์ CSS: การรีโฟลว์จะต้องมาพร้อมกับการวาดใหม่
การจัดเรียงใหม่: เมื่อบางส่วนหรือทั้งหมดของแผนผังการเรนเดอร์เปลี่ยนแปลงเนื่องจากขนาด ระยะขอบ ฯลฯ กระบวนการจำเป็นต้องได้รับการทาสีใหม่: เมื่อคุณลักษณะบางอย่างขององค์ประกอบเปลี่ยนแปลง เช่น ลักษณะที่ปรากฏและสีพื้นหลัง เค้าโครงจะไม่เป็นเช่นนั้น กระบวนการเรนเดอร์ใหม่เนื่องจากการเปลี่ยนแปลงเรียกว่าการวาดใหม่
การจัดเรียงใหม่จะส่งผลต่อความเร็วในการเรนเดอร์ของ CSS ของเบราว์เซอร์ ดังนั้นเมื่อเพิ่มประสิทธิภาพหน้าเว็บ จำเป็นต้องลดการเกิดการจัดเรียงใหม่
ในส่วนแรก เราใช้แอตทริบิวต์ด้านซ้ายเพื่อให้ได้เอฟเฟกต์ของเขื่อนกั้นน้ำ ด้านซ้ายจะเปลี่ยนเค้าโครงขององค์ประกอบ ดังนั้นการจัดเรียงใหม่จะเกิดขึ้น ซึ่งจะทำให้ภาพเคลื่อนไหวของเขื่อนกั้นน้ำหยุดนิ่งบนเพจมือถือ
2. การเพิ่มประสิทธิภาพเขื่อน CSS3เราได้ค้นพบว่าแอนิเมชั่นเขื่อนกั้นน้ำในส่วนแรกมีปัญหาค้าง มาดูวิธีแก้ปัญหาแอนิเมชั่นที่ค้างอยู่
(1) CSS เปิดการเร่งด้วยฮาร์ดแวร์ใช้ CSS เพื่อเปิดใช้งานการเร่งด้วยฮาร์ดแวร์ในเบราว์เซอร์ และใช้ GPU (หน่วยประมวลผลกราฟิก) เพื่อปรับปรุงประสิทธิภาพหน้าเว็บ ด้วยเหตุนี้ เราจึงสามารถใช้พลังของ GPU เพื่อทำให้เว็บไซต์หรือแอปพลิเคชันของเราทำงานได้อย่างราบรื่นยิ่งขึ้น
ภาพเคลื่อนไหว การแปลง และการเปลี่ยนภาพ CSS ไม่ได้เปิดใช้งานการเร่งความเร็ว GPU โดยอัตโนมัติ แต่ดำเนินการโดยกลไกการเรนเดอร์ซอฟต์แวร์ที่ช้าของเบราว์เซอร์ แล้วเราจะเปลี่ยนไปใช้โหมด GPU ได้อย่างไร เบราว์เซอร์จำนวนมากมีกฎ CSS ที่ทริกเกอร์ไว้
วิธีทั่วไปคือเราสามารถเปิดการเร่งความเร็วด้วยฮาร์ดแวร์ผ่านการเปลี่ยนแปลง 3 มิติ (แอตทริบิวต์ translate3d) ด้วยเหตุนี้ เราจึงปรับเปลี่ยนภาพเคลื่อนไหวเป็น:
@keyframes เขื่อนกั้นน้ำ{ จาก{ ซ้าย:100%;ด้วยวิธีนี้ คุณสามารถเพิ่มประสิทธิภาพการทำงานของหน้าเว็บได้โดยเปิดการเร่งด้วยฮาร์ดแวร์ อย่างไรก็ตาม วิธีการนี้ไม่สามารถแก้ปัญหาได้ในระดับพื้นฐาน ขณะเดียวกัน การใช้ GPU จะเพิ่มการใช้หน่วยความจำ ซึ่งจะทำให้อายุการใช้งานแบตเตอรี่ของอุปกรณ์เคลื่อนที่ลดลง เป็นต้น
(2) อย่าเปลี่ยนแอตทริบิวต์ด้านซ้าย
วิธีที่สองคือการหาวิธีที่จะไม่เปลี่ยนค่าของแอตทริบิวต์ด้านซ้ายก่อนและหลังแอนิเมชันเขื่อนกั้นน้ำ เพื่อไม่ให้เกิดการจัดเรียงใหม่
เราต้องการกำหนดตำแหน่งเริ่มต้นของโหนดเขื่อนกั้นน้ำผ่าน TranslateX เท่านั้น แต่ TranslateX(-100%) นั้นสัมพันธ์กับโหนดเขื่อนกั้นน้ำเอง ไม่ใช่กับองค์ประกอบพาเรนต์ ดังนั้นเราจึงจับคู่ js และ css เพื่อให้ได้เขื่อนกั้นน้ำใน js ความกว้าง ขององค์ประกอบหลักที่โหนดตั้งอยู่ จากนั้นตำแหน่งเริ่มต้นของโหนดเขื่อนจะถูกกำหนดตามความกว้าง
ยกตัวอย่างเมื่อองค์ประกอบหลักคือเนื้อหา:
//css .block{ ตำแหน่ง:สัมบูรณ์; ซ้าย:0; การมองเห็น:ซ่อน; .appendChild(style);let width = window.innerWidth;let from = `จาก { การมองเห็น: มองเห็นได้; -webkit-transform: TranslateX(${width}px); }`;let to = { การมองเห็น: มองเห็นได้; -webkit-transform: แปลX(-100%); }`;style.sheet.insertRule(`@-webkit-keyframes barrage { ${จาก} ${ถึง} }`, 0);นอกเหนือจากการเชื่อมโยง js เพื่อคำนวณความกว้างขององค์ประกอบหลักเพื่อกำหนดตำแหน่งเริ่มต้นของโหนดเขื่อนกั้นน้ำแล้ว เพื่อป้องกันไม่ให้ตำแหน่งเริ่มต้นแสดงในโหนดเขื่อนกั้นน้ำ เราได้เพิ่มแอตทริบิวต์การมองเห็น:ซ่อนไว้ ป้องกันไม่ให้โหนดเขื่อนแสดงในคอนเทนเนอร์หลักก่อนที่จะกำหนดตำแหน่งเริ่มต้น เขื่อนจะมองเห็นได้ก็ต่อเมื่อมันเริ่มเลื่อนจากตำแหน่งเริ่มต้นเท่านั้น
อย่างไรก็ตาม วิธีการนำ CSS ไปใช้นี้ยุ่งยากกว่าในการตระหนักถึงฟังก์ชันเพิ่มเติมของเขื่อนกั้นน้ำ เช่น วิธีควบคุมการหยุดชั่วคราวของเขื่อนกั้นน้ำ เป็นต้น
3. ผ้าใบดำเนินการเขื่อนกั้นน้ำนอกเหนือจากวิธีการรับรู้เขื่อนกั้นน้ำผ่าน CSS แล้ว เขื่อนกั้นน้ำยังสามารถรับรู้ผ่านผืนผ้าใบได้อีกด้วย
หลักการของการตระหนักถึงการโจมตีผ่านผืนผ้าใบคือการวาดข้อความใหม่เป็นครั้งคราว
รับผ้าใบ
ให้ canvas = document.getElementById('canvas'); ให้ ctx = canvas.getContext('2d');วาดข้อความ
ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = '#000000'; ctx.fillText('ผ้าใบวาดข้อความ', x, y);fillText ด้านบนเป็น API หลักเพื่อให้ได้เอฟเฟกต์เขื่อนกั้นน้ำ โดยที่ x แทนพิกัดแนวนอน และ y แทนพิกัดแนวตั้ง ตราบใดที่ x และ y มีการเปลี่ยนแปลงเป็นครั้งคราวและวาดใหม่ คุณก็สามารถสร้างเอฟเฟกต์เขื่อนกั้นน้ำแบบไดนามิกได้ คัดลอกรหัส
ล้างเนื้อหาการวาดภาพ
ctx.clearRect(0, 0, กว้าง, สูง);การดำเนินการเฉพาะ
เมื่อเวลาผ่านไป x, y จะถูกเปลี่ยนอย่างสม่ำเสมอ ก่อนการเปลี่ยนแปลงแต่ละครั้ง หน้าจอจะถูกล้างก่อน จากนั้นจึงวาดใหม่ตามค่า x, y ที่เปลี่ยนแปลง เมื่อมีเขื่อนกั้นน้ำหลายแห่ง ให้นิยาม:
la colorArr=_this.getColor(color); อาร์เรย์สีที่สอดคล้องกับอาร์เรย์ barrage ให้ numArrL=_this.getLeft(); อาร์เรย์ตำแหน่งพิกัด x ที่สอดคล้องกับอาร์เรย์ barrage ให้ numArrT=_this.getTop(); อาร์เรย์ตำแหน่งพิกัด y ที่สอดคล้องกันให้ speedArr=_this.getSpeed(); อาร์เรย์ความเร็วในการเคลื่อนที่ของเขื่อนที่สอดคล้องกับอาร์เรย์ของเขื่อน
ฟังก์ชั่นเขื่อนกั้นน้ำตามกำหนดการคือ:
_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.fillText(เขื่อนกั้นน้ำ[j],numArrL[j],numArrT[j]); ctx.restore( },16.7);ผลที่ได้คือ:
วิธีการติดตั้ง Barrage ผ่าน Canvas นั้นสะดวกมากสำหรับฟังก์ชั่นเพิ่มเติม เช่น การหยุดการเลื่อน Barrage ชั่วคราว นอกจากนี้คุณยังสามารถเพิ่มอวตารให้กับ Barrage เพิ่มขอบเขตให้กับแต่ละ Barrage และฟังก์ชั่นอื่น ๆ ซึ่งจะถูกเพิ่มในภายหลัง
สุดท้าย ให้ส่วนประกอบเขื่อนตอบสนองอย่างง่าย https://github.com/forthealllight/react-barrage
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network