เมื่อเร็ว ๆ นี้ฉันได้ทำโครงการที่มีความจำเป็นที่จะต้องตระหนักถึงเอฟเฟกต์ภาพเคลื่อนไหวของฝนตกและหิมะตกดังนั้นฉันจึงสร้างส่วนประกอบหยดที่นี่เพื่อแสดงวัตถุที่ตกลงมาทั่วไปของผืนผ้าใบนี้ ก่อนที่จะแนะนำข้อความหลักให้คุณให้ฉันแสดงการเรนเดอร์:
แสดงการเรนเดอร์:
ฝนตกและหิมะตก
มันดูดี เมื่อเปรียบเทียบกับการใช้การสร้างองค์ประกอบ DOM เพื่อสร้างรูปภาพการเคลื่อนไหวของตำแหน่งหลายจุดโดยใช้ผืนผ้าใบจะง่ายขึ้นและเร็วขึ้นและประสิทธิภาพจะดีขึ้น
รหัสโทร
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> เอกสาร </title> <style> #canvas {width: 100%; ความสูง: 100%;} </style> </head> src = "canvasdrop.js"> </script> <script> canvasdrop.init ({type: "ฝน", // ประเภท drop, ฝนหรือ snowspeed: [0.4,2.5], // ช่วงความเร็ว size_range: [0.5,1.5], // ขนาดและรัศมี Hasgravity: True // มีการพิจารณาแรงโน้มถ่วงหรือไม่}); </script> </body> </html>ตกลงอธิบายหลักการการใช้งานง่าย ๆ ก่อนอื่นกำหนดตัวแปรทั่วโลกที่เราจะใช้เช่นมุมทิศทางลมความน่าจะเป็นข้อมูลวัตถุ ฯลฯ
กำหนดตัวแปรทั่วโลก
// กำหนดสองข้อมูลวัตถุ // drops drop object object object วัตถุ // และ rebound object boundces object var drops = [], bountes = []; // การเร่งความเร็วแรงโน้มถ่วงถูกตั้งค่าเป็น 0.2/หนึ่ง frame var gravity = 0.2; var speed_x_x, // การเร่งความเร็วในแนวนอน // ทิศทางลม // ความกว้างของพิกเซลและความสูงของผืนผ้าใบ Var Canvaswidth, Canvasheight; // ความน่าจะเป็นในการสร้าง drop var drop_chance; // กำหนดค่าวัตถุ var opts; // ค่าเริ่มต้นไม่ว่าจะมีวิธีการร้องขอความร่วมมือ || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe || ฟังก์ชั่น (การโทรกลับ) {window.settimeout (การโทรกลับ, 1000 /30);};กำหนดวัตถุหลัก
ต่อไปเราต้องกำหนดวัตถุสำคัญหลายอย่าง มีวัตถุน้อยกว่าที่องค์กรจำเป็นต้องกำหนด โดยรวมมีเพียงสามวัตถุหลักเท่านั้นที่กำหนดไว้ในองค์ประกอบการตกทั้งหมดซึ่งมีดังนี้:
วัตถุความเร็วเวกเตอร์ที่มี x แนวนอนและแนวตั้ง y ความเร็วความเร็ว: v = พิกเซล/เฟรมการกระจัด
ความเข้าใจในวัตถุเวกเตอร์นั้นง่ายมากและดิบซึ่งก็คือการบันทึกความเร็วของวัตถุที่ตกลงมาลดลง/V
var Vector = function (x, y) {// แอตทริบิวต์ส่วนตัวความเร็วแนวนอน x, ความเร็วแนวตั้ง ythis.x = x || 0; this.y = y || 0;}; // วิธีการสาธารณะ- เพิ่ม: ฟังก์ชั่นการเปลี่ยนแปลงความเร็วเพิ่มความเร็วตามพารามิเตอร์ // เนื่องจากความต้องการทางธุรกิจการเร่งความเร็วทั้งหมดจะถูกพิจารณาดังนั้นจึงไม่มีการชะลอตัวและสามารถขยายได้ในระยะต่อมา String */vector.prototype.add = function (v) {ถ้า (vx! = null && vy! = null) {this.x += vx; this.y.y += vy;} else {this.x += v; this.y.y += v;} function () {// ส่งคืนอินสแตนซ์เวกเตอร์ด้วยแอตทริบิวต์ความเร็วเดียวกันส่งคืนเวกเตอร์ใหม่ (this.x, this.y);}; drop วัตถุวัตถุหล่นนั่นคือเม็ดฝนและหิมะในเอฟเฟกต์ข้างต้นคุณสามารถขยายไปยังอุกกาบาตหรือเปลือก คำจำกัดความพื้นฐานของวัตถุ Drop มีดังต่อไปนี้ // constructor var drop = function () {/ * .... */}; // วิธีการสาธารณะ drop.prototype.update = function () {/ * .... */}; // วิธีการสาธารณะหลังจากอ่านสามวิธีข้างต้นคุณเดาบทบาทของพวกเขาหรือไม่? มาทำความเข้าใจกันว่าวิธีการทั้งสามนี้ทำอะไร
ตัวสร้าง
ตัวสร้างส่วนใหญ่มีหน้าที่รับผิดชอบในการกำหนดข้อมูลเริ่มต้นของวัตถุหล่นเช่นความเร็วพิกัดเริ่มต้นขนาดการเร่งความเร็ว ฯลฯ
// constructor dropvar drop = function () {// สุ่มตั้งค่าพิกัดเริ่มต้นของ Drop // ก่อนอื่นเลือกองค์ประกอบที่ตกลงมาจากด้านใดที่เป็นหนึ่งจาก var randomedge = math.random () * 2; ถ้า (RandomEdge> 1) {this.pos = new Vector (50 + Math.Random () math.random () * canvas.height);} // ตั้งค่าขนาดขององค์ประกอบที่ตกลงมา // ค่าสุ่มถูกถ่ายโดยช่วงรัศมีของฟังก์ชัน opts ที่เรียกว่า this.radius = (opts.size_range [0] + math.random () opts.size_range [1]) * dpr; // (opts.speed [0] + math.random () * opts.speed [1]) * dpr; this.prev = this.pos; // คูณมุมด้วย 0.017453293 (2pi/360) เพื่อแปลงเป็นเรเดียน var abersage = 0.017453293; // รับมุมของทิศทางลม wind_anger = opts.wind_direction * surdager; // รับการเร่งความเร็วด้านข้าง speed_x = this.speed * math.cos (wind_anger); // รับความเร็วในการเร่งความเร็วตามยาวอัปเดตวิธีการวางวัตถุ
วิธีการอัปเดตมีหน้าที่ในการเปลี่ยนแอตทริบิวต์ของแต่ละอินสแตนซ์การวางเฟรมเช่นการเปลี่ยนการกระจัด
drop.prototype.update = function () {this.prev = this.pos.copy (); // ถ้ามีแรงโน้มถ่วงความเร็วตามยาวจะเพิ่มขึ้นถ้า (opts.hasgravity) {this.vel.y += แรงโน้มถ่วง;} // this.pos.addวิธีการวาดของวัตถุหล่น
วิธีการวาดมีหน้าที่ในการวาดอินสแตนซ์การวางแต่ละเฟรม
drop.prototype.draw = function () {ctx.beginpath (); ctx.moveto (this.pos.x, this.pos.y); // ปัจจุบันมีเพียงสองสถานการณ์หนึ่งคือฝนตก math.abs (this.radius * math.cos (wind_anger)); var ay = math.abs (this.radius * math.sin (wind_anger)); ctx.beziercurveto (this.pos.x + ax, this.pos.y + ay, this.prev.x this.pos.y); ctx.stroke (); // อื่น ๆ คือ หิมะ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------การเด้งวัตถุของการตอบสนองจากการล้มและล้มนั่นคือหยดน้ำที่เด้งจากน้ำฝนด้านบนคุณยังสามารถขยายไปสู่กรวดหรือควันในระยะต่อมา
คำจำกัดความนั้นง่ายมากดังนั้นฉันจะไม่อธิบายรายละเอียดที่นี่
var bounce = function (x, y) {var dist = math.random () * 7; var angle = math.pi + math.random () * math.pi; this.pos = เวกเตอร์ใหม่ (x, y); this.radius = 0.2+ math.random () * 0.8; dist);}; bounce.prototype.update = function () {this.vel.y += gravity; this.vel.x *= 0.95; this.vel.y *= 0.95; this.pos.add (this.vel);}; bounce.prototype.draw = function () this.pos.y, this.radius * dpr, 0, math.pi * 2); ctx.fill ();};อินเทอร์เฟซภายนอก
อัปเดต
นั่นคือฟังก์ชั่นเริ่มต้นเทียบเท่ากับภาพเคลื่อนไหวผ้าใบทั้งหมด
ฟังก์ชั่นอัปเดต () {var d = วันที่ใหม่; // ทำความสะอาดรูปวาด ctx.clearrect (0, 0, canvas.width, canvas.height); var i = drops.length; canvas.height) {// หากคุณต้องการรีบาวด์ให้เพิ่มอินสแตนซ์ตีกลับลงในอาร์เรย์ตีกลับถ้า (opts.hasbounce) {var n = math.round (4 + math.random () * 4); ในขณะที่ (n-) bountes.push (bounce ใหม่ (drop.pos.x, canvas.height));} // ถ้าอินสแตนซ์หยดลดลงไปด้านล่างคุณจะต้องชัดเจนในอาร์เรย์หยดของวัตถุอินสแตนซ์ลดลง {var bounce = bounts [i]; bounce.update (); bounce.draw (); ถ้า (bounce.pos.y> canvas.height) bounts.splice (i, 1);}} // ถ้าจำนวนที่สร้างขึ้นในแต่ละครั้งถ้า opts.numlevel; สำหรับ (; i <len; i ++) {drops.push (new drop ());}}} // วนลูป updaterequestanimframe อย่างต่อเนื่อง (อัปเดต);}การเริ่มต้น
อินเทอร์เฟซเริ่มต้นเริ่มต้นคุณสมบัติพื้นฐานทั้งหมดของผืนผ้าใบผ้าใบทั้งหมดเช่นการได้รับอัตราส่วนพิกเซลของหน้าจอและการตั้งค่าขนาดพิกเซลของผืนผ้าใบและการตั้งค่าสไตล์ของผืนผ้าใบ
ฟังก์ชั่น init (opts) {opts = opts; canvas = document.getElementById (opts.id); ctx = canvas.getContext ("2d"); //// ที่เข้ากันได้กับหน้าจอการเปลี่ยนระดับสูง หน้าจอดังนั้นความยาวและความกว้างของผ้าใบ artboard ควรคูณด้วย dpr canvaswidth = canvas.clientwidth * dpr; canvasheight = canvas.clientheight * dpr; // ตั้งค่าความกว้างและความสูงของ canvas.width = canvaswidth; setStyle ();} ฟังก์ชั่น setStyle () {ถ้า (opts.type == "rain") {ctx.lineWidth = 1 * dpr; ctx.strokestyle = 'rgba (223,223,223,0.6)'; ctx.fillstyle = 'rgba (223,223,223,0.6)';} else {ctx.linewidth = 2 * dpr; ctx.strokestyle = 'rgba (254,254,254,0.8)'; ctx.fillstyle = 'rgba (254,254,0.8)บทสรุป
ตกลงส่วนประกอบการตกอย่างง่ายเสร็จแล้วแน่นอนว่ามีหลายสิ่งที่ไม่สมบูรณ์แบบ หลังจากเขียนส่วนประกอบหยดนี้สำหรับการใช้งานแอนิเมชั่นของผืนผ้าใบฉันเชื่อว่ามีหลายสถานที่ที่จะค้นพบในฉาก H5
สุดท้ายมาพูดถึงข้อบกพร่องและงานในภายหลัง:
0. มีอินเทอร์เฟซภายนอกไม่เพียงพอสำหรับส่วนประกอบนี้ช่วงที่ปรับได้นั้นไม่ใหญ่มากและสิ่งที่เป็นนามธรรมนั้นไม่ได้ละเอียดมากนัก
1. SetStyle Set Style Basic
2. การปรับแต่งของการอัปเดตและการวาดวิธีการลดลงและตีกลับช่วยให้ผู้ใช้สามารถตั้งค่าฟอร์มและเอฟเฟกต์สไตล์ของการเปลี่ยนความเร็วและการเปลี่ยนแปลงขนาดได้มากขึ้น
3. ควรเพิ่มอินเทอร์เฟซสำหรับการหยุดเคลื่อนไหวชั่วคราวการเร่งความเร็วและการชะลอตัว
ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับ JS และผืนผ้าใบที่ฉันแนะนำให้คุณรู้จักเกี่ยวกับการบรรลุผลฝนและหิมะตก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!
บทความนี้มีการทำซ้ำ: http://blog.csdn.net/xlilily_11/article/details/51444311