لقد قمت مؤخرًا بإنشاء مشروع حيث هناك حاجة إلى إدراك آثار الرسوم المتحركة للتمطر وتساقط الثلج الخفيف ، لذلك قمت بإنشاء مكون إسقاط هنا لإظهار الكائنات المتساقطة الشائعة لهذه اللوحة. قبل تقديم النص الرئيسي لك ، اسمحوا لي أن أريكم العروض:
عرض العروض:
هطول الأمطار والثلوج
تبدو جيدة. مقارنةً باستخدام إنشاء عناصر DOM لإنشاء صور حركة الموضع متعددة الكائنات ، سيكون استخدام القماش أسهل وأسرع ، وسيكون الأداء أفضل.
رمز الاتصال
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8" <title> مستند </title> <style> #canvas {width: 100 ٪ ؛ height: 100 ٪ ؛} </sytor> </head> <body> <body> <canvas id = "canvas"> src = "canvasdrop.js"> </script> <script> canvasdrop.init ({النوع: "المطر" ، // نوع إسقاط ، المطر أو snowspeed: [0.4،2.5] Hasgravity: True // هل هناك أي اعتبار للجاذبية}) ؛ </script> </body> </html>حسنًا ، دعنا نوضح مبدأ التنفيذ البسيط. أولاً ، حدد بعض المتغيرات العالمية التي سنستخدمها ، مثل زاوية اتجاه الرياح ، والاحتمال ، وبيانات الكائن ، إلخ.
تحديد المتغيرات العالمية
// تحديد بيانات كائنين // كائن كائن Drops Drop ، وارتداد كائن الارتداد Drops var drops = [] ، يرتدون = [] ؛ // يتم تعيين تسارع الجاذبية على 0.2/إطار واحد var gravity = 0.2 ؛ var speed_x_x ، // الأفقي تسريع speed_x_y ، // longieline Acceleration Wind_Nanger ؛ // اتجاه الرياح // عرض البكسل وارتفاع قماشية var var canvaswidth ، canvasheight ؛ // احتمال إنشاء Drop var drop_chance ؛ || window.webKitRequestAnimationFrame || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationFrame || function (callback) {window.settimeout (callback ، 1000 /30) ؛} ؛تحديد الكائن الأساسي
بعد ذلك ، نحتاج إلى تحديد العديد من الأشياء المهمة. هناك عدد أقل من الأشياء التي تحتاج المنظمة إلى تحديدها. في المجموع ، يتم تعريف ثلاثة كائنات أساسية فقط في مكون الإسقاط بأكمله ، وهو ما يلي:
كائن سرعة المتجه ، مع X أفقي وحدات حجم السرعة y العمودي: v = وحدات البكسل/الإزاحة
فهم كائن المتجه بسيط للغاية وخام للغاية ، وهو تسجيل سرعة انخفاض الكائن السقوط/V.
var vector = function (x ، y) {// private regustribute verizontal velocity x ، velocity ythis.x = x || 0 ؛ this.y = y || 0 ؛} ؛ // الأسلوب العام- إضافة: وظيفة تغيير السرعة ، وزيادة السرعة وفقًا للمعلمات // بسبب احتياجات العمل ، يتم النظر في جميع التسارع المتساقط ، لذلك لا يوجد تباطؤ ، ويمكن توسيعه في المرحلة اللاحقة/** param v object || string */vector.prototype.add = function (v) {if (vx! = null && vy! = null) {this.x += {// إرجاع مثيل متجه مع نفس سمة السرعة ، إرجاع ناقل جديد (this.x ، this.y) ؛} ؛ إسقاط كائن إسقاط ، أي قطرات المطر والثلوج في التأثير أعلاه ، يمكنك لاحقًا توسيعه إلى نيزك أو قذيفة. التعريف الأساسي لكائن DROP هو كما يلي // constructor var drop = function () {/ *…بعد قراءة الطرق الثلاث أعلاه ، هل خمنت دورهم؟ دعونا نفهم ما تفعله هذه الأساليب الثلاثة.
مُنشئ
يعد المنشئ مسؤولاً بشكل أساسي عن تحديد المعلومات الأولية لكائن DROP ، مثل السرعة ، والإحداثيات الأولية ، والحجم ، والتسارع ، وما إلى ذلك.
// constructor dropvar drop = function () {// تعيين الإحداثيات الأولية للإسقاط // أولاً ، حدد العنصر المتساقط من أي جانب هو واحد من var randomedge = math.random () * 2 ؛ if (randomedge> 1) {this.pos = new vect math.random () * canvas.height) ؛} // قم بتعيين حجم العنصر المتساقط // يتم أخذ القيمة العشوائية بواسطة نطاق نصف القطر من دالة OPTS المسمى this.radius = (opts.size_range [0] + Math.Random () * opts.size_range [1]) (opts.speed [0] + Math.Random () * opts.speed [1]) * DPR ؛ this.prev = this.pos ؛ // اضرب الزاوية بمقدار 0.017453293 (2PI/360) لتحويلها إلى راديان. var alyager = 0.017453293 ؛ // احصل على زاوية اتجاه الرياح wind_anger = opts.wind_direction * alyager ؛ // الحصول على التسارع الجانبي speed_x = this.speed * math.cos (wind_anger) ؛ // الحصول على تسريع طولي speath_y = - this.deded * math.sin (wind_anger) ؛تحديث طريقة كائن الإسقاط
طريقة التحديث مسؤولة عن تغيير سمات كل مثيل إسقاط الإطار ، مثل تغيير الإزاحة.
drop.prototype.update = function () {this.prev = this.pos.copy () ؛ // إذا كانت هناك جاذبية ، فسيتم زيادة السرعة الطولية إذا (opts.hasgravity) {this.vel.y += gravity ؛} // this.pos.add (this.vel) ؛} ؛} ؛طريقة السحب لكائن الإسقاط
طريقة السحب مسؤولة عن رسم كل مثيل إسقاط الإطار
drop.prototype.draw = function () {ctx.beginpath () ؛ ctx.moveto (this.pos.x ، this.pos.y) ؛ // حاليًا هناك حالتان فقط ، واحد هو المطر ، أي bezier curve if (opts.type == "rain") {ctx.moveto (هذا. math.abs (this.radius * math.cos (wind_anger)) ؛ var ay = math.abs (this.radius * math.sin (wind_anger)) ؛ this.pos.y) ؛ ctx.stroke () ؛ // الآخر هو snow---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ارتد كائن الارتداد من السقوط والسقوط ، أي قطرات المياه التي تنتعش من مياه الأمطار أعلاه ، يمكنك أيضًا التوسع في الارتداد الحصى أو الدخان في المرحلة اللاحقة
التعريف بسيط للغاية ، لذلك لن أشرحه بالتفصيل هنا
var bounce = function (x ، y) {var dist. math.random () * 7 ؛ var angle = math.pi + math.random () * math.pi ؛ this.pos = new vector (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) ؛ this.radius * dpr ، 0 ، math.pi * 2) ؛ ctx.fill () ؛} ؛واجهة خارجية
تحديث
أي أن وظيفة البدء تعادل الرسوم المتحركة القماشية بأكملها
تحديث الوظيفة () {var d = new date ؛ // تنظيف الرسم ctx.clearrect (0 ، 0 ، canvas.width {// إذا كنت بحاجة إلى انتعاش ، فأضف مثيل ترتد إلى صفيف الارتداد إذا (opts.hasbounce) {var n = Math.Round (4 + Math.Random () * 4) ؛ بينما (n-) bounces.push (ترتد جديد (drop.pos.x ، canvas.height)) ؛} // إذا انخفض مثيل الإسقاط إلى الأسفل ، فأنت بحاجة إلى أن تكون واضحًا في صفيف القطرات من كائن المثيل. {var bounce = bounces [i] ؛ bounce.update () ؛ bound.draw () ؛ if (bounce.pos.y> canvas.height) bounces.splice (i ، 1) ؛ opts.numlevel ؛ for (؛ i <len ؛ i ++) {drops.push (new drop ()) ؛}}} // بشكل مستمر loop updaterequestanimframe (update) ؛}init
واجهة init ، قم بتهيئة جميع الخصائص الأساسية لقماش القماش بأكمله ، مثل الحصول على نسبة البكسل للشاشة ، وضبط حجم البكسل للقماش ، ووضع نمط القماش
الوظيفة init (opts) {opts = opts ؛ canvas = document.getElementById (opts.id) ؛ ctx = canvas.getContext ("2d") ؛ /// متوافق مع الشاشات عالية الدقة ، يجب أن تتغير canvas pixel مع canvas armaile مع canvas pixel pixel و minnvaS. شاشات عالية الدقة ، وبالتالي يجب مضاعفة طول وعرض لوحة القماش Artboard بواسطة dpr canvaswidth = canvas.clientwidth * dpr ؛ canvasheight = canvas.clientheight * dpr ؛ Style SetStyle () ؛} وظيفة setStyle () {if (opts.type == "RAIN") {ctx.linewidth = 1 * dpr ؛ ctx.strokestyle = 'rgba (223،223،223،0.6) ؛ 'rgba (223،223،223،0.6)' ؛} آخر {ctx.linewidth = 2 * dpr ؛ ctx.strokestyle = 'rgba (254،254،254،0.8)' ؛خاتمة
حسنًا ، تم الانتهاء من مكون إسقاط بسيط ، بالطبع ، هناك العديد من الأشياء التي ليست مثالية. بعد كتابة مكون الإسقاط هذا ، لتنفيذ الرسوم المتحركة للقماش ، أعتقد أن هناك العديد من الأماكن التي يجب اكتشافها في مشهد H5.
أخيرًا ، دعنا نتحدث عن أوجه القصور والعمل لاحقًا:
0. لا توجد واجهات خارجية كافية لهذا المكون ، والنطاق القابل للتعديل ليس كبيرًا جدًا ، والتجريد ليس دقيقًا للغاية.
1. SetStyle Set النمط الأساسي
2. تخصيص أساليب التحديث والرسم للكائنات والارتداد يتيح للمستخدمين تعيين المزيد من النماذج وتأثيرات نمط السرعة وتغيير الحجم.
3. يجب إضافة واجهة وقفة الرسوم المتحركة والتسارع والتعبئة.
ما سبق هو المعرفة ذات الصلة حول JS و Canvas التي قدمتها لك حول تحقيق تأثيرات الأمطار والتساقط. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!
هذه المقالة مستنسخة: http://blog.csdn.net/xllily_11/article/details/51444311