เมื่อเร็ว ๆ นี้ฉันเห็นแอนิเมชั่นกริดอนุภาคที่น่าตื่นตาตื่นใจมากและฉันก็ทำมันและมันก็ค่อนข้างดีเหมือนพื้นหลัง CSDN ไม่สามารถอัปโหลดรูปภาพมากกว่า 2M ได้ดังนั้นเพียงแค่ตัดภาพคงที่:
ให้เริ่มพูดวิธีการบรรลุผลนี้:
ก่อนอื่นแน่นอนเพิ่มผืนผ้าใบ:
<canvas id = canvas> </anvas>
สไตล์ต่อไปนี้:
<style> #canvas {ตำแหน่ง: Absolute;บทบาทของ Z -index: -1 ของผืนผ้าใบด้านบนคือมันสามารถวางไว้ใต้พื้นหลังขององค์ประกอบบางอย่าง
เพื่อให้แน่ใจว่าผ้าใบสามารถเติมได้ด้วยเบราว์เซอร์ทั้งหมดจำเป็นต้องตั้งค่าความสูงของผืนผ้าใบให้เป็นเช่นเดียวกับเบราว์เซอร์:
ฟังก์ชั่น getsize () {w = canvas.width = window.innerWidth;W และ H ข้างต้นแสดงถึงความกว้างของเบราว์เซอร์
รับความกว้างของเบราว์เซอร์และขั้นตอนต่อไปคือการวาดอนุภาค
var opt = {particleamount: 50, // จำนวนอนุภาค defaultspeed: 1, // ตัวแปรความเร็วการเคลื่อนไหวของอนุภาค: 1, // ตัวแปรของความเร็วในการเคลื่อนไหวของอนุภาค: RGB (32,245,245), // สีของอนุภาคอนุภาค LINECOLOR: RGB (32,245,245), // สีของ defaultradius การเชื่อมต่อกริด: 2, // รัศมีของอนุภาค Variantradius: 2, // ตัวแปรของรัศมีอนุภาค Mindistance: 200 // ระยะห่างต่ำสุดระหว่างอนุภาค};ตัวแปรความเร็วและตัวแปรรัศมีด้านบนคือเพื่อให้แน่ใจว่าขนาดและความเร็วของอนุภาคไม่เหมือนกันอย่างแน่นอน
จากนั้นเราสร้างคลาสเพื่อเริ่มต้นอนุภาค
ฟังก์ชั่น partical () {this.x = math.random ()*w; .Speed = OptionSpeed + Opt.Variantspeed*Math.random (); color = opt.particlecolor; ), // ความเร็วของอนุภาคที่ x -axis y: this.speed * math.sin (this.directionangle) // ความเร็วของอนุภาคที่ y -axis} this.update = function () {// ฟังก์ชั่นการอัพเดทอนุภาค this.border (); Moment.y += this.vector.y; (this.x> = w || this.x <= 0) {// หมายเลขลบ this.vector.x *= -1;} ถ้า (this.y> = h || this.y <= 0) {// ถ้าถึงเส้นขอบด้านบนและล่างให้สร้างความเร็วของ y -axis เป็นจำนวนลบดั้งเดิมนี้. vector.y *= -1;} ถ้า (this.x> w) {// ต่อไปนี้ การทำงานของการเปลี่ยนหน้าต่างเบราว์เซอร์ในขนาดของขนาดและอนุภาคบางอย่างหลังจากขนาดของหน้าต่างจะถูกซ่อน if (this.x <0) {this.x = 0;} if (this.y <0) {this.yy = 0;} this.draw = function () {// วาดฟังก์ชั่นของอนุภาค ctx betterpath ();1. ความเร็วและมุมเริ่มต้นของแต่ละอนุภาคถูกสร้างขึ้นแบบสุ่มและสีของอนุภาคจะถูกกำหนดโดยตัวเลือกการตั้งค่าที่เกี่ยวข้อง
2. Vector นี้ใช้เพื่อเก็บทิศทางการเคลื่อนไหวของอนุภาค: ถ้า this.vector.x คือ 1 อนุภาคจะเคลื่อนที่ไปทางขวา; ในทำนองเดียวกันถ้า this.vector.y เป็นลบอนุภาคจะเลื่อนขึ้นไปและถ้ามันเป็นบวกอนุภาคจะเคลื่อนที่ลง
สิ่งนี้ update ใช้เพื่ออัปเดตพิกัดของตำแหน่งถัดไปของแต่ละอนุภาค ขั้นแรกการตรวจจับขอบจะดำเนินการ
3. การซูมหน้าต่างอาจทำให้อนุภาคเกินขอบเขตเพื่อให้ฟังก์ชั่นการตรวจจับขอบไม่สามารถจับได้ดังนั้นชุดของคำสั่งหากจำเป็นต้องตรวจจับสถานการณ์นี้และรีเซ็ตตำแหน่งของอนุภาคไปยังขอบเขตผืนผ้าใบปัจจุบัน
4. วาดจุดเหล่านี้บนผืนผ้าใบในขั้นตอนสุดท้าย
อนุภาคของอนุภาคถูกเขียนขึ้นและเขาจะวาดเขาด้านล่าง:
ฟังก์ชั่น init () {getSize ();การเริ่มต้นของ Opt.particalAmount มีวัตถุอนุภาคซึ่งเริ่มต้นวัตถุ แต่ไม่ได้วาด
ฟังก์ชั่นลูป () {ctx.clearrect (0,0, w, h); draw ();} window.requestanimationframe (วน);}ทุกครั้งที่มีการดำเนินการฟังก์ชั่นลูป () เนื้อหาบนผืนผ้าใบจะถูกลบออกและจากนั้นพิกัดอนุภาคจะถูกคำนวณใหม่ผ่านฟังก์ชันการอัปเดต () ของวัตถุอนุภาคและอนุภาคจะถูกดึงผ่านฟังก์ชันการวาด () ของวัตถุอนุภาค ต่อไปนี้เป็นเอฟเฟกต์ในเวลานี้:
อย่างไรก็ตามหลังจากขนาดของหน้าต่างเบราว์เซอร์เปลี่ยนไปบางอนุภาคจะหายไปในเวลานี้คุณต้องเพิ่มเหตุการณ์เพื่อตรวจสอบว่าขนาดของเบราว์เซอร์เปลี่ยนไปหรือไม่:
window.addeventListener (ปรับขนาดฟังก์ชัน () {winResize ()}, false);จากนั้นคุณต้องเขียนฟังก์ชั่น Winresize () และการใช้งานมากขึ้นคุณสามารถทดสอบได้ที่นี่คุณสามารถพูดได้โดยตรง ขนาดเบราว์เซอร์
var particlle = [], w, h; ความสูงมีการแนะนำ} ล่าช้า)} ที่ด้านบนของบทความ
ด้วยวิธีนี้แอนิเมชั่นอนุภาคทั้งหมดเสร็จสิ้นแล้วเราสามารถวาดเส้นแบ่งระหว่างอนุภาคได้ จะวาดระหว่างพวกเขา
ดังนั้นวิธีการคำนวณระยะห่างระหว่างสองอนุภาคคุณสามารถคิดถึงบทเรียนแรกของคณิตศาสตร์ระดับมัธยมศึกษาตอนต้น, ทฤษฎีบท pyrothebroken, สี่เหลี่ยมจัตุรัสและสี่เหลี่ยมจัตุรัสและสี่เหลี่ยมจัตุรัสและสามเหลี่ยมด้านขวาของสามเหลี่ยมด้านขวาเท่ากับสี่เหลี่ยมจัตุรัสของสี่เหลี่ยมจัตุรัส การเปลี่ยนแปลงครั้งที่สาม
ตอนนี้เรารู้พิกัดของแกน x -axis และ y ของแต่ละอนุภาคจากนั้นเราสามารถคำนวณระยะห่างระหว่างสองจุดเขียนฟังก์ชั่นและผ่านสองจุดดังนี้:
ฟังก์ชั่น getDistance (point1, point2) {return math.sqrt (math.pow (point1.x -point2.x, 2) + math.pow (point1.y -point2.y, 2));}ตอนนี้เราสามารถคำนวณระยะห่างระหว่างสองจุดดังนั้นเราจึงคำนวณระยะห่างระหว่างแต่ละอนุภาคและอนุภาคอื่น ๆ ทั้งหมดเพื่อตรวจสอบว่าจำเป็นต้องเชื่อมต่อหรือไม่ มันน่าเกลียดเล็กน้อยดังนั้นเราสามารถกำหนดความโปร่งใสของการเชื่อมต่อตามระยะห่างระหว่างสองอนุภาค ระยะทางที่แน่นอนจะไม่ปรากฏขึ้น
ฟังก์ชั่น linepoint (จุด, ฮับ) {สำหรับ (ให้ i = 0; i <hub.length; i ++) {ให้ระยะทาง = getDistance (จุด, ฮับ [i]); (ถ้า (ความทึบ> 0) {ctx.lineWidth = 0.5; ctx.strokestyle = rgba (+line [0]+,+line [1]+,+line [2]+,+opacity+); ctx.beginpath () ctx.lineto (ฮับ [i] }}}}}}}}}พารามิเตอร์สองตัวที่ส่งมาด้านบนเป็นอาร์เรย์ของจุดหนึ่งและจุดทั้งหมดการปล่อยความทึบแสง = 1 -distance/Optionistance; เป็นลบและการตัดสินต่อไปนี้จะถูกกรองออกมา
var line = option.linecolor.match (// d+/g);
ในที่สุดระยะการคำนวณระยะทางจะถูกหมุนเวียนอย่างต่อเนื่องในฟังก์ชันลูป () เพิ่มรหัสลงในลูป () ดังนี้:
ฟังก์ชั่นลูป () {ctx.clearrect (0,0, w, h); draw ();} สำหรับ (ให้ i = 0; i <particle.length; i ++) {// เพิ่ม linepoint วงจรนี้ (อนุภาค [i], อนุภาค)} window.requestimationframe (ลูป);}ควรชี้ให้เห็นว่าหากคุณเพิ่มจุดมากเกินไปใน/หรือระยะการเชื่อมต่อมากเกินไป (ระยะการเชื่อมต่อจะสร้างเส้นมากเกินไป) ภาพเคลื่อนไหวจะไม่ถูกดำเนินการ เมื่อพอร์ตมุมมองแคบ ๆ ควรลดความเร็วในการเคลื่อนไหวของอนุภาค: ขนาดของอนุภาคที่เล็กลงและความเร็วในการเคลื่อนไหวในพื้นที่แคบก็ดูเร็วขึ้น
แสดงรหัสทั้งหมด:
<! 0; ด้านบน: 0; พื้นหลัง: #00f0f0f; ผืนผ้าใบ); ), // สีของอนุภาค linecolor: RGB (32,245,245), // สีของกริดที่เชื่อมต่อสี defaultradius: 2, // radius radius variantius: 2, // ความคิดที่แปรปรวนของรัศมีอนุภาค: 200 / / สายที่เชื่อมต่อระหว่างอนุภาคระยะทางต่ำสุด}; init (); () {getSize (getSize); i <particle.length; linepoint (อนุภาค [i], อนุภาค)} window.requestanimationFrame (ลูป);} ฟังก์ชั่น linepoint (จุด, ฮับ) {สำหรับ (ให้ i = 0; i <hub.length; i ++) ปล่อยให้การจำหน่าย = getDistance (จุด ฮับ [i]); +line [2]+,+opacity+); .closepath (); -point2.y, 2));} ฟังก์ชั่น getsize () {w = canvas.width = window.innerWidth; x -axis พิกัดของอนุภาค this.y = math.random ()*h; ความเร็วในการเคลื่อนไหวของอนุภาคคือ directionangle = math.floor (math.random ()*360); .Defaultradrad IUS+Math อนุภาคใน x -axis y: this.speed* math อนุภาค this.border (); ช่วงเวลาต่อไป this.y += this.vector.y; พวกเขาทั้งหมดมาถึงชายแดนถ้า (this.x> = w || this.x <= 0) {// ถ้าคุณไปถึงขอบเขตซ้ายและขวาให้ความเร็วของ x -axis เปลี่ยนเป็นจำนวนลบเดิมนี้ .vector.x *= -1;} ถ้า (this.y.y> = h || this.y <= 0) {// ถ้าถึงขอบเขตบนและล่างความเร็วของ y -axis จะเปลี่ยนเป็น จำนวนลบดั้งเดิม this.vector.y *= -1; เพื่อให้เขาสามารถแสดง this.x = w;} ถ้า (this.y> h) {this.y = h;} ถ้า (this.x <0) {this.x = 0;} ถ้า (this.y <0) {this.y = 0;} this.draw = function () {{{// ฟังก์ชั่นของการวาดอนุภาค ctx.beginpath (); 0, math.pi * 2); ctx.fillstyle = this.color;ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้