توقيت حركة CSS: أين تبدأ القيمة السالبة وأين تنتهي الحركة؟

الخلاصة السريعة

• أعطت حالتانا الموجبتان القيمة نفسها أثناء الحركة، واختلفتا قبلها وبعدها.
• بدأت الحالة C عند الإزاحة 40 وانتهت عند 80.
• انتهت الحالة D عند الصفر بعد الرجوع، مع وجود forwards.
• كل أزمنتنا ضبط صريح لحركة موقوفة، وليست مدة انتظار مقيسة.

أربع حالات وأرقام ثابتة

اخترنا عنصرا مربعا له إزاحة أساسية مقدارها سالب 20 بكسلا. حددنا إطارين للحركة: من صفر إلى 80 بكسلا، ومدة الدورة 2000 ميلي ثانية، وتدرجا خطيا. الأرقام اختيارات لهذا الاختبار؛ الإزاحة هنا مقدار التحويل الأفقي وليست موضع العنصر المطلق على الشاشة.

ثبتنا أزمنة القراءة عند صفر و500 و1500 و4000. لا تبدأ الصفوف من قيم محفوظة لصف سابق؛ كل حالة لها عنصر جديد وإعداداتها المعلنة. في الجدول الأول نكتب التأخير والتعبئة والاتجاه وعدد الدورات، كي نستطيع تفسير كل نتيجة من إعدادها.

افصل زمن القراءة عن التأخير

تتيح currentTime ضبط زمن الحركة بالميلي ثانية وهي موقوفة أيضا. [4]

ضبطنا الزمن مباشرة بدلا من الانتظار بين القراءات. لذلك لا تعني خانة 4000 أن التنفيذ استغرق أربع ثوان على ساعة الحاسوب. حفظنا التحويل المحسوب في كل خانة؛ لم نحسبه من موضع مؤشر أو من مدة عرض لقطة.

في A وB اخترنا تأخيرا موجبا مقداره 1000. عند القراءة 1500 يكون الفرق 500، أي ربع دورتنا ذات المدة 2000. ومع إطارينا صفر و80، يعطي ربع المسافة القيمة 20. هذا حساب من الأرقام التي عيناها، وتطابق مع قراءة المتصفح للحالتين.

نفس الوسط، ونهايتان مختلفتان

مع none لا تطبق الحركة قيمها خارج التنفيذ؛ تجمع both أثر التعبئة قبل التنفيذ وبعده. [2]

رأينا في A سالب 20 عند الزمنين صفر و500، ثم 20 عند 1500، ثم سالب 20 مجددا عند 4000. هذه القيمة الخارجية هي التي كتبناها أصلا في إعداد العنصر، وليست إطار النهاية 80.

أبقت B المدة والإطارين والتأخير نفسيهما، وغيرنا التعبئة وحدها. ظهرت القيمة صفر في القراءتين الأوليين، و20 في الثالثة، و80 في الأخيرة. لو احتفظنا بلقطة الزمن 1500 فقط، لما فرقت اللقطة بين الحالتين؛ نحتاج نقاطا من أجزاء مختلفة في سجل الاختبار.

القيمة السالبة تنقل نقطة البداية

في C وضعنا التأخير عند سالب 1000 مع both ودورة واحدة. كانت قراءتا صفر و500 هما 40 و60؛ يوافقهما نصف المسافة وثلاثة أرباعها في اختيارنا الخطي. وعند 1500 و4000 قرأنا 80 في المرتين.

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

لماذا تبقي forwards صفرا في D؟

تعكس alternate الاتجاه بين الدورات وتبدأ إلى الأمام. [3]

خصصنا D لدورتين مع تأخير سالب 3000. في تسلسلنا المختار انتهى الذهاب عند 2000، ثم بدأ الرجوع. عند زمن القراءة صفر نختبر الموضع 3000 في ذلك التسلسل: منتصف الرجوع، فظهرت 40. وعند 500 نختبر 3500، فظهرت 20.

بعد اكتمال الرجوع كانت النتيجة صفرا عند القراءتين 1500 و4000. يحسب الرسم الداخل مسار دورتينا فقط، ثم يضع نقاط القراءة عليه؛ لا يزعم أن المربع زار كل تلك النقاط خلال انتظار فعلي في الاختبار.

تحفظ forwards آخر إطار؛ ومع alternate ودورتين يكون البداية. [2]

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

أعد القراءات من ملف بسيط

احفظ المقطع الأول في ملف HTML وافتحه، ثم شغل الثاني في وحدة تحكم المتصفح. [1] [2] [3] [4]

تظهر أربعة جداول بالترتيب A ثم B ثم C ثم D. تنشئ الدالة في كل مرة نسخة جديدة من القالب؛ تقرأ التحويل ثم تزيل عنصر الاختبار. نفذنا المقطعين المعروضين في Edge 155.0.4283.45، وفحصنا القيم الست عشرة مقابل الجدول.

هذا فحص لحالاتنا المحددة، لا مقارنة أداء بين متصفحات ولا وصف لحركة مرتبطة بالتمرير. إذا بدلت العدد أو الاتجاه أو التعبئة، فاحتفظ بإعدادك مع النتائج. السجل الكامل يشرح قيمة البداية وقيمة الوسط وما بقي بعد النهاية؛ رقم منفرد لا يقدم هذا التفسير.

<style>
@keyframes shift {
  from {transform:translateX(0px)}
  to {transform:translateX(80px)}
}
.probe {
  width:20px;height:20px;background:teal;
  transform:translateX(-20px);
  animation:shift 2000ms linear 1000ms 1 normal none paused;
}
</style>
<template id="fixture"><div class="probe"></div></template>

function sample(delay,fill,direction,count) {
  const box=document.querySelector("#fixture")
    .content.firstElementChild.cloneNode(true);
  document.body.append(box);
  box.style.animationDelay=delay+"ms";
  box.style.animationFillMode=fill;
  box.style.animationDirection=direction;
  box.style.animationIterationCount=count;
  const a=box.getAnimations()[0];
  const rows=[];
  for(const t of [0,500,1500,4000]) {
    a.currentTime=t;
    const value=getComputedStyle(box).transform;
    rows.push([t,new DOMMatrix(value).m41]);
  }
  box.remove();
  return rows;
}
console.table(sample(1000,"none","normal",1));
console.table(sample(1000,"both","normal",1));
console.table(sample(-1000,"both","normal",1));
console.table(sample(-3000,"forwards","alternate",2));

[1] [2] [3] [4]

المراجع

1. MDN: animation-delay
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-delay
2. MDN: animation-fill-mode
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-fill-mode
3. MDN: animation-direction
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-direction
4. MDN: currentTime
   https://developer.mozilla.org/en-US/docs/Web/API/Animation/currentTime