رسوم متحركة بصيغة SVG

📅 آخر تحديث: ٣١ يوليو ٢٠٢٦
✍️ نُشر في: ٣١ يوليو ٢٠٢٦
📷 يحتوي على 7 صور
الموسوعة الحرة

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

تمت كتابة المكتبات أيضًا كطبقة وسيطة لتوفير دعم SMIL للمتصفحات الحالية التي تدعم SVG. [ 9 ] تُعرف هذه الطريقة أيضًا باسم SVG+Time.

نظرًا لأن SVG يدعم صور PNG و JPEG النقطية، فيمكن استخدامه لتحريك هذه الصور كبديل لـ APNG و Multi-image Network Graphics (MNG).

تاريخ

طُوِّرت عناصر الرسوم المتحركة في SVG بالتعاون مع فريق العمل الذي نشر عدة إصدارات من لغة تكامل الوسائط المتعددة المتزامنة (SMIL). وقد طوّر فريق عمل SYMM (بالتعاون مع فريق عمل SVG) مواصفات SMIL للرسوم المتحركة، والتي تُعرّف مجموعة ميزات رسوم متحركة عامة الأغراض قائمة على XML. تتضمن SVG ميزات الرسوم المتحركة المُعرّفة في مواصفات SMIL للرسوم المتحركة، وتُقدّم بعض الإضافات الخاصة بـ SVG.

في يونيو 1998، نشرت "مجموعة عمل الوسائط المتعددة المتزامنة" (المعروفة اختصارًا بـ "SYMM" [ 10 ] ) التابعة لاتحاد شبكة الويب العالمية ("W3C") النسخة الأولى الموصى بها من المواصفات المعروفة باسم "SMIL 1.0". [ 11 ] [ 12 ] بعد فترة وجيزة من نشر SMIL 1.0 عام 1998، نشرت مجموعة من الشركات بقيادة مايكروسوفت " امتدادات الوسائط المتعددة التفاعلية الموقوتة لـ HTML (HTML+TIME)؛ توسيع SMIL إلى متصفح الويب ". [ 13 ] على مدى العامين التاليين، عمل المؤلف الرئيسي لـ HTML+TIME (باتريك شميتز) مع مجموعة عمل SYMM، بالإضافة إلى عمله مع مجموعة عمل SVG. بعد فترة وجيزة من نشر SMIL 2.0، قام شميتز والمؤلف المشارك آرون كوهين (من شركة إنتل ) بنشر SMIL Animation في 4 سبتمبر 2001. [ 14 ] [ 15 ] كما أصبح SVG 1.0 توصية من W3C في 4 سبتمبر 2001.

أضافت بعض متصفحات الويب دعمًا لرسوم SVG المتحركة خلال العقد الأول من الألفية الثانية، بما في ذلك متصفح Amaya منذ عام 2003، إلا أن دعم هذه الرسوم لم يبدأ إلا في المتصفحات واسعة الانتشار بدءًا من العقد الثاني من الألفية الثانية، وتحديدًا في متصفح Firefox 4 (2011). يدعم متصفح Internet Explorer رسوم ECMAScript المتحركة، بينما يدعم متصفح Microsoft Edge، الذي خلفه، رسوم ECMAScript وCSS المتحركة بدءًا من الإصدار 42.17134.

أمثلة

توضح مقتطفات الشفرة البرمجية التالية ثلاث تقنيات لإنشاء صور SVG متحركة على المتصفحات المتوافقة. الأجزاء ذات الصلة مُظللة باللون الأصفر. انقر على الصور المصغرة لمشاهدة نسخها المتحركة.

رسوم متحركة بصيغة SVG باستخدام لغة SMIL

انظر إلى ملف الرسوم المتحركة SVG باستخدام SMIL.svg .
رسوم متحركة بصيغة SVG باستخدام لغة SMIL
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">العرض = "100%" الارتفاع = "100%" مربع العرض = "-4 -4 8 8" ><title> رسوم متحركة بصيغة SVG باستخدام SMIL </title><circle cx= "0" cy= "1" r= "2" stroke= "red" fill= "none" ><animateTransformاسم السمة = "تحويل"attributeType= "XML"النوع = "تدوير"من = "0"إلى= "360"المدة = "1 ثانية"repeatCount= "indefinite" /></circle></svg>

رسوم متحركة SVG باستخدام CSS

انظر ملف SVG animation using CSS.svg .
رسوم متحركة SVG باستخدام CSS
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">العرض = "100%" الارتفاع = "100%" مربع العرض = "-4 -4 8 8" ><title> رسوم متحركة SVG باستخدام CSS </title><style>@keyframes rot_kf { من { تحويل: تدوير(0 درجة)؛ } إلى { تحويل: تدوير(360 درجة)؛ } } .rot { animation: rot_kf 1s linear infinite; } </style><circle class= "rot">cx= "0" cy= "1" r= "2" stroke= "blue" fill= "none" /></svg>

