قدَّم
لطالما كانت أجهزة ضبط الوقت هي التكنولوجيا الأساسية للرسوم المتحركة JavaScript. مفتاح كتابة حلقة الرسوم المتحركة هو معرفة الوقت المناسب للتأخير. من ناحية ، يجب أن تكون الفاصل الزمني الحلقة قصيرة بما يكفي بحيث يمكن أن تظهر تأثيرات الرسوم المتحركة المختلفة على نحو سلس وسلس ؛ من ناحية أخرى ، يجب أن تكون فترة الحلقة طويلة بما يكفي بحيث يمكن للمتصفح إجراء تغييرات.
تردد تحديث معظم شاشات الكمبيوتر هو 60 هرتز ، وهو ما يعادل تقريبا إعادة طلاء 60 مرة في الثانية. ستقوم معظم المتصفحات بحد من عملية إعادة الرسم حتى لا تتجاوز تردد إعادة رسم الشاشة ، لأنه حتى لو تجاوزت هذا التردد ، فإن تجربة المستخدم لن تتحسن. لذلك ، فإن الفاصل الزمني للحلقة الأمثل للرسوم المتحركة الأكثر سلاسة هو 1000 مللي ثانية/60 ، وهو ما يساوي تقريبًا 16.6 مللي ثانية
ومشكلة SetTimeOut و SetInterval هي أنها لا تكون دقيقة. تحدد آلية التشغيل الجوهرية أن معلمات الفاصل الزمني في الواقع فقط حدد مدة إضافة رمز الرسوم المتحركة إلى قائمة انتظار مؤشر ترابط واجهة المستخدم للمتصفح لانتظار التنفيذ. إذا تمت إضافة مهام أخرى إلى قائمة الانتظار ، فيجب أن تنتظر رمز الرسوم المتحركة حتى يتم الانتهاء من المهام السابقة قبل تنفيذها.
يستخدم requestAnimationFrame فترات زمنية للنظام للحفاظ على أفضل كفاءة الرسم ، ولن يتم التغلب عليها بسبب وقت الفاصل القصيرة ، والتي ستزيد من النفقات العامة ؛ ولن يكون استخدام الرسوم المتحركة عالقًا وليس سلسًا لأن وقت الفاصل الزمني طويل جدًا ، بحيث يمكن أن يكون لتأثيرات الرسوم المتحركة المختلفة على شبكة الإنترنت آلية تحديث موحدة ، وبالتالي توفير موارد النظام ، وتحسين أداء النظام ، وتحسين المؤثرات البصرية
سمات
【1】 سيقوم requestAnimationFrame بتركيز جميع عمليات DOM في كل إطار ، مع إكمال في إعادة طلاء أو تراجع واحد ، ويتم تتبع الفاصل الزمني لإعادة التعيد أو التراجع عن كثب تواتر التحديث للمتصفح
【2】 في العناصر الخفية أو غير المرئية ، لن يتم إعادة طلاء أو تراجع requestAnimationFrame
【3】 requestAnimationFrame هو واجهة برمجة تطبيقات توفرها المتصفح خصيصًا للرسوم المتحركة. عند التشغيل ، سيقوم المتصفح بتحسين مكالمة الطريقة تلقائيًا. إذا لم يتم تنشيط الصفحة ، فسوف تتوقف الرسوم المتحركة تلقائيًا ، مما يؤدي إلى حفظ وحدة المعالجة المركزية بشكل فعال
يستخدم
يشبه استخدام requestAnimationFrame إلى حد كبير setTimeOut ، باستثناء أنه ليست هناك حاجة لتعيين الفاصل الزمني. يستخدم requestAnimationFrame وظيفة رد الاتصال كمعلمة ، والتي يتم استدعاؤها قبل إعادة تعزيز المتصفح. إنه يعيد عددًا صحيحًا يمثل رقم المؤقت ، والذي يمكن تمريره إلى CancelAnimationFrame لإلغاء تنفيذ هذه الوظيفة
requestId = requestAnimationFrame (رد الاتصال) ؛ // إخراج وحدة التحكم 1 و 0var timer = requestAnimationFrame (function () {console.log (0) ؛}) ؛ console.log (Timer) ؛ // 1 يتم استخدام طريقة إلغاء CancelAnimationFrame لإلغاء Timer // Console لا شيء var timer = requestAnimationFrame (function () {console.log (0) ؛}) ؛ CancelAnimationFrame (Timer) ؛يمكنك أيضًا استخدام قيمة الإرجاع لإلغاءها مباشرة
var timer = requestAnimationFrame (function () {console.log (0) ؛}) ؛ CancelAnimationFrame (1) ؛متناسق
لا يدعم IE9-Browser هذه الطريقة ، يمكنك استخدام SetTimeOut للتوافق
if (! window.requestanimationFrame) {var last time = 0 ؛ window.requestAnimationFrame = function (callback) {var curttime = new date () TimetOcall) ؛} ، timetocall) ؛ last time = curttime + timetocall ؛ إرجاع معرف ؛}} if (! window.cancelanimationFrame) {window.cancelanimationFrame = function (id) {cleartimeout (id) ؛} ؛}طلب
استخدم الآن الطرق الثلاث لـ SetInterval و SetTimeOut و requestAnimationFrame لإنشاء تأثير نظام بسيط.
【1】 setInterval
<div id = "mydiv" style = "background-color: lightblue ؛ العرض: 0 ؛ الارتفاع: 20px ؛ خط الارتفاع: 20px ؛"> 0 ٪ </div> <button id = "btn"> تشغيل </button> <script> var timer ؛ btn.onclick = function () {clearinterval (timer) ؛ setInterval (function () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px' ؛ mydiv.innerhtml = parseint (mydiv.style.width)/5 + '٪ ؛ } آخر {clearinterval (Timer) ؛}} ، 16) ؛} </script>【2】 setTimeout
<div id = "mydiv" style = "background-color: lightblue ؛ العرض: 0 ؛ الارتفاع: 20px ؛ خط الذروة: 20px ؛"> 0 ٪ </div> <button id = "btn"> تشغيل </button> <script> var timer ؛ btn.onclick = function () {cleartimeout (timer) ؛ fn () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px' ؛ mydiv.innerhtml = parseint (mydiv.style.width)/5 + '٪' ؛ setTimeout (fn ، 16) ؛} آخر {cleartimeout (timer) ؛}} ، 16) ؛} </script>【3】 requestAnimationFrame
<div id = "mydiv" style = "background-color: lightblue ؛ العرض: 0 ؛ الارتفاع: 20px ؛ خط الذروة: 20px ؛"> 0 ٪ </div> <button id = "btn"> تشغيل </button> <script> var timer ؛ btn.onclick = function () {mydiv.style. requestAnimationFrame (function fn () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px' requestAnimationFrame (fn) ؛} آخر {cancelAnimationFrame (timer) ؛}}) ؛} </script>حسنًا ، الكود موجود هنا لتقديم تطبيق الموقت الثالث في سلسلة BOM (الساعة ، العد التنازلي ، ساعة التوقيت والإنذار)
ما سبق هو الموقت الثاني requestAnimationFrame من سلسلة BOM التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!