رسوم متجهة متحركة قابلة للتحجيم باستخدام GSAP

بافتراض أنك تريد برنامجًا تعليميًا حول كيفية تحريك Scalable Vector Graphics (SVG):
SVG هو معيار يستخدمه المطورين والمصممين لإنشاء رسومات متجهة ثنائية الأبعاد. في حين أن التنسيق قادر على إنتاج رسومات غنية ، تميل الملفات إلى أن تكون أصغر في الحجم من تنسيقات الصور الشائعة الأخرى ، مما يجعلها مثالية للاستخدام على الويب.
عندما يتعلق الأمر بتحريك SVG ، هناك عدة طرق مختلفة للقيام بذلك. ربما يكون GSAP الخاص بـ GreenSock هو الخيار الأكثر شيوعًا ، لكنه ليس الخيار الوحيد. في هذا البرنامج التعليمي ، سنلقي نظرة على كيفية تحريك SVG باستخدام أدوات GSAP ، وكذلك كيفية تشغيل الرسوم المتحركة باستخدام JavaScript.

يتم تحقيق ذلك من خلال الرسوم المتحركة المضمنة (رمز SVG في HTML) والرسوم المتحركة المستندة إلى CSS للأجزاء. أرادت أمي الأم Wufoo تحديث الرسومات الإعلانية التي كنا نستخدمها هنا. بدا أنه الوقت المناسب لاستخدامه أكثر. كيف تم ذلك موضح في الفيديو أدناه. ستستفيد CSS من التوزيع العشوائي الأصلي لخصائص تأخير الرسوم المتحركة. سيكون من الرائع رؤية الأحرف يتم تعديلها قليلاً فقط في كل فترة زمنية. كان من الجيد أن تنتهي هذه الرسوم المتحركة في حوالي 3 ثوانٍ.

يتسبب تأثير translateY (150 بكسل) في تحرك الديناصور بعيدًا إلى أسفل بحيث لا يظهر أي شيء. تم إخفاء الديناصور في البداية في هذا الإعلان ، ولكن عندما تتلاشى الرسوم المتحركة للداخل / الخارج ، تظهر الكلمات السريعة. باستخدام تقنية ol 'padded box ، يمكننا إنشاء مقياس SVG مضمن يحافظ على نسبة العرض إلى الارتفاع أثناء استخدام SVG المضمن أيضًا. نظرًا لأن هذا إعلان ، يمكنك استخدام <a href=> ، فقط تأكد من تعيين خاصية الحظر على display: block بدلاً من استخدام <div>.

فعل إنشاء كائنات متحركة. يمكن استخدام المصدر لإنشاء رسوم متحركة SVG . عند تعيين Render Mode على Animation ، يتم حفظ الإطار الكامل للتجسيد ، سواء كان إطارًا (F12 أو Shift-F12) ، أو كل الإطارات في العرض (Shift-F12 أو F12) ، في ملف واحد.

يمكن استخدام عناصر الرسوم المتحركة لإنشاء رسومات SVG. تم تحديد عناصر الرسوم المتحركة الأولى لـ SMIL على النحو التالي: * تحريك٪ 27 / تحريك٪ 27 - مما يسمح لك بتحريك السمات والخصائص العددية بمرور الوقت.

في معظم الحالات ، يكون استخدام علامات * img هو السبب الأساسي لفشل رسوم SVG المتحركة . عندما تبدأ الرسوم المتحركة ، قد يكون SVG مرئيًا على موقع الويب ، لكنه لن يبدأ. إن أبسط طريقة لحل هذه المشكلة هي استبدال جميع علامات img بعلامة object> tag.

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

كيف أقوم بإنشاء ملف Svg متحرك؟

هناك عدة طرق لإنشاء صورة SVG متحركة . تتمثل إحدى الطرق في استخدام برنامج رسم متجه مثل Adobe Illustrator لإنشاء العمل الفني ، ثم استخدام أداة مثل After Effects لإضافة الرسوم المتحركة. هناك طريقة أخرى وهي استخدام أداة مثل Snap.svg لإنشاء الرسوم المتحركة مباشرة في الكود.

سيرشدك هذا البرنامج التعليمي خلال الخطوات الأساسية للتحسين والتحريك باستخدام CSS في سياق sva. إصدار Bootstrap الوحيد المتاح لهذا الغرض هو Bootstrap 4.1.3. إذا قمت بالتمهيد ، فتأكد من أن SVG يشتمل على الفئة img-fluid للتأكد من أنها تتسع بشكل صحيح على الهواتف المحمولة. يمكن تخصيص الصورة بإضافة فئات إلى SVG. عندما نطلب من CSS تنفيذ تأثير على رسم متحرك ، يجب أن نحدد اسمه وإطاراته الرئيسية. عندما ينتهي المستطيل من التلاشي ، يجب تشغيل الرسوم المتحركة للنص في نفس الوقت. بسبب هذا التغيير ، أصبح البيزير المكعب في هذه الخطوة الآن في حالة حركة أسرع. تظهر هذه الرسوم المتحركة في 40٪ من الوقت في منتصفنا. نقوم بإعادة ضبط مجموعة ضربات الشوط بحيث تغطي الشرطة المسار بأكمله.

كيفية تحريك ملف Svg

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

تحريك Svg Css

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

تسمح الرسومات المتجهة القابلة للتطوير (SVG) ، وهي تنسيق صورة متجه مستند إلى XML ، بالتفاعل بالإضافة إلى الرسوم المتحركة في رسومات ثنائية الأبعاد. ستغطي هذه المقالة كيفية تصدير ملفات sva وتحسينها ، وتضمينها ، وتشرح كيف يؤثر كل منها على الأنماط والرسوم المتحركة التي تقوم بإنشائها. سيتم استخدام CSS لتصميم وتحريك. إذا كنت تعمل مع ملف ثقيل المسار ، فإن تغيير عدد المنازل العشرية من أربعة إلى واحد يمكن أن يقلل حجم الملف بنسبة 50٪. يمكنك معاينة التحسين إذا انتهى به الأمر إلى كسر ملفك ، لذا فهي ميزة كبيرة. تعد أداة Peter Collingridge عبر الإنترنت لتحسين sva واحدة من عدة أدوات متاحة. نظرًا لأن SVG 1.1 لم يتطلب CSS ، فإن سمات نمط CSS التي تم تطبيقها على عقد SVG كانت تُعرف باسم سمات العرض التقديمي.

يشبه تعيين سمات العرض التقديمي تعيين خاصية CSS على عنصر. على الرغم من أنها تلعب دورًا مهمًا في سلسلة الأنماط ، إلا أننا سنكون قادرين على شرح ذلك بعمق أكبر قريبًا. يمكن أيضًا استخدام خصائص CSS لتحديد أنماط عنصر SVG . استخدام سمات العرض على عقدة sva هو نفسه استخدامها لتعريف خاصية CSS. جميع سمات العرض التقديمي هي أوراق أنماط استنادية منخفضة المستوى ، لذا يمكن تحديدها بأي تعريف نمط آخر. يجب استخدام الأنماط السفلية في الرسم التخطيطي ، مثل النمط العلوي ، فوق الأنماط الموجودة فوقها. تُستخدم الفئات الزائفة الديناميكية في CSS2 ، مثل: hover و: active و: focus ، لتصميم معظم SVGs.

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

يمكنك تحديد ما إذا كانت أنماط ورسوم متحركة وتفاعلات CSS معينة ستعمل بعد تضمين SVG باستخدام طريقة التضمين. يمكن العثور على مزيد من المعلومات حول هذه التقنية في مقالة جيك أرشيبالد الممتازة. لا يزال مدعومًا على نطاق واسع ، على الرغم من حقيقة أن معيار HTML لم يحدد أبدًا كيفية تنسيقه. يمكن أيضًا استخدام العلامة> svg> لدمج SVG في مستند مضمّن ، وهو ما يُعرف باسم جزيرة التعليمات البرمجية. نظرًا لأنه يمكن تصميم وتحريك SVG باستخدام SVGs و CSS المضمنة ، فمن الأسهل التعامل معها. إذا كنت تريد تضمين SVG ، فتأكد من إمكانية تضمينه في جميع المتصفحات. اعتمادًا على تقنية التضمين ، قد تحتاج إلى إضافة الاختراقات أو الإصلاحات لجعل متصفح SVG الخاص بك متوافقًا.

لمعرفة التفاصيل ، اقرأ مقالتي عن Codrops. من المستحيل إضافة أي اختراقات جديدة عند تضمين صورة في SVG كخلفية. يجب عليك أيضًا التأكد من أن عرض العنصر الخاص بك هو 100٪. في CSS ، 300 × 150 بكسل هو الحجم الافتراضي للعناصر المستبدلة. فقط اختراق Adobe Photoshop الذي ابتكره Thierry Koblentz في A List Apart يمكنه جعل إطار iframe مستجيبًا. يمكن أيضًا إرسال استعلامات وسائط CSS إلى SVG. باستخدام استعلامات الوسائط ، يمكنك تغيير أنماط SVG عبر أحجام منفذ العرض. عندما يستجيب SVG لإطار عرض الصفحة ، فإنه ليس إطار عرض الصفحة ولكن إطار العرض الخاص بها. هذا هو نفس مفهوم استعلامات العناصر في الممارسة.

الرسوم المتحركة بتنسيق Svg مع Css

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

كيفية تحريك مسار Svg

هناك عدة طرق مختلفة لتحريك مسار SVG: 1. استخدام سمة تحويل SVG 2. استخدام رسوم متحركة CSS3 3. استخدام SMIL 4. استخدام JavaScript سمة التحويل هي الطريقة الأكثر شيوعًا لتحريك مسار SVG. سيسمح لك ذلك بتحريك المسار عن طريق تحويل إحداثيات المسار. لتحريك المسار باستخدام CSS3 ، ستحتاج إلى تعيين خاصية Animation-time-function إلى خطي أو بديل. بعد ذلك ، يمكنك تعيين خاصية مدة الرسوم المتحركة على طول الفترة الزمنية التي تريد تشغيل الرسوم المتحركة فيها. SMIL هي طريقة أخرى لتحريك المسار. SMIL تعني لغة تكامل الوسائط المتعددة المتزامنة. سيسمح لك ذلك بتحريك المسار باستخدام العنصر. الطريقة الأخيرة لتحريك المسار هي باستخدام JavaScript. للقيام بذلك ، سوف تحتاج إلى إنشاء وظيفة من شأنها تحديث إحداثيات المسار. بعد ذلك ، يمكنك استدعاء هذه الوظيفة لتشغيل الرسوم المتحركة.

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

لماذا يجب عليك تحريك Svgs على موقع الويب الخاص بك

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

مثال على الرسوم المتحركة Svg

هناك عدة أنواع مختلفة من الرسوم المتحركة التي يمكن استخدامها مع SVG. وتشمل هذه:
الرسوم المتحركة -SMIL: هي رسوم متحركة مكتوبة بلغة SMIL (لغة تكامل الوسائط المتعددة المتزامنة). SMIL هي لغة قائمة على XML تستخدم لوصف التوقيت والرسوم المتحركة.
الرسوم المتحركة -CSS: هذه هي الرسوم المتحركة التي تمت كتابتها في CSS. CSS هي لغة ورقة أنماط تُستخدم لوصف عرض المستند المكتوب بلغة ترميزية.
الرسوم المتحركة -جافا سكريبت: هذه هي الرسوم المتحركة المكتوبة بلغة جافا سكريبت. JavaScript هي لغة برمجة تُستخدم لإنشاء صفحات ويب تفاعلية.

SVG (رسومات متجهة قابلة للتطوير) هي عنصر مرئي يمكن تغيير حجمه إلى أي حجم. من الأسهل تعديلها والتكيف معها لاحقًا في حياتهم لأنها تعتمد على الكود بدلاً من البيكسل. ما هي أفضل أجزاء svg؟ الرسوم المتحركة صغيرة جدًا وسريعة التحميل جدًا. إنها مثالية لمجموعة واسعة من تطبيقات تصميم الويب الحديثة. يمكن استخدام Animator لتحريك صورة إذا تم توصيلها بها وتعيين إعدادات الرسوم المتحركة الخاصة بها. استخدم أداة Framer's SVG Animation إذا كنت تريد تحريك صور SVG باستخدام CSS أو JavaScript أو HTML.

هل يمكن لـ Svg تحريك Css؟

هناك أدوات أخرى متاحة للرسوم المتحركة ، لكنها ليست سهلة التحريك مثل CSS.

لماذا Svg هو تنسيق الصورة الفائق لتصميم الويب

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