رسوم متحركة بصيغة SVG باستخدام ECMAScript

رسم لعمود إنارة يمكن استخدامه بشكل تفاعلي
إشارة مرور متحركة باستخدام رسوم متحركة SVG وجافا سكريبت
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width= "100%" height= "100%" viewBox= "-4 -4 8 8" onload= "rotate(evt)" ><title> رسوم متحركة SVG باستخدام ECMAScript </title><script>دالة تدوير(evt) { const object = evt.target.ownerDocument.getElementById('rot'); setInterval(() => { const now = new Date(); const milliseconds = now.getTime() % 1000; const degrees = milliseconds * 0.36; // 360 درجة في 1000 مللي ثانية object.setAttribute('transform', `rotate(${degrees})`); }, 20); } </script><circle id= "rot"cx= "0" cy= "1" r= "2" stroke= "green" fill= "none" /></svg>

على الرغم من أن المثال أعلاه يعمل، إلا أنه ليس التطبيق الأمثل؛ إذ يقتصر معدل عرض الرسوم المتحركة على 50 إطارًا في الثانية. requestAnimationFrameيوفر استخدام [اسم الأداة/التقنية] أداءً أفضل ويمكن أن يصل إلى 60 إطارًا في الثانية.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width= "100%" height= "100%" viewBox= "-4 -4 8 8" onload= "init()" ><title> رسوم متحركة SVG باستخدام requestAnimationFrame() </title><script>let object; دالة init() { object = document.getElementById('rot');window.requestAnimationFrame(rotate); } دالة تدوير(الطابع الزمني) { const milliseconds = timestamp % 1000; const degrees = milliseconds * 0.36; // 360 درجة في 1000 مللي ثانية object.setAttribute('transform', `rotate(${degrees})`); window.requestAnimationFrame(rotate); } </script><circle id= "rot" cx= "0" cy= "1" r= "2" stroke= "green" fill= "none" /></svg>

سمات SMIL لتحديد السمة المستهدفة

فيما يلي سمات الرسوم المتحركة التي تحدد السمة المستهدفة للعنصر المستهدف المحدد، والتي تتغير قيمتها بمرور الوقت. attributeName = "<attributeName>"يحدد اسم السمة المستهدفة. يمكن استخدام بادئة XMLNS للإشارة إلى مساحة اسم XML للسمة. سيتم تفسير البادئة في نطاق عنصر الرسوم المتحركة الحالي.

attributeType = "CSS | XML | auto"يُحدد هذا الخيار نطاق الاسم الذي تُعرَّف فيه السمة المستهدفة وقيمها المرتبطة بها. CSSويُحدد أن قيمة 'attributeName' هي اسم خاصية CSS مُعرَّفة على أنها قابلة للتحريك في هذه المواصفة . XMLكما يُحدد أن قيمة 'attributeName' هي اسم سمة XML مُعرَّفة في نطاق اسم XML الافتراضي للعنصر المستهدف. يجب تعريف السمة على أنها قابلة للتحريك في هذه المواصفة . auto القيمة الافتراضية هي 'auto'. يجب أن يُطابق التنفيذ 'attribute Name' مع سمة للعنصر المستهدف. يجب على التنفيذ أولاً البحث في قائمة خصائص CSS عن اسم خاصية مطابق، وإذا لم يتم العثور على أي منها، فعليه البحث في نطاق اسم XML الافتراضي للعنصر.

يقوم برنامج ويكي ميدياويكي تلقائيًا بإنشاء صور مصغرة ثابتة وغير متحركة لصور SVG. عند عرض صورة SVG الأصلية من صفحة الوصف الخاصة بكل منها، ستظهر حركتها في متصفح متوافق.

المكتبات

تتوفر العديد من مكتبات جافا سكريبت للتعامل مع رسوم SVG المتحركة. ومن مزايا استخدام هذه المكتبات أنها غالبًا ما تحل مشكلات عدم التوافق بين المتصفحات من خلال التجريد . ومن أمثلة هذه المكتبات Raphaël و Velocity.js.

انظر أيضاً

مراجع

  1. ↑ "مواصفات الرسومات المتجهة القابلة للتوسيع (SVG) 1.1" . اتحاد شبكة الويب العالمية . يناير 2003 - أبريل 2009. مؤرشف من الأصل في 27 أغسطس 2006. تم الاطلاع عليه في 4 فبراير 2010 .
  2. ↑ فيستا، بول (9 يناير 2003). "اتحاد شبكة الويب العالمية يُصدر معيارًا للبرمجة النصية، مع بعض التحفظات" . سي نت . مؤرشف من الأصل في 17 مايو 2011. تم الاطلاع عليه في 24 فبراير 2010 .
  3. ↑ بولترمان، دي سي إيه ؛ لويد روتليدج (نوفمبر 2008). SMIL 3.0: الوسائط المتعددة التفاعلية للويب والأجهزة المحمولة والكتب الصوتية ديزي . X.media.publishing ( الطبعة الثانية). نيويورك: سبرينغر. ص 508. ISBN   9783540785460أُرشف من المصدر الأصلي بتاريخ 24 أبريل 2022. تم الاطلاع عليه بتاريخ 24 أبريل 2022 .
  4. ↑ ديك بولترمان . SMIL 3.0 . مؤرشف من الأصل بتاريخ 24-04-2022 . تم الاطلاع عليه بتاريخ 24-04-2022 .
  5. ↑ "دعم الرسوم المتحركة SVG في برنامج أمايا" . اتحاد شبكة الويب العالمية . 15 أبريل 2003. مؤرشف من الأصل في 11 سبتمبر 2009. تم الاطلاع عليه في 4 فبراير 2010 .
  6. ↑ ماكاثي نيفيل، تشارلز (31 أكتوبر 2006). "تحريك ملفات SVG" . مجتمع مطوري أوبرا . برمجيات أوبرا . مؤرشف من الأصل في 7 مارس 2010. تم الاطلاع عليه في 24 فبراير 2010 .
  7. ↑ "رسوم متحركة بصيغة SVG باستخدام SMIL" . 29 مارس 2011. مؤرشف من الأصل في 30 أبريل 2011. تم الاطلاع عليه في 29 مارس 2011 .
  8. ↑ "متى يمكنني استخدام رسوم متحركة SVG SMIL؟" . مؤرشف من الأصل بتاريخ 22-03-2011 . تم الاطلاع عليه بتاريخ 29-03-2011 .
  9. ↑ دالستروم، إريك (أغسطس 2008). "حيل جافا سكريبت، SVG وSMIL" . برنامج أوبرا على موقع "SVG Open". مؤرشف من الأصل في 6 أبريل 2009. تم الاطلاع عليه في 24 فبراير 2010 .
  10. ↑ "الصفحة الرئيسية للوسائط المتعددة المتزامنة لاتحاد شبكة الويب العالمية" . www.w3.org . مؤرشف من الأصل بتاريخ 17 أبريل 2022. تم الاطلاع عليه بتاريخ 20 مارس 2022 .
  11. ↑ هوشكا، فيليب، محرر. (15-06-1998). "مواصفات لغة تكامل الوسائط المتعددة المتزامنة (SMIL) 1.0" . اتحاد شبكة الويب العالمية (W3C ). مجموعة عمل SYMM. مؤرشف من الأصل بتاريخ 30-03-2021 . تم الاطلاع عليه بتاريخ 09-04-2021 .
  12. ↑ خضيري، سالي؛ جاكوبس، إيان؛ ميتشل، نيد؛ لويد، أندرو؛ ماتسوبارا، يوميكو (15 يونيو 1998). "بيان صحفي: اتحاد شبكة الويب العالمية يُصدر SMIL كتوصية منه" . اتحاد شبكة الويب العالمية . مؤرشف من الأصل بتاريخ 8 فبراير 2020. تم الاطلاع عليه بتاريخ 9 أبريل 2021 .
  13. ↑ شميتز، باتريك؛ يو، جين؛ سانتانجيلي، بيتر (18 سبتمبر 1998). "امتدادات الوسائط المتعددة التفاعلية الموقوتة لـ HTML (HTML+TIME)؛ توسيع SMIL إلى متصفح الويب" . اتحاد شبكة الويب العالمية (w3.org) . مؤرشف من الأصل في 20 يناير 2022. تم الاسترجاع في 20 مارس 2022 .
  14. ↑ "لغة تكامل الوسائط المتعددة المتزامنة (SMIL 2.0)" . www.w3.org . 7 أغسطس 2001. مؤرشف من الأصل في 26 مارس 2022. تم الاطلاع عليه في 20 مارس 2022 .
  15. ↑ شميتز، باتريك؛ كوهين، آرون (4 سبتمبر 2001). "رسوم متحركة SMIL" . www.w3.org . مؤرشف من الأصل بتاريخ 14 يونيو 2022. تم الاطلاع عليه بتاريخ 20 مارس 2022 .