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

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

لماذا تحريك صور SVG؟

قبل أن ننتقل إلى الأساليب المحددة، من المفيد أن نفهم سبب كون الرسوم المتحركة SVG مفيدة جدًا:

استقلالية الدقة: تبدو ملفات SVG واضحة في أي كثافة للشاشة، وهو أمر بالغ الأهمية لدعم درجات دقة الأجهزة المتنوعة.

أحجام الملفات الصغيرة: بالمقارنة مع العديد من تنسيقات الصور النقطية، عادةً ما تحتوي ملفات SVG على أحجام ملفات أصغر، خاصة عندما تتضمن الرسوم المتحركة أشكالًا هندسية بسيطة وألوانًا محدودة.

قابلية المعالجة: يمكن معالجة ملفات SVG من خلال CSS وJavaScript، مما يوفر المرونة في كيفية تنفيذ الرسوم المتحركة والتحكم فيها.

إمكانية الوصول: يظل النص الموجود داخل ملفات SVG قابلاً للتحديد والبحث، مما يعزز سهولة الاستخدام وإمكانية الوصول.

الطريقة الأولى: انتقالات CSS

إحدى أبسط الطرق لبدء تحريك SVG هي استخدام انتقالات CSS. تسمح لك انتقالات CSS بتغيير خصائص SVG بسلاسة خلال مدة محددة.

مثال: تدوير الترس

تخيل أن لديك صورة SVG للترس. تريد أن يدور هذا الترس بشكل مستمر للإشارة إلى عملية أو حالة تحميل.

#gear {
  transition: transform 2s linear infinite;
}

#gear:hover {
  transform: rotate(360deg);
}

في CSS، نحدد أن خاصية التحويل الخاصة بالترس يجب أن تنتقل خلال ثانيتين بشكل خطي ولا نهائي. عندما يحوم المستخدم فوق الترس، فإنه يدور 360 درجة.

الطريقة الثانية: الإطارات الرئيسية لـ CSS

للحصول على رسوم متحركة أكثر تعقيدًا، توفر إطارات CSS الرئيسية التحكم الذي تحتاجه. تتيح لك الإطارات الرئيسية تحديد قيم الخاصية في مراحل مختلفة من الرسوم المتحركة.

مثال: الدائرة النابضة

دعونا نحرك دائرة لتنبض وتنمو وتتقلص باستمرار.

@keyframes pulse {
  0%, 100% {
    r: 30;
  }
  50% {
    r: 40;
  }
}
circle {
  animation: pulse 2s infinite;
}

هنا، يحدد @keyframes الرسوم المتحركة النبضية حيث يتغير نصف القطر (r) للدائرة.

الطريقة الثالثة: الرسوم المتحركة SVG SMIL

SMIL (لغة تكامل الوسائط المتعددة المتزامنة) هي لغة قائمة على XML تتيح الرسوم المتحركة المعقدة مباشرة داخل ملفات SVG.

مثال: التحرك على طول المسار

تخيل تحريك كائن للتحرك على طول مسار محدد مسبقًا.

تتحرك الدائرة على طول المنحنى المحدد بالمسار، وذلك بفضل عنصر الحركة المتحركة.

الطريقة الرابعة: مكتبات جافا سكريبت (GreenSock)

تعمل العديد من مكتبات JavaScript، مثل GreenSock (GSAP)، على تسهيل الرسوم المتحركة المعقدة لـ SVG. يتميز GSAP بأداء عالٍ ويعمل عبر جميع المتصفحات الرئيسية.

مثال: الكرة النطاطة

إليك كيفية إنشاء رسم متحرك للكرة المرتدة باستخدام GSAP:

gsap.to("#ball", {
  y: 60,
  duration: 1,
  ease: "bounce.out",
  repeat: -1,
  yoyo: true
});

ترتد الكرة باستمرار بتأثير اليويو مما يجعلها تتحرك ذهابًا وإيابًا.

الطريقة الخامسة: متغيرات JavaScript وCSS

استخدام JavaScript جنبًا إلى جنب مع متغيرات CSS (الخصائص المخصصة) يمكن أن يجعل رسوم SVG المتحركة تستجيب لتفاعلات المستخدم أو الشروط الديناميكية الأخرى.

مثال: تغيير اللون

لنفترض أنك تريد تغيير لون التعبئة لعنصر SVG بناءً على موضع المؤشر.

document.addEventListener("mousemove", function(e) {
  const color = e.clientX > window.innerWidth / 2 ? 'red' : 'blue';
  document.documentElement.style.setProperty('--color', color);
});

هنا يتغير لون الدائرة مع تحرك الماوس أفقيًا عبر الشاشة.

الطريقة السادسة: مرشحات SVG للرسوم المتحركة

تعتبر مرشحات SVG أدوات قوية لتطبيق التأثيرات المرئية المعقدة على عناصر SVG من خلال الرسوم المتحركة.

مثال: تأثير التمويه

يمكن لتأثير التمويه المتحرك أن يخلق إحساسًا بالحركة أو التغيير.

@keyframes blur {
  from {
    stdDeviation: 0;
  }
  to {
    stdDeviation: 5;
  }
}
circle {
  animation: blur 8s infinite alternate;
}

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

مثال: كشف النص

يمكن الكشف عن النص تدريجيًا باستخدام مسار القطع المتحرك.

@keyframes reveal {
  from {
    width: 0;
  }
  to {
    width: 100;
  }
}
rect {
  animation: reveal 5s forwards;
}

النص مرحبًا! ينكشف تدريجياً من اليسار إلى اليمين.

الطريقة الثامنة: تحويل الأشكال

يمكن تحقيق تحويل الشكل باستخدام العديد من المكتبات وميزات SVG الأصلية، مما يؤدي إلى إنشاء انتقالات سلسة بين الأشكال المختلفة.

مثال: التحويل من القلب إلى الدائرة

من الأمثلة الشائعة تحويل شكل القلب إلى دائرة.

/* Add keyframes for morphing */

باستخدام مكتبات مثل Flubber أو حتى CSS، يتم إدخال خاصية "d" للمسارات بين أشكال القلب والدائرة.

الطريقة التاسعة: التدرجات المتحركة

يمكن أيضًا أن تكون التدرجات في SVG متحركة، ومفيدة للخلفيات النابضة بالحياة أو العناصر الجذابة.

مثال: الرسوم المتحركة في الخلفية المتدرجة

يمكن أن يكون التدرج الشعاعي المتحرك الذي يغير الألوان بمثابة خلفية ديناميكية.

تنتقل تعبئة هذا المستطيل بسلاسة عبر مجموعة من الألوان، مما يؤدي إلى إنشاء تأثير خلفية حيوي.

مثال: تغيير اللون التفاعلي

تفاعل بسيط حيث يتغير لون SVG عند النقر.

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

document.querySelector('svg').addEventListener('click', function() {
  this.querySelector('circle').setAttribute('fill', 'pink');
});

بالنقر على SVG، يتغير لون تعبئة الدائرة إلى اللون الوردي، مما يوضح رسمًا متحركًا تفاعليًا بسيطًا.

خاتمة

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