استكشاف HTML5: تحسين الرسوم المتحركة على الويب باستخدام requestAnimationFrame

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

يمكن للمتصفح تحسين إجراءات الرسوم المتحركة المتوازية، وإعادة ترتيب تسلسل الإجراء بشكل أكثر منطقية، وإكمال الإجراءات التي يمكن دمجها في دورة عرض واحدة، وبالتالي تقديم تأثير رسوم متحركة أكثر سلاسة. على سبيل المثال، من خلال requestAnimationFrame()، يمكن أن تحدث الرسوم المتحركة لـ JS في وقت واحد مع الرسوم المتحركة/التحويل CSS أو الرسوم المتحركة SVG SMIL. بالإضافة إلى ذلك، إذا قمت بتشغيل رسم متحرك في علامة تبويب المتصفح، فسيقوم المتصفح بإيقافه مؤقتًا عندما لا تكون علامة التبويب مرئية، مما سيقلل الضغط على وحدة المعالجة المركزية والذاكرة ويوفر طاقة البطارية.

 // طبقة الرقائق مع setTimeout Fallbackwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };} )();// use:// بدلاً من setInterval(render, 16) ....(function animloop(){ requestAnimFrame(animloop); render();})();// ضع rAF *قبل* render() لضمان أقرب ما يكون إلى // 60 إطارًا في الثانية مع الإجراء الاحتياطي setTimeout.

تغليف أكثر موثوقية لـ requestAnimationFrame

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

 (function() { var lastTime = 0; var البائعين = ['webkit', 'moz']; for(var x = 0; x < البائعين.طول && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'] window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] ||.window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); timeToCall = lastTime + timeToCall; return id };

اسمحوا لي أن أرى تأثير استخدام requestAnimationFrame

 window.requestAnimationFrame(function(/* time */ time){ // time ~= +new Date // the unix time});

يمكن تمرير المعلمات الموجودة في وظيفة رد الاتصال في الوقت المناسب.

دعم المتصفحات المختلفة لـ requestAnimationFrame

يقوم كل من Google Chrome وFirefox وIE10+ بتنفيذ هذه الوظيفة. حتى لو كان متصفحك قديمًا جدًا، فإن تغليف requestAnimationFrame أعلاه يمكن أن يجعل هذه الطريقة خالية من الأخطاء على IE8/9.