دليل إرشادي لرسوم متحركة SVG

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

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

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

الرسومات المتجهات قابلة لل

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

مواصفات SVG هي معيار مفتوح تم تطويره بواسطة World Wide Web Consortium (W3C) في عام 1999.

تتمتع جميع متصفحات الويب الرئيسية بدعم عرض SVG لفترة من الوقت الآن.

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

مسارات SVG

إذا كان هناك عنصر واحد تم التغلب عليه في SVG ، فسيكون هذا هو عنصر <path> .

عنصر المسار هو شكل أساسي يمكن استخدامه لإنشاء أي شكل ثنائي الأبعاد متقدم تقريبًا يمكنك تخيله.

يعمل العنصر بأخذ سلسلة من أوامر الرسم. إنها تشبه إلى حد كبير لغة برمجة Logo منذ عام 1967 ، وتم تحديثها وتصميمها فقط للرسومات الفاخرة. يأخذ العنصر هذا التسلسل من أوامر الرسم من خلال السمة d .

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

يمكنك التفكير في قلم افتراضي يرسم على الشاشة ، وتعليقات الرسم في عنصر المسار تتحكم فقط في القلم. في المثال أعلاه ، يُطلب من القلم التحرك إلى الموضع (10, 10) ( M10 10 ) ، لرسم خط إلى (75, 10) ( L75 10 ) ، لرسم خط إلى (75, 75) L75 75 ثم إغلاق المسار بالعودة إلى نقطة البداية ( Z ).

باستخدام أوامر رسم أخرى ، مثل الأقواس ( A ) ، ومنحنيات البيزير التربيعية ( Q ) ، ومنحنيات بيزير المكعبة ( C ) ، إلخ ، يمكنك إنشاء أشكال ورسومات أكثر تعقيدًا في SVG.

يمكنك معرفة المزيد عن عنصر المسار هنا.

مسارات SVG و CSS

"حسنًا خوان ، فهمت. المسارات قوية ، لكن كيف أحركها؟ " قول انت.

بالنسبة لتقنيتنا الأولى ، سنستفيد من سمتين من سمات SVG: stroke-dasharray و stroke-dashoffset .

تتحكم خاصية Str-dasharray في نمط الشرطات والفجوات المستخدمة في رسم المسار. إذا كنت تريد رسم خطوطك كمجموعة من الشرطات والفجوات بدلاً من جرة واحدة متصلة بالحبر ، فهذه هي السمة التي ستستخدمها.

نظرًا لكون صور SVG جزءًا من DOM لمتصفح الويب وكون Str-dasharray عنصرًا للعرض التقديمي ، يمكن أيضًا تعيين السمة باستخدام CSS.

وبالمثل ، يمكن أيضًا التحكم في خاصية Stroke-dashoffset (التي تحدد المسافة إلى نمط الشرطة لبدء الشرطة) باستخدام CSS.

يمكن استخدام هاتين الخاصيتين SVG معًا لتحريك مسارات SVG ، مما يمنح المشاهد الوهم بأن المسارات يتم رسمها تدريجيًا.

خذ هذا المنحنى التربيعي البيزير ، على سبيل المثال:

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

لتحريك هذا المسار كما لو كان يتم رسمه تدريجيًا وسلسًا على الشاشة ، سيتعين علينا تعيين أطوال الشرطة (والفجوة) ، باستخدام خاصية stroke-dasharray ، التي تساوي طول المسار. هذا بحيث يكون طول كل شرطة وفجوة في المنحنى المتقطع مساويًا لطول المسار بأكمله.

بعد ذلك ، سنقوم بتعيين إزاحة الشرطة ، باستخدام السمة Str-dashoffset ، على 0. وهذا سيجعل المسار يظهر على الشاشة كمنحنى صلب (نحن ننظر أساسًا إلى الشرطة الأولى ، وقد جعلنا بالفعل كل شرطة تمتد بالكامل طول المنحنى). من خلال ضبط إزاحة الشرطة على مساوية لطول المنحنى ، سننتهي بمنحنى غير مرئي (نحن الآن ننظر إلى المنحنى الذي يتم عرضه على شكل فجوة كاملة - الجزء الذي يلي الشرطة مباشرة).

الآن عن طريق تحريك خاصية stroke-dashoffset ، يمكنك جعل المنحنى يظهر على الشاشة تدريجيًا.

شاهد مسارات Pen Toptal - SVG & CSS بواسطة مدونة Toptal (toptalblog) على CodePen.

كما ترى ، فإن المنحنى موجود دائمًا. نقوم فقط بتغيير إزاحة الشرطة لجعل الجزء المتقطع يظهر شيئًا فشيئًا.

يمكنك اتخاذ هذه الخطوة إلى الأمام باستخدام نفس المبدأ ولكن مع المزيد من المسارات:

شاهد مسارات Pen Toptal - SVG & CSS بواسطة مدونة Toptal (toptalblog) على CodePen.

هنا لديك منحنى أسود واحد ثابت ، أحمر يتحرك على طول المسار ، وآخر أسود يتبع المنحنى الأحمر ولكن خلفه 40 بكسل.

Stroke-dasharray و Stroke-dashoffset هما سمتان قويتان للغاية يمكن استخدامهما لتطبيق عدد كبير من الرسوم المتحركة والتأثيرات على مسارات SVG. يمكنك تجربة هذه الأداة المفيدة التي يمكنك استخدامها لتجربة السمتين.

تحريك الكائنات على طول مسارات SVG

باستخدام SVG و CSS ، هناك شيء رائع آخر يمكنك القيام به وهو تحريك الكائنات أو العناصر التي تتبع مسارًا.

هناك سمتان من سمات SVG سنستخدمهما في الرسوم المتحركة:

• offset-path: تحدد خاصية offset-path CSS مسار الإزاحة حيث يتم وضع العنصر.

• offset-Distance: تحدد خاصية offset-مسافة CSS موضعًا على طول مسار الإزاحة.

من خلال الجمع بين هاتين الخاصيتين ، يمكنك إنشاء رسوم متحركة مثل هذه بسهولة:

شاهد مسارات Pen Toptal - SVG & CSS بواسطة مدونة Toptal (toptalblog) على CodePen.

كما ترى ، لدينا عنصر جديد div.ball .

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

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

إذا لم تكن كل هذه الأشياء خيالية بما فيه الكفاية بالفعل ، فيمكنك دائمًا اللجوء إلى JavaScript.

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

في السابق ، كان علينا ترميز أطوال المسار في CSS الخاص بنا. بمساعدة دالة JavaScript path.getTotalLength() ، من الممكن حساب طول المسار أثناء التنقل واستخدامه حسب الحاجة. يمكنك معرفة المزيد عن ذلك هنا.

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

لا يجعل Snap.svg من السهل رسم صور SVG باستخدام JavaScript فحسب ، بل يجعل الرسوم المتحركة لها بسيطة مثل استدعاء .animate({}) .

مكتبة أخرى ، anime.js ، تتيح لك جعل عنصر div يتبع مسار SVG ببضعة سطور من التعليمات البرمجية.

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

قراءة متعمقة

فيما يلي قائمة بالموارد التي قد تجدها مفيدة عند التعامل مع صور SVG وتحريكها:

للتعمق أكثر في الرسوم المتحركة لـ SVG ، يمكنك قراءة هذه المقالة القصيرة حول الطرق الثلاث لتحريك صور SVG ومشاهدة لقطات الفيديو بواسطة CSS Tricks.

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

باستخدام SMIL ، يمكنك تنفيذ تأثيرات الرسوم المتحركة المتقدمة مثل تحويل الأشكال باستخدام SVG وحده. يتوفر هنا دليل قصير ولكنه فعال لاستخدام SMIL لمثل هذه التأثيرات.

على الرغم من أن دعم SMIL شديد بعض الشيء في هذه اللحظة (لا يقصد التورية).

رسوم متحركة لا مساومة على الويب

في هذه المقالة ، مررت بعدة طرق يمكنك من خلالها تحريك عناصر SVG باستخدام عنصر CSS أو HTML على مسارات SVG.

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

وهذا كل شيء! نأمل أن تكون قد وجدت هذا البرنامج التعليمي للرسوم المتحركة SVG مفيدًا واستمتعت بقراءته.

مزيد من القراءة على مدونة Toptal Engineering:

• كيفية التعامل مع رسوم SVG المتحركة في CSS