لنفترض أن هناك شرط وظيفة الرسوم المتحركة: تغيير عرض DIV من 100 بكسل إلى 200 بكسل. قد يبدو الرمز المكتوب هكذا:
نسخة الكود كما يلي:
<div id = "test1"> </viv>
دالة ANIMATE1 (العنصر ، القيمة النهائية ، المدة) {
var startTime = New Date () ،
startValue = parseint (element.style.width) ،
الخطوة = 1 ؛
var timerid = setInterval (function () {
var nextValue = parseint (element.style.width) + Step ؛
element.style.width = nextValue + 'px' ؛
if (nextValue> = endvalue) {
ClearInterval (timerid) ؛
// تستهلك الوقت لعرض الرسوم المتحركة
element.innerhtml = تاريخ جديد - وقت البدء ؛
}
} ، المدة / (endvalue - startValue) * الخطوة) ؛
}
animate1 (document.getElementById ('test1') ، 200 ، 1000) ؛
المبدأ هو زيادة 1px في كل وقت معين حتى 200 بكسل. ومع ذلك ، فإن وقت العرض بعد انتهاء الرسوم المتحركة هو أكثر من 1s (عادة ما يكون حوالي 1.5 ثانية). والسبب هو أن SetInterval لا يمكن أن تضمن بدقة الفاصل الزمني للتنفيذ.
هل هناك طريقة أفضل للقيام بذلك؟ دعونا أولاً نلقي نظرة على مشكلة الرياضيات في المدرسة الابتدائية:
نسخة الكود كما يلي:
كان المبنى A و Building B على بعد 100 متر. مشى رجل من المبنى A إلى المبنى B بسرعة ثابتة. بعد المشي لمدة 5 دقائق ، وصل إلى وجهته. إلى أي مدى كان من البناء في الدقيقة الثالثة؟
صيغة الحساب لحساب مسافة وقت معين أثناء السرعة الثابتة هي: المسافة * الوقت الحالي/الوقت. لذلك يجب أن تكون الإجابة 100 * 3/5 = 60.
الإلهام من هذا السؤال هو أنه يمكن حساب رحلة لحظة معينة من خلال صيغة محددة. وبالمثل ، يمكن أيضًا حساب قيمة لحظة معينة أثناء عملية الرسوم المتحركة من خلال الصيغ بدلاً من تجميعها:
نسخة الكود كما يلي:
<div id = "test2"> </viv>
دالة ANIMATE2 (العنصر ، القيمة النهائية ، المدة) {
var startTime = New Date () ،
startValue = parseint (element.style.width) ؛
var timerid = setInterval (function () {
var النسبة المئوية = (تاريخ جديد - وقت البدء) / المدة ؛
var stepvalue = startValue + (endvalue - startValue) * النسبة المئوية ؛
element.style.width = stepvalue + 'px' ؛
إذا (النسبة المئوية> = 1) {
ClearInterval (timerid) ؛
element.innerhtml = تاريخ جديد - وقت البدء ؛
}
} ، 13) ؛
}
animate2 (document.getElementById ('test2') ، 200 ، 1000) ؛
بعد هذا التحسن ، يمكنك أن ترى أن وقت تنفيذ الرسوم المتحركة سيستغرق ما يصل إلى 10 مللي ثانية فقط. ومع ذلك ، لم يتم حل المشكلة بالكامل. إذا قمت بفحص عنصر Test2 في أداة تطوير المتصفح ، فستجد أن العرض النهائي لـ Test2 قد يكون أكثر من 200 بكسل. إذا قمت بالتحقق من رمز دالة ANIMATE2 بعناية ، فستجد:
1. قد تكون قيمة النسبة المئوية أكبر من 1 ، والتي يمكن حلها عن طريق الحد من القيمة القصوى بواسطة Math.Min.
2. حتى إذا كانت قيمة النسبة المئوية مضمونة لا تزيد عن 1 ، طالما أن القيمة النهائية أو البدء تكون عشرية ، فإن قيمة (endvalue - startvalue) * قد تسبب النسبة المئوية أخطاء ، لأن عملية العشرية Javascript غير دقيقة بما فيه الكفاية. في الواقع ، ما نحتاج إلى ضمانه هو دقة القيمة النهائية ، لذلك عندما تكون النسبة المئوية 1 ، ما عليك سوى استخدام القيمة النهائية مباشرة.
لذلك ، يتم تعديل رمز وظيفة animate2 إلى:
نسخة الكود كما يلي:
دالة ANIMATE2 (العنصر ، القيمة النهائية ، المدة) {
var startTime = New Date () ،
startValue = parseint (element.style.width) ؛
var timerid = setInterval (function () {
// تأكد من أن النسبة المئوية ليست أكبر من 1
VAR PANDATION = MATH.MIN (1 ، (تاريخ جديد - وقت البدء) / المدة) ؛
var stepvalue ؛
إذا (النسبة المئوية> = 1) {
// ضمان دقة القيمة النهائية
stepvalue = endvalue ؛
} آخر {
stepvalue = startValue + (endvalue - startValue) * النسبة المئوية ؛
}
element.style.width = stepvalue + 'px' ؛
إذا (النسبة المئوية> = 1) {
ClearInterval (timerid) ؛
element.innerhtml = تاريخ جديد - وقت البدء ؛
}
} ، 13) ؛
}
هناك سؤال أخير آخر: لماذا يتم تعيين فاصل SetInterval على 13 مللي ثانية؟ والسبب هو أن معدل تحديث الشاشة في الوقت الحالي لا يتجاوز 75 هرتز (أي ، يتم تحديثه 75 مرة في الثانية ، مما يعني أنه يتم تحديثه كل 13 مللي ثانية) ، ومزامنة الفاصل الزمني مع معدل التحديث أفضل.