أطلق العنان لقوة الرسوم المتحركة للمسار باستخدام SVGator

(هذه مقالة برعاية.) في العام الماضي ، تم نشر مقدمة شاملة للاستخدام الأساسي لـ SVGator هنا في مجلة Smashing. إذا كنت ترغب في التعرف على أساسيات SVGator ، وإعداد مشاريعك الأولى ، وإنشاء الرسوم المتحركة الأولى ، فإننا نوصي بشدة بقراءتها قبل متابعة هذه المقالة.

اليوم ، سنلقي نظرة ثانية لاستكشاف بعض الميزات الجديدة التي تمت إضافتها إليها خلال الأشهر القليلة الماضية ، بما في ذلك Path Animator الجديد تمامًا.

ملاحظة : Path Animator هي ميزة مميزة لـ SVGator وهي غير متاحة لمستخدمي الإصدار التجريبي. خلال فترة تجريبية مدتها سبعة أيام ، يمكنك معرفة كيفية عمل Path Animator في نموذج المشروع الذي ستجده في التطبيق ، لكنك لن تتمكن من تطبيقه على SVGs الخاصة بك ما لم تشترك في الحصول على مدفوعات خطة. SVGator هي خدمة قائمة على الاشتراك. حاليًا ، يمكنك الاختيار بين خطة شهرية (18 دولارًا أمريكيًا / شهرًا) وخطة سنوية (إجمالي 144 دولارًا أمريكيًا ، 12 دولارًا أمريكيًا / شهرًا). للمشاريع الأطول ، نوصيك بالنظر في الخيار السنوي.

يعد Path Animator أول الميزات المتميزة التي يخطط SVGator لإصدارها في الأشهر القادمة. ستكون جميع الميزات الجديدة متاحة لجميع المستخدمين المدفوعين ، بغض النظر عن وقت اشتراكهم.

سحر مسار الرسوم المتحركة

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

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

كيف تعمل رسوم المسار؟

قد تعتقد أن الرسوم المتحركة لمسار SVG تتطلب بعض وظائف الرسم والتحويل المعقدة للغاية. لكنها أبسط بكثير مما تبدو عليه. لتحقيق تأثيرات مشابهة للمثال أعلاه ، لا تحتاج إلى إنشاء المسارات الفعلية أو رسمها أو تحريكها - ما عليك سوى تحريك حدودها. يتيح لك هذا المفهوم الرائع إنشاء رسوم متحركة معقدة ظاهريًا عن طريق تحريك سمة SVG واحدة: stroke-dashoffset .

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

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

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

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

لفهم الاحتمالات التي يوفرها لنا Path Animator بشكل أفضل ، سنغطي ثلاثة أمثلة منفصلة تعرض حالات استخدام مختلفة للرسوم المتحركة للمسار.

المثال 1: نص متحرك

في المثال الأول ، سنقوم بتحريك النص ، مما يخلق انطباعًا بالحروف التي تكتبها ذاتيًا.

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

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

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

تحضير الملف

بدلاً من البدء بمحرف موجود ، سنبدأ برسم بسيط مرسوم باليد:

حان الوقت الآن لإعادة رسم المخطط في أداة التصميم. لقد استخدمت Figma ، ولكن يمكنك استخدام أي تطبيق يدعم صادرات SVG ، مثل Sketch أو Adobe XD أو Adobe Illustrator.

عادةً ما أبدأ باستخدام أداة Pen وأتبع تقريبًا الرسم الذي تم استيراده كطبقة تحتها:

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

في هذا المثال ، لدينا أربعة مسارات من هذا القبيل. الأول هو الحرف "H" ؛ والثاني هو الأحرف الوسطى الثلاثة "ell" ؛ و "س" هو الثالث. المسار الرابع هو خط علامة التعجب.

نقطة "!" استثناء - إنها الطبقة الوحيدة التي نصممها باستخدام تعبئة بدلاً من حد. سيتم تحريكها بطريقة مختلفة عن الطبقات الأخرى ، دون استخدام Path Animator.

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

قبل استيراد طبقاتنا إلى SVGator ، من الأفضل تنظيف بنية الطبقات وإعادة تسميتها بطريقة وصفية. سيساعدك هذا في العثور بسرعة على ملفك بمجرد العمل في SVGator.

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

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

خلق الرسوم المتحركة

بمجرد أن تصبح راضيًا عن بنية طبقاتك وتسميتها ، قم باستيرادها إلى SVGator. ثم أضف المسار الأول إلى المخطط الزمني وقم بتطبيق Path Animator عليه باختياره من قائمة الرسوم المتحركة أو بالضغط على Shift + T.

لتحقيق تأثير الرسم الذاتي ، هدفنا هو تحويل حد المسار إلى خط متقطع. يجب أن يكون طول الشرطة والفجوة مساوياً لطول المسار بأكمله. هذا يسمح لنا بتغطية المسار بأكمله بفجوة لجعله يختفي. بمجرد إخفاؤه ، قم بتغيير stroke-dashoffset إلى النقطة التي يتم فيها تغطية المسار بالكامل بشرطة.

يجعل SVGator ذلك مناسبًا جدًا لنا من خلال توفير طول المسار تلقائيًا. كل ما نحتاج إلى القيام به هو نسخه بنقرة واحدة ولصقه في المعلمتين اللتين يتطلبهما SVGator : الشرطات والإزاحة. يؤدي لصق القيمة في الشرطات إلى تحويل الحد إلى خط متقطع. لا يمكنك رؤيته على الفور حيث أن أول شرطة من الخط تغطي المسار بالكامل. سيؤدي ضبط الإزاحة إلى تغيير إزاحة stroke-dashoffset بحيث تغطي الفجوة المسار بعد ذلك.

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

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

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

الآن بعد أن انتهينا من الحرف "H" ، يمكننا الانتقال إلى تحريك جميع المسارات الأخرى بنفس الطريقة. في النهاية ، ننتهي من خلال تحريك نقطة علامة التعجب. نظرًا لأنها دائرة ذات تعبئة وليست مخططًا خارجيًا ، فلن نستخدم Path Animator. بدلاً من ذلك ، نستخدم Scale Animator لإبراز النقطة في نهاية الرسوم المتحركة.

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

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

في هذه الحالة ، نريد أن نعطي الانطباع بأن النص يُكتب بحركة واحدة متواصلة لليد. لذلك ، قمت بتطبيق وظيفة Ease-in على الحرف الأول ووظيفة Ease-out على الحرف الأخير ، تاركًا الأحرف الوسطى بوظيفة خطية افتراضية. في SVGator ، يمكن تطبيق وظائف التوقيت من الجدول الزمني ، بجانب معلمات Animator:

بعد تطبيق نفس المنطق على علامة التعجب ، تكون الرسوم المتحركة لدينا جاهزة وجاهزة للتصدير!

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

الآن دعنا نحلل مثالًا أكثر تركيزًا على واجهة المستخدم. هنا ، سنستخدم SVGator لتكرار الرسوم المتحركة الشهيرة للأيقونات: تحويل قائمة الهامبرغر إلى زر إغلاق.

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

تحضير الملف

لفهم ما نقوم ببنائه بشكل أفضل وكيفية تحضير ملف لمثل هذه الرسوم المتحركة ، من المفيد البدء برسم تقريبي يمثل الحالات الرئيسية للرسوم المتحركة.

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

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

خلق الرسوم المتحركة

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

ثم اضبط طول الفجوة التالية على قيمة أكبر من الطول المتبقي للمسار حتى يصبح شفافًا.

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

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

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

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

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

بمجرد الانتهاء من ذلك ، لا تنس ضبط وظائف التوقيت. هنا ، قررت استخدام تأثير Ease-in-out على جميع العناصر. رمزنا جاهز للعمل.

تطبيق

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

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

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

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

عندما نكون جاهزين ، يمكننا تصدير الرمز إلى SVG وفتحه في محرر نصي.

العناصر التي تراها في نص المستند هي مكونات الرسم الخاص بك. يجب أن تلاحظ أيضًا أن السطر الأول من التعليمات البرمجية طويل بشكل استثنائي. مباشرة بعد علامة الفتح <svg> ، يوجد عنصر <style> به الكثير من CSS المصغر بالداخل. هذا هو المكان الذي تحدث فيه كل الرسوم المتحركة.

 <svg viewBox="0 0 600 450" fill="none" xmlns="https://www.w3.org/2000/svg"><style>@-webkit-keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV… </style> <!-- a very long line of code that contains all the animations --> <g> <g data-animator-group="true" data-animator-type="0"><g> <g data-animator-group="true" data-animator-type="1"><path d="M244 263H356" stroke-linecap="round"/></g> <g data-animator-group="true" data-animator-type="1"><path d="M244 187H356" stroke-linecap="round"/></g> </g></g> <path d="M244 225H355.5C369 225 387.5 216.4 387.5 192C387.5 161.5 352 137 300 137C251.399 137 212 176.399 212 225C212 273.601 251.399 313 300 313C348.601 313 388 273.601 388 225C388 176.399 349.601 137 301 137" stroke-linecap="round"/> </g> </svg>

من الجيد حقًا أن يقوم SVGator بتصغير الكود لنا. ومع ذلك ، سيتعين علينا التراجع عنها. بمجرد كتابة كود CSS بالكامل (يمكنك القيام بذلك في أدوات تطوير المتصفح الخاص بك ، أو في واحد من العديد من تنسيقات التعليمات البرمجية عبر الإنترنت) ، سترى أنها قائمة طويلة من @keyframes متبوعة بقائمة من قواعد id باستخدام @keyframes في خصائص animation الخاصة بهم.

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

 @keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV{ /* middle bar animation */ 0%{ stroke-dasharray: 112, 2000; /* initial state */ } 25%{ stroke-dasharray: 112, 2000; } 50%{ stroke-dasharray: 600, 2000; /* turns into a circle */ } 75%{ stroke-dasharray: 600, 2000; /* back at initial state */ } 100%{ stroke-dasharray: 112, 2000; } }

كل ما عليك فعله الآن هو استخدام هذه القيم من الإطارات الرئيسية لترميز تفاعلك. لا يزال هناك الكثير من العمل أمامنا ، ولكن بفضل SVGator ، تم بالفعل الجزء الحاسم.

ما سيحدث بعد ذلك هو قصة أخرى. ومع ذلك ، إذا كنت مهتمًا برؤية مثال على كيفية عمل هذه الرسوم المتحركة في الممارسة ، فإليك القليل من CodePen لك:

تم إنشاء المثال باستخدام React ويستخدم حالات لتبديل فئات CSS وتشغيل انتقالات بين قيم CSS المعنية. لذلك ، ليست هناك حاجة لخصائص animation وkeyframes @ @keyframes .

يمكنك استخدام مجموعة من أولويات CSS المخصصة المدرجة في الجزء العلوي من كود SCSS للتحكم في تصميم الرمز وكذلك مدة الانتقالات.

المثال الثالث: الرسوم التوضيحية المتحركة

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

الخطوط المتقطعة والخطوط المنقطة

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

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

تحضير الملف

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

ملاحظة : في وقت كتابة هذا التقرير ، كان إنشاء خطوط منقطة في Figma مهمة صعبة. لا يمكنك فقط تعيين طول الشرطة على الصفر ، ولكن لا يمكنك أيضًا إنشاء فجوة بين الشرطات طويلة بما يكفي لتغطية المسار بأكمله. وعندما يتعلق الأمر بالتصدير ، تختفي جميع إعداداتك على أي حال. ومع ذلك ، إذا كنت تعمل مع Figma ، فلا تثبط عزيمتك. سنصلح كل هذه المشكلات بسهولة في SVGator. وإذا كنت تعمل في Sketch أو Illustrator أو ما شابه ، فلن تواجه هذه المشكلات على الإطلاق.

خلق الرسوم المتحركة

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

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

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

كلمسة أخيرة ، أضفت القليل من الارتداد إلى الرسم بأكمله.

الآن الرسوم المتحركة جاهزة ويمكن استخدامها ، ربما كرسم محمل.

كلمة سريعة عن إمكانية الوصول

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

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

خاتمة

يكفي هذا لليوم. أتمنى أن تكون قد استمتعت بهذه الرحلة من خلال إمكانيات رسوم المسار. لتجربتها بنفسك ، ما عليك سوى زيارة موقع SVGator على الويب حيث يمكنك أيضًا التعرف على ميزاته وأسعاره الأخرى. إذا كان لديك أي ملاحظات أو أسئلة ، من فضلك لا تتردد في إضافتها في التعليقات. ترقبوا التحديثات القادمة حول SVGator - هناك الكثير من الميزات الجديدة الرائعة الأخرى في الطريق!

قراءة متعمقة

• "كيف تعمل رسوم SVG Line Animation ،" Chris Coyer دليل مصور للرسوم المتحركة لمسار SVG يشرح بشكل جميل كيفية عملها حقًا.
• "دليل عملي إلى SVG وأدوات التصميم" ، Mikolaj Dobrucki دليل شامل لأساسيات SVG لمساعدتك على فهم كيفية إنشاء SVG بواسطة أدوات التصميم ، وكيفية التعامل معها لصالحك.
• "إعادة النظر في تفضيلات الحركة المخفضة ، استعلام وسائط الحركة المخفضة" ، إريك بيلي مقدمة رائعة لموضوع الرسوم المتحركة وإمكانية الوصول.
• "How To Create A Path Animation ،" SVGator فيديو تعليمي قصير ولطيف على YouTube حول Path Animator

موارد مفيدة

• SVGator Path Animations اقرأ المزيد عن Path Animator من صفحتها الأصلية.
• دروس SVGator التعليمية سلسلة من دروس الفيديو تشرح الميزات الأساسية لـ SVGator.
• مركز تعليمات SVGator يجيب على الأسئلة الأكثر شيوعًا حول SVGator وميزاته وخطط العضوية.