مخططات التوقيت: طريقة عملية لتنظيم رسوم SMIL المتحركة داخل SVG
يستعرض مقال من Smashing Magazine استخدام مخططات التوقيت لتخطيط وإدارة رسوم SMIL المتحركة في SVG. الأسلوب مفيد خصوصاً عندما تتعدد العناصر والخصائص المتحركة، إذ يوضح العلاقات الزمنية بينها عبر قيم syncbase مثل `animation.end - 300ms`، مع إمكانية تشغيل SVG المتحرك داخل `<img>` ومن دون JavaScript.
أبرز النقاط
- SMIL يتيح تحريك عناصر وخصائص SVG من دون JavaScript، ويمكن أن يعمل الرسم عند تضمينه عبر `<img>`.
- كل وسم `<animate>` في SMIL يستهدف عنصراً واحداً وخصيصة واحدة، ما يجعل الرسوم المركبة طويلة وصعبة المتابعة.
- مخطط التوقيت يرسم بدايات ونهايات الرسوم الفرعية لتوضيح التتابع والتداخل بينها قبل أو أثناء كتابة الكود.
- تسمح قيم syncbase مثل `colorChange.end - 300ms` بربط توقيت حركة بنهاية أو بداية حركة أخرى بدلاً من توزيع أوقات مطلقة.
- ينبغي تحديد استراتيجية دعم `prefers-reduced-motion` مبكراً، خاصة إذا كان الرسم يتضمن حركة مكانية.
تقدم Smashing Magazine دليلاً عملياً لتنظيم رسوم SVG المتحركة باستخدام SMIL، عبر تحويل التسلسل الزمني للحركة إلى مخطط بصري بسيط قبل كتابة الـ markup.
SMIL، أو Synchronized Multimedia Integration Language، هو أسلوب لتحريك عناصر وخصائص SVG مباشرة. ووفق المقال، يمكن لرسوم SMIL أن تعمل داخل وسم <img> مثل رسوم CSS، مع قدرة على تحريك خصائص SVG لا تملك دائماً مقابلات CSS، ومن دون الحاجة إلى JavaScript.
لكن المقابل هو أن كود SMIL قد يتضخم بسرعة: كل وسم <animate> يستهدف عنصراً واحداً وخصيصة واحدة فقط. لذلك يقترح المقال البدء بتسمية الرسوم المتحركة بأسماء وIDs وصفية، ثم رسم مخطط توقيت يبيّن متى يبدأ وينتهي كل جزء من الحركة.
ما الذي تضيفه مخططات التوقيت؟
مخطط التوقيت عبارة عن خطوط تمثل الرسوم الفرعية، تُرتَّب وفق مواضعها الزمنية: رسوم تبدأ معاً، وأخرى تتتابع، وأخرى تتداخل. لا يشترط أن يكون الرسم بمقياس دقيق، ما دام يوضح الترتيب والفواصل النسبية بين الأجزاء.
الفكرة تصبح مهمة في الرسوم متعددة الخطوات، حيث يصعب معرفة أي عنصر يبدأ أولاً وأي حركة تعتمد على اكتمال حركة أخرى بمجرد قراءة عدد كبير من وسوم <animate>.
ربط الحركات بـ syncbase
يركز الدليل على قيم syncbase في SMIL، التي تربط بداية حركة ببداية أو نهاية حركة أخرى. مثلاً، يمكن تشغيل حركة تغيير الشفافية قبل نهاية تغيير اللون بـ300ms:
<animate
id="colorChange"
begin="1s"
...
/>
<animate
id="opacityChange"
begin="colorChange.end - 300ms"
...
/>
بهذه الصيغة، تصبح العلاقة الزمنية صريحة في الكود بدلاً من الاعتماد على أوقات مطلقة متفرقة. كما يمكن اختيار حركة رئيسية وربط بقية الحركات بها عبر صيغة مثل begin="primary.begin"، ما يسهّل نقل المجموعة كلها زمنياً لاحقاً.
يعرض المقال مثال spinner بثلاث نقاط، حيث تُفصل عمليات الظهور والاختفاء إلى وسوم <animate> مستقلة، ثم تتغير النتيجة البصرية فقط عبر تعديل ترتيب هذه العمليات وتوقيتها. يمكن جعل النقاط تظهر بالتتابع ثم تختفي معاً، أو جعل الاختفاء متدرجاً أيضاً، أو بدء التسلسل بحركة اختفاء.
الحركة المخففة ليست تفصيلاً ثانوياً
يلفت المقال إلى ضرورة احترام تفضيل المستخدم prefers-reduced-motion. ويقترح التفكير في طريقة تضمين الرسم منذ البداية: يمكن استخدام <picture> لتوفير بدائل عبر source وmedia، أو صورة خلفية CSS مع fallback ثابت ضمن media query، أو أساليب أخرى مثل <view> في SVG أو التحكم عبر matchMedia() وواجهة SMIL DOM عند الحاجة إلى JavaScript.
في المثال المعروض، يقتصر التحريك على opacity باعتباره أقل إزعاجاً عادةً، بينما يشير المقال إلى أن استخدام الحركة الفعلية قد يستدعي تقديم نسخة أكثر ملاءمة لتفضيلات تقليل الحركة.
ويمتد المثال لاحقاً بإضافة clipPath ومستطيلات متحركة لتغيير مظهر حدود النقاط، مع استخدام fill="freeze" لتثبيت بعض القيم ووسوم <set> لإعادة الخصائص إلى حالتها الابتدائية قبل تكرار الحلقة.
الخلاصة: مخططات التوقيت لا تقلل عدد وسوم SMIL، لكنها تمنح المصمم أو المطور خريطة واضحة لتسلسل الحركة وعلاقاتها. وهي فكرة يمكن تطبيقها أيضاً عند العمل بـCSS أو JavaScript، حتى لو كانت صيغة syncbase نفسها خاصة بـSMIL.
لماذا يهم؟
للمصممين والمطورين الذين يبنون SVG متحركاً متعدد الخطوات، المشكلة غالباً ليست تنفيذ الحركة الأولى بل الحفاظ على فهم تسلسلها عند التعديل. مخططات التوقيت وsyncbase تجعل الاعتماد الزمني بين الأجزاء مقروءاً وقابلاً للصيانة، فيما يظل التفكير المبكر في `prefers-reduced-motion` ضرورياً لتقديم بديل مناسب للمستخدمين الذين يفضلون تقليل الحركة.