CSS الرسوم المتحركة الرقمية ، على سبيل المثال ، تخيل رقمًا يتغير من 1 إلى 2 ، ثم يتغير من 2 إلى 3 ، ثم يتغير من 3 إلى 4 ، وما إلى ذلك ، يدوم لفترة محددة. إنه مثل عداد ، ولكن يتم التحكم فيه بواسطة نفس الرسوم المتحركة التي نستخدمها لتصميم الرسوم المتحركة على الويب. يمكن أن يكون هذا مفيدًا عند تصميم أشياء مثل لوحات المعلومات ويمكن أن تضيف بعض الحيوية إلى الأرقام. من المستغرب أن هذا ممكن الآن في CSS دون مهارة كبيرة. يمكنك القفز مباشرة إلى الحل الجديد إذا أردت ، ولكن أولاً دعنا نرى كيف اعتدنا على للقيام بذلك.

طريقة منطقية إلى حد ما لأرقام الرسوم المتحركة هي تغيير الأرقام من خلال JavaScript. يمكننا أن نفعل مجموعة SetInterval بسيطة إلى حد ما ، ولكن فيما يلي إجابة أكثر تقدماً تستخدم وظيفة تقبل قيمة البداية والقيمة النهائية والمدة ، حتى تتمكن من معاملتها مثل الرسوم المتحركة:

إذا استخدمنا فقط CSS ، فيمكننا استخدام عداد CSS لتحريك الأرقام من خلال ضبط التهم في إطارات المفاتيح المختلفة:

طريقة أخرى تتمثل في ربط جميع الأرقام في صف واحد وتحريك مواقفها ، مما يدل على رقم واحد فقط في وقت واحد:

يمكن لبعض التعليمات البرمجية المكررة في هذه الأمثلة استخدام المعالجات المسبقة مثل Pug (لأجهزة HTML) أو SCSS (بالنسبة إلى CSS) التي توفر حلقات لتسهيل إدارتها ، ولكن استخدام التعليمات البرمجية الأصلية عمداً لأغراض حتى تتمكن من رؤية الفكرة الأساسية.

حل CSS جديد

مع أحدث دعم لـ CSS.RegisterProperty و @property ، يمكننا

تحريك متغيرات CSS . الحيلة هي إعلان خصائص CSS المخصصة كمناسبات صحيحة ؛ يتيح لك هذا الاستيلاء عليها مثل أي عدد صحيح آخر (على سبيل المثال في التحويل).

@property -num { بناء الجملة: '

@property --num {
  syntax: '';
  initial-value: 0;
  inherits: false;
}

div {
  transition: --num 1s;
  counter-reset: num var(--num);
}
div:hover {
  --num: 10000;
}
div::after {
  content: counter(num);
}

ملاحظة مهمة: في وقت كتابة هذا التقرير ، يتم دعم بناء جملة property هذا فقط بواسطة Chrome (بالإضافة إلى متصفحات نواة الكروم الأخرى مثل Edge و Opera) ، لذلك فهي غير متوافقة مع الساقين. إذا كنت تقوم ببناء تطبيق Chrome فقط (مثل تطبيق الإلكترون) ، فيمكنك استخدامه على الفور ، وإلا الانتظار. العرض التوضيحي المذكور أعلاه لديه دعم أوسع. يمكن استخدام خاصية محتوى CSS لعرض الأرقام

لعرض الأرقام ، لكن لا يزال يتعين علينا استخدام العداد لتحويل الأرقام إلى سلاسل ، لأن المحتوى لا يمكن أن يخرج إلا قيم

. معرفة ما إذا كان يمكننا تخفيف الرسوم المتحركة مثل أي رسوم متحركة أخرى؟ رائع!

يمكن أيضًا استخدام متغيرات CSS النموذجية في @keyframes: عيب؟ العدادات تدعم الأعداد الصحيحة فقط. هذا يعني أن العشرية والكسور لا تعتبر. علينا أن نعرض الجزء الصحيح والجزء العشري بشكل منفصل بطريقة ما.

هل يمكننا تحريك العشرية؟

يمكنك تحويل العشرات العشرية (مثل -رقم) إلى أعداد صحيحة. إليكم كيف يعمل:

قم بتسجيل A

متغير CSS (على سبيل المثال-integer) وحدد القيمة الأولية.
1. ثم استخدم calc () إلى الجولة:-integer: calc (var (-number))
في هذه الحالة ، سوف يدور رقم عدد صحيح إلى أقرب عدد صحيح وتخزين النتيجة -
@property -integer { بناء الجملة: "

" ؛ القيمة الأولية: 0 ؛ وراثة: خطأ. } -رقم: 1234.5678 ؛ -integer: calc (var (-number)) ؛ / * 1235 */

في بعض الأحيان نحتاج فقط إلى أجزاء عدد صحيح. هناك طريقة ذكية للقيام بذلك:-ineger: max (var (-number)-0.5 ، 0). هذا ينطبق على الأرقام الإيجابية. هذه الطريقة لا تتطلب حتى calc ().

@property --integer {
  syntax: "";
  initial-value: 0;
  inherits: false;
}
--number: 1234.5678;
--integer: calc(var(--number)); /* 1235 */

يمكننا استخراج الجزء الكسري بطريقة مماثلة ثم تحويله إلى سلسلة باستخدام عداد (ولكن تذكر أن قيمة المحتوى يجب أن تكون سلسلة). لعرض السلسلة المتصلة ، استخدم بناء الجملة التالي:

/* @property --integer */
--number: 1234.5678;
--integer: max(var(--number) - 0.5, 0); /* 1234 */

هذا مثال كامل على تحريك النسبة المئوية الكسرية:

content: "string1" var(--string2) counter(--integer) ...

لأننا نستخدم عدادات CSS ، يمكن أن يكون تنسيق هذه العدادات في تنسيقات أخرى غير الأرقام. فيما يلي مثال على تحريك الرسالة "CSS" إلى "نعم"!

أوه ، هناك خدعة أخرى: يمكننا استخدام JavaScript للحصول على القيمة المحسوبة للخصائص المخصصة لتصحيح القيمة:

getComputedStyle (element) .getPropertyValue ('-variable')

هذا كل شيء! ميزات CSS اليوم مذهلة.