ملخص لطرق تنفيذ تأثيرات الوابل على الواجهة الأمامية (بما في ذلك طرق تنفيذ CSS3 و Canvas)

في الماضي، على صفحة اليانصيب المحمولة، كانت نافذة عرض نتائج اليانصيب مطلوبة لعرض وابل من الحواجز من قبل.

• ينفذ CSS3 نسخة متسولة من الوابل
• تحسين أداء وابل CSS3
• قماش ينفذ الوابل
• وظائف موسعة من وابل قماش

أولاً، دعونا نلقي نظرة على كيفية تنفيذ أبسط وابل من خلال CSS:

قم أولاً بتعريف بنية dom للوابل في HTML:

 <div class=block>أنا دانماكو</div>

يمكن تحقيق حركة الوابل عن طريق تحريك هذه الكتلة بأخذ الوابل المتحرك من اليمين إلى اليسار كمثال، يكون الموضع الأولي للوابل في أقصى الجانب الأيسر من الحاوية وتكون الحافة مخفية (أقصى الجانب الأيسر من الحاوية). الوابل هو نفس الجانب الأيمن من الحاوية). يمكن تحقيقه عن طريق تحديد المواقع والتحويل المطلق:

 .block{ الموقف:مطلق؛}

الموقف الأولي:

 من {يسار:100% تحويل:translateX(0)}

الموضع النهائي للتحرك إلى أقصى اليسار هو (يتم محاذاة الجانب الأيمن من الوابل مع الجانب الأيسر من الحاوية):

 إلى { يسار:0 تحويل:ترجمةX(-100%)}

الرسوم التوضيحية المحددة لموضع البداية وموضع النهاية هي كما يلي:

يمكن تعريف الرسوم المتحركة الكاملة ذات الإطارين بناءً على موضع البداية وموضع النهاية:

 @keyframes barrage{ from{ left:100%; تحويل:translateX(0);

قم بتقديم هذه الرسوم المتحركة لعنصر الوابل:

 .block{ الموضع:مطلق /* نمط تزيين آخر */ الرسوم المتحركة:وابل 5s خطي 0s;}

بهذه الطريقة، يمكن تحقيق نسخة المتسول من تأثير الوابل:

أولاً، دعونا نوضح عملية العرض في CSS

I) إنشاء شجرة DOM استنادًا إلى بنية HTML (تحتوي شجرة DOM على عقد العرض: لا شيء) II) استنادًا إلى شجرة DOM، قم بإنشاء شجرة عرض بناءً على السمات الهندسية للعقد (الهامش/الحشو/العرض/الارتفاع /left، وما إلى ذلك) III) استمر في عرض السمات مثل اللون والخط بناءً على شجرة العرض

إذا تغيرت الخصائص في I) وII)، فسوف يحدث إعادة التدفق إذا تغيرت الخصائص في III فقط، فستحدث إعادة الرسم فقط. من الواضح أنه يمكننا أيضًا أن نرى من عملية عرض CSS: يجب أن يكون إعادة التدفق مصحوبًا بإعادة الرسم.

إعادة التدفق (إعادة التدفق): عندما يتغير جزء أو كل شجرة العرض بسبب الحجم والهامش وما إلى ذلك، يجب إعادة بناء العملية. إعادة الرسم (إعادة الرسم): عندما تتغير بعض سمات العنصر، مثل المظهر ولون الخلفية لن يتسبب ذلك في التخطيط. تسمى عملية إعادة العرض بسبب التغييرات إعادة الرسم

سيؤثر إعادة التدفق على سرعة عرض CSS للمتصفح، لذلك عند تحسين أداء صفحة الويب، من الضروري تقليل حدوث إعادة التدفق.

في القسم الأول، استخدمنا السمة left لتحقيق تأثير الوابل. سوف يغير Left تخطيط العنصر، لذلك سيحدث إعادة التدفق، مما سيؤدي إلى تجميد الرسوم المتحركة للوابل على صفحة الهاتف المحمول.

لقد اكتشفنا أن الرسوم المتحركة المتوقفة في القسم الأول بها مشكلة عالقة، دعونا نرى كيفية حل الرسوم المتحركة المتوقفة.

استخدم CSS لتمكين تسريع الأجهزة في المتصفح واستخدم GPU (وحدة معالجة الرسومات) لتحسين أداء صفحة الويب. في ضوء ذلك، يمكننا استخدام قوة وحدة معالجة الرسومات (GPU) لجعل أداء موقعنا أو تطبيقنا أكثر سلاسة.

لا تعمل الرسوم المتحركة والتحويلات والانتقالات في CSS على تمكين تسريع GPU تلقائيًا، ولكن يتم تنفيذها بواسطة محرك العرض البطيء للبرنامج في المتصفح. إذًا كيف يمكننا التبديل إلى وضع GPU؟ توفر العديد من المتصفحات قواعد CSS مشغلة معينة.

الطريقة الأكثر شيوعًا هي أنه يمكننا تشغيل تسريع الأجهزة من خلال التغييرات ثلاثية الأبعاد (سمة Translate3d) وفي ضوء ذلك، نقوم بتعديل الرسوم المتحركة على النحو التالي:

 @keyframes barrage{ from{ left:100%; تحويل:translate3d(0,0,0); } إلى{ left:0;

بهذه الطريقة، يمكنك تحسين أداء صفحة الويب عن طريق تشغيل تسريع الأجهزة. ومع ذلك، فإن هذه الطريقة لا تحل المشكلة بشكل أساسي، وفي الوقت نفسه، يؤدي استخدام وحدة معالجة الرسومات إلى زيادة استخدام الذاكرة، مما يؤدي إلى تقليل عمر بطارية الجهاز المحمول وما إلى ذلك.

(2) لا تغير السمة اليسرى

الطريقة الثانية هي إيجاد طريقة لعدم تغيير قيمة السمة اليسرى قبل وبعد الرسوم المتحركة للوابل، حتى لا يحدث إعادة التدفق.

نريد تحديد الموضع الأولي لعقدة الوابل فقط من خلال TranslatorX، لكن TranslatorX(-100%) نسبة إلى عقدة الوابل نفسها، وليس إلى العنصر الأصلي، لذلك نقوم بربط js وcss للحصول على الوابل في js العرض للعنصر الأصلي حيث توجد العقدة، ثم يتم تحديد الموضع الأولي لعقدة الوابل بناءً على العرض.

خذ على سبيل المثال عندما يكون العنصر الأصلي هو الجسم:

 //css .block{position:absolute left:0;Visibility:hidden; .appendChild(style);let width = window.innerWidth;let from = `from {visible: visual: -webkit-transform: TranslateX(${width}px); }`;let to = `to {Visible; -webkit-transform: TranslationX(-100%); { ${من} ${to} }`, 0);

بالإضافة إلى اقتران js لحساب عرض العنصر الأصلي لتحديد الموضع الأولي لعقدة الوابل، من أجل منع عرض الموضع الأولي في عقدة الوابل، أضفنا خاصية الرؤية: السمة المخفية. منع عرض عقد الوابل في الحاوية الأصلية قبل تحديد الموضع الأولي. لن يصبح الوابل مرئيًا إلا إذا بدأ بالتمرير من موضعه الأولي.

ومع ذلك، فإن طريقة تنفيذ CSS هذه أكثر صعوبة في تحقيق الوظائف الموسعة للوابل، مثل كيفية التحكم في إيقاف الوابل مؤقتًا وما إلى ذلك.

بالإضافة إلى طريقة تحقيق الوابل من خلال CSS، يمكن أيضًا تحقيق الوابل من خلال اللوحة القماشية.

مبدأ تنفيذ الوابل من خلال اللوحة القماشية هو إعادة رسم النص من وقت لآخر، فلننفذه خطوة بخطوة.

احصل على قماش

 Let Canvas = document.getElementById('canvas'); Let ctx = Canvas.getContext('2d');

ارسم النص

 ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = '#000000'; ctx.fillText('canvas يرسم النص', x, y);

يعد نص التعبئة أعلاه هو واجهة برمجة التطبيقات الرئيسية لتحقيق تأثير الوابل، حيث يمثل x الإحداثي الأفقي ويمثل y الإحداثي الرأسي وطالما يتم تغيير x وy من وقت لآخر وإعادة رسمهما، يمكن تحقيق تأثير الوابل الديناميكي. نسخ الرمز

مسح محتوى الرسم

 ctx.clearRect(0, 0, width, height);

من خلال المؤقت، يتم تغيير x، y بانتظام قبل كل تغيير، يتم مسح الشاشة أولاً، ثم يتم إعادة رسمها بناءً على x، y الذي تم تغييره. عندما يكون هناك وابل متعددة، حدد:

 Let colorArr=_this.getColor(color); مصفوفة الألوان المقابلة لمصفوفة الوابل Let numArrL=_this.getLeft(); تسمح صفيف موضع الإحداثيات 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.fillStyle = colorArr[j]; ctx.fillText(barrageList[j],numArrL[j],numArrT[j]);

التأثير الذي تم تحقيقه هو:

يعد تنفيذ الوابل من خلال اللوحة القماشية مناسبًا جدًا للوظائف الموسعة مثل إيقاف تمرير الوابل مؤقتًا، بالإضافة إلى ذلك، يمكنك أيضًا إضافة صور رمزية إلى الوابل، وإضافة حدود لكل وابل، ووظائف أخرى، والتي ستتم إضافتها لاحقًا.

أخيرًا، قم بتوفير مكون رد فعل بسيط؛ https://github.com/forthealllight/react-barrage

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.