لتحقيق التأثير كما هو موضح في الصورة (تساقط الأوراق):
كود أتش تي أم أل:
<!DOCTYPE html><html><head> <title>رسوم متحركة لتساقط أوراق HTML5</title> <meta charset=utf-8> <meta name=viewport content=width=500px, virtual-scale=0.64> <link rel =stylesheet href=leaves.css type=text/css> <script src=leaves.js type=text/javascript></script></head><body> <div id=container> <div id=leafContainer></div> <div id=message> <em>هذه رسم متحرك لأوراق الأشجار المتساقطة يعتمد على webkit< /em> </div> </div> </body></html>رمز css: body{ لون الخلفية: #4E4226;}#container { الموضع: الارتفاع النسبي: 700 بكسل; 500 بكسل الهامش: 10 بكسل تلقائي؛ التجاوز: الحد المخفي: 4 بكسل صلب #5C090A؛ الخلفية: #4E4226 url('images/backgroundLeaves.jpg') أعلى اليسار بدون تكرار؛}#leafContainer { الموضع: العرض المطلق: 100% الارتفاع: 100%;}#message{ الموضع: مطلق; العرض: 100% الارتفاع: 300 بكسل؛ الخلفية: عنوان url شفاف('images/textBackground.png') تكرار-x اللون: #5C090A؛ حجم الخط: 220%؛ : الحشوة المركزية: 20 بكسل 10 بكسل؛ -حجم صندوق الويب: مربع الحدود؛ 100% 100%; z-index: 1;}em { وزن الخط: نمط الخط: عادي;}#leafContainer > div { الموضع: العرض المطلق: 100px الارتفاع: 100px; -العدد: لانهائي؛ -webkit-animation-direction: عادي؛ -webkit-animation-timing-function: الخطي؛}#leafContainer > div > img { الموضع: العرض المطلق: الارتفاع 100 بكسل؛ -webkit-animation-iteration-count: infinite؛ -webkit-animation-direction: Alternative؛ out; -webkit-transform-origin: 50% -100%;}@-webkit-keyframes Fade{ 0% { opacity: 1; } 95% { العتامة: 1; } 100% { العتامة: 0 }}@-webkit-keyframes drop{ 0% { -webkit-transform: ترجمة(0px, -50px) } 100% { -webkit-transform: ترجمة (0px، 650px }}@-webkit-keyframes في اتجاه عقارب الساعة{ 0% { ؛ -تحويل webkit: تدوير(-50deg); } 100% { -تحويل webkit: تدوير(50deg); (50deg); } 100% { -تحويل webkit: مقياس(-1, 1) تدوير(-50deg); }}رمز js: const NUMBER_OF_LEAVES = 30; function init(){ var Container = document.getElementById('leafContainer'); for (var i = 0; i < NUMBER_OF_LEAVES; i++) { Container.appendChild(createALeaf()); }} الدالة RandomInteger(low, High){ return low + Math.floor(Math.random() * (عالية - منخفضة));}وظيفة RandomFloat(منخفضة, عالية){ إرجاع منخفض + Math.random() * (عالية - منخفضة);}وظيفة PixelValue(value){ قيمة الإرجاع + 'px';}function DurationValue(value){ return value + 's';}function createALeaf(){ var leafDiv = document.createElement('div'); leafDiv.style.top = -100px; leafDiv.style.left = PixelValue(randomInteger(0, 500)); leafDiv.style.webkitAnimationName = 'fade, drop'; FadeAndDropDuration + ', ' + FadeAndDropDuration var leafDelay = DurationValue(randomFloat(0, 5)); leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay; 1, 5) + '.png'; var spinAnimationName = (Math.random() < 0.5) 'clockwiseSpin' : 'counterclockwiseSpinAndFlip'; image.style.webkitAnimationName = spinAnimationName; .addEventListener('load', init, false); ملاحظة: دعونا نلقي نظرة على كيفية تعامل html5 Canvas مع صور الإطارات المستمرة، ويستند الكود التالي إلى IE8 وما فوق. <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content=width=device-width، المقياس الأولي=1.0، الحد الأدنى للمقياس=1.0، الحد الأقصى للمقياس=1.0، user-scalable=no/><title>عرض قماشي</title><script>var Canvas = null;//معلمة التهيئة var img = null;var ctx = null;var imageReady = false;window.onload = function() { var Canvas = document.getElementById(animation_canvas); Canvas.parentNode.clientWidth; console.log(القماش غير مدعوم. يرجى تثبيت متصفح متوافق مع HTML5.) // احصل على سياق ثنائي الأبعاد للقماش وارسم مستطيلاً ctx = Canvas.getContext(2d); ctx.fillStyle=black; ctx.fillRect(0, 0, Canvas.width, Canvas.height); ); img.src = Images/ab0.png; img.onload = Load();} // تأكد من أن دورة الرسوم المتحركة تبدأ فقط بعد تحميل الصورة function Load() { imageReady = true; setTimeout(update, 1000/3);// إضافة 3 إطارات في الفاصل الزمني الثاني}function redraw() { ctx.fillStyle=black; إمج، 0، 0، 232، 180)؛} // لكي تتحرك الصورة بالسرعة المحددة، يتعين علينا تتبع الوقت المنقضي ثم تشغيل الإطارات بناءً على الوقت المخصص لكل إطار. الخطوات الأساسية هي: //1. اضبط سرعة الرسوم المتحركة (msPerFrame) بالإطارات في الثانية. //2. عند تكرار اللعبة، احسب مقدار الوقت (دلتا) المنقضي منذ الإطار الأخير. //3. إذا كان الوقت الذي مضى كافيًا لإكمال إطار الرسوم المتحركة، فقم بتشغيل هذا الإطار واضبط الدلتا التراكمية على 0. //4. إذا لم يكن الوقت المنقضي كافيًا، فتذكر (تجميع) وقت الدلتا (acDelta). varframe = 0;var lastUpdateTime = 0;var acDelta = 0;var msPerFrame = 200;function update() { requestAnimFrame(update); var delta = Date.now() - lastUpdateTime; //console.log(Date.now ()،lastUpdateTime)؛ if (acDelta > msPerFrame){ acDelta = 0; img.src='images/ab'+frame+'.png'; if(frame >= 3)frame = 0; // عندما يتم رسم الإطار وتقدم الإطار، سيتم إعادة ضبط المؤقت. }else{ acDelta += delta; } lastUpdateTime = Date.now();}//requestAnimFrame يقوم بشكل أساسي بعمل setTimeout، لكن المتصفح يعرف أنك تعرض الإطار، حتى يتمكن من تحسين حلقة الرسم وكيفية التفاعل مع بقية الصفحة. إنحسر. // في بعض الحالات، يكون استخدام setTimeout أفضل من requestAnimFrame، خاصة للهواتف المحمولة. // فيما يلي حالة استدعاء requestAnimFrame على متصفحات مختلفة. طريقة الكشف القياسية هي كما يلي: window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||.window.msRequestAnimationFrame ||. function( callback ){ window.setTimeout(callback, 1000 / 3); // إذا لم يكن دعم requestAnimFrame متاحًا، فلا يزال بإمكانك استخدام setTimeout المدمج };})();</script></head><body style=position:absolute;margin:0;padding :0 ;العرض:100%;الارتفاع:100%;> <canvas id=animation_canvas></canvas></body></html>. تلخيصما ورد أعلاه هو تطبيق للرسوم المتحركة المتساقطة على أساس HTML5+Webkit الذي قدمه المحرر وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!