8 مكتبات JavaScript لتحريك SVG

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

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

المزيد على Hongkiat.com:

Animate.css - مكتبة CSS3 لإنشاء الرسوم المتحركة بسهولة
تحريك النص بسهولة مع Textillate.js
كيفية تحويل نص فوتوشوب إلى SVG
تنشيط لإخفاء المحتوى وشرائحه باستخدام jQuery

1. Vivus

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

فمثلا:

 new Vivus ('svg-element' ، type: 'oneByOne' ، المدة: 200) ؛

ما سبق سوف يحرك عنصر SVG الخاص بي الذي يحتوي على SVG-عنصر معرف في 200 ميلي ثانية. سيتم رسم كل عنصر من عناصر SVG واحدًا تلو الآخر خلال هذا الإطار الزمني.

2. بونساي

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

3. السرعة

Velocity هي مكتبة JavaScript مصممة للرسوم المتحركة السريعة. سرعة السرعة عند تقديم الرسوم المتحركة سريعة بشكل لا يصدق. يتفوق jQuery ، وحتى CSS ، بالمقارنة. تعمل واجهة برمجة تطبيقات Velocity على غرار الرسوم المتحركة في jQuery باستثناء أنه يستخدم الاسم المستعار للكلمة الرئيسية .velocity $ () بدلا من .animate $ (). وبصرف النظر ، يمكنك استخدام نفس الكلمات الرئيسية للرسوم المتحركة بالضبط مثل اختفي و تتآكل.

4. رافائيل

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

5. التقط

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

6. كسول خط الرسام

Lazy Line Painter هو مكون إضافي مسج لإحياء مسارات SVG لتحريك تسلسل الرسم ، على غرار Vivus. الأخبار السيئة هي أن هذا البرنامج المساعد فقط يفعل هذا الشيء المحدد للغاية. وبالتالي ، عند استيراد SVG من تطبيقات مثل Illustrator أو Inkscape ، تأكد من عدم ترك أي لون Fill على SVG الخاص بك ، فقط المسارات.

7. SVG.js

SVG.js هي مكتبة خفيفة الوزن لمعالجة SVG وتحريكها. باستخدام هذه المكتبة ، ستتمكن من تحريك الحجم أو الموضع أو اللون داخل عنصر SVG الخاص بك. ليس فقط ينشط على الرغم من ؛ يمكنك أيضًا تطبيق مكونات إضافية لإضافة وظائف إضافية. يستخدم هذا المثال المكوّن الإضافي svg.filter.js لتطبيق المرشحات مثل gaussian blur ، و desaturate ، و النقيض ، و sepia ، إلخ. على الصورة.

8. الممشى

الممشى يدعم ثلاثة أنواع من العناصر, مسار, خط, و شكل متعدد الخطوط تستخدم لرسم خطوط SVG. فيما يلي مثال من Polygon يعرض الرسوم المتحركة لسطر PlayStation 4.