دليل المبتدئين لرسوم متحركة SVG باستخدام CSS

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

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

تحريك صور SVG باستخدام HTML و CSS

على الرغم من أنه يمكنك استخدام JavaScript لتحريك SVGs برمجيًا ، فإن CSS تتمتع الآن بدعم جيد للرسوم المتحركة أيضًا. يمكنك العثور على كل نموذج التعليمات البرمجية على CodePen لهذا المشروع.

بناء صورة SVG داخل HTML

الخطوة الأولى في هذه العملية هي بناء صورة SVG التي ستعمل معها. يمكنك العثور على ترميز SVG في لوحة HTML على CodePen.

هيكل SVG

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

هوية شخصية و viewBox الخصائص. تعمل خاصية id مثل أي معرف HTML آخر ، مما يوفر لك معرّفًا فريدًا لاستخدامه في CSS / JS الخاص بك. تحدد خاصية viewBox حجم SVG الخاص بنا.

<! - SVG بحجم متجاوب ->
<معرف svg ="MUOSVGA الرسوم المتحركة" viewBox ="0 0 800 600">
<! - SVG content ->
</svg>

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

 SVG  مع  span> بحجم  ثابت  span> 
<معرف svg ="MUOSVGA الرسوم المتحركة" العرض ="800" الارتفاع ="600">
<! - SVG content ->
</svg>

أشكال SVG

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

• SVG Ellipse: هذه أداة دائرة / بيضاوية. تحدد خصائص نصف قطر المحور y / x (rx / ry) ولون التعبئة وعرض الحد. من المهم أن تتذكر أن نصف القطر الذي تختاره باستخدام هذه الأداة سيكون نصف قطر الشكل.

<معرف القطع الناقص ="دائرة" rx ="100" ص ="100" ملء ="# ffed00" عرض السكتة الدماغية ="0"/>

• SVG Rect: تُنشئ أداة SVG Rect مربعًا أو مستطيلاً. هذا واحد له خصائص العرض / الارتفاع ، والتحويل ، ولون التعبئة ، وعرض الحد.

<معرف مستقيم ="ميدان" العرض ="200" الارتفاع ="200" تحويل ="ترجمة (300 200)" ملء ="# 05f"
 عرض السكتة الدماغية ="0"/>

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

<معرف المضلع ="مثلث" النقاط ="15,-97 115,102 -84,102 15,-97"
 تحويل ="ترجمة (0،0)" ملء ="# f00" عرض السكتة الدماغية ="0"/>

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

تعد أشكال SVG الثلاثة هذه من أكثر الأشكال شيوعًا ، ولكن هناك المزيد لتختار من بينها. يمكنك استخدام الأشكال التالية عندما العمل مع الرسوم المتحركة SVG:

• دائرة SVG: هذا الشكل مشابه للقطع الناقص ، لكنه دائمًا ما يكون له شعاع X و Y متساوي.
• خط SVG: خط SVG عبارة عن مقطع من سطر واحد بنقطتين ، واحدة في كل طرف.
• SVG Polyline: الخطوط المتعددة الخطوط مثل الخطوط الأساسية ، فقط يمكن أن تحتوي على أكثر من نقطتين.
• SVG Polygon: تشبه مضلعات SVG المستطيلات ، ويمكن أن تحتوي فقط على أكثر من أربع نقاط ، مما يجعل الأشكال المعقدة ممكنة.
• مسار SVG: تعمل مسارات SVG بشكل مشابه لأداة القلم في Adobe Photoshop. يمكن أن تتصل الخطوط مثل متعدد الخطوط / مضلع ، ولكن يمكن أن يكون لها أيضًا منحنيات مطبقة عليها.

كيفية تحريك صور SVG باستخدام CSS

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

تحريك الدائرة باستخدام التحويل والترجمة

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

# دائرة {
 الرسوم المتحركة: دائرة 2000ms خطية لا نهائية للأمام
}

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

تضمين التغريدة دائرة_انيم {
 0% { تحول: يترجم(155 بكسل, 305 بكسل) }
 45% { تحول: يترجم(155 بكسل, -123 بكسل) }
 50% { تحول: يترجم(-123 بكسل, -123 بكسل) }
 55% { تحول: يترجم(-123 بكسل, 728 بكسل) }
 60% { تحول: يترجم(155 بكسل, 728 بكسل) }
 100% { تحول: يترجم(155 بكسل, 305 بكسل) }
}

هناك ستة إطارات رئيسية في هذه الرسوم المتحركة ، لذا ستنتقل الدائرة إلى ستة مواقع مختلفة في كل دورة. ال تحويل: ترجم تحدد الخاصية موضع الدائرة في كل مرحلة. عند 0٪ تكون الدائرة في منتصف الشاشة وتتحرك لأعلى وخارج الرؤية بنسبة 45٪. بنسبة 50٪ ، تحرك يسار الشاشة قبل أن يتحرك لأسفل أسفل منفذ العرض بنسبة 55٪. تتحرك الدائرة مرة أخرى إلى وضعها الأفقي بنسبة 60٪ ، ويكتمل الرسم المتحرك بنسبة 100٪ مع عودة الدائرة إلى منتصف الشاشة.

حرك خاصية Square's Border Radius

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

#ميدان { الرسوم المتحركة: square_anim 2000 مللي ثانية سهولة الدخول والخروج للأمام العادي اللانهائي}

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

تضمين التغريدة مربع_انيم {
 0% { rx: 0 بكسل; راي: 0 بكسل }
 45% { rx: 40 بكسل; راي: 40 بكسل }
 55% { rx: 40 بكسل; راي: 40 بكسل }
 100% { rx: 0 بكسل; راي: 0 بكسل }
}

كما ترى ، تحتوي هذه الرسوم المتحركة على أربعة إطارات رئيسية. يتغير نصف قطر الحد X و Y من 0 بكسل إلى 40 بكسل بين 0٪ و 45٪ ، ويتوقف مؤقتًا عند 40 بكسل حتى 55٪. ثم تعود بعد ذلك إلى 0 بكسل لكل نصف قطر بحلول الوقت الذي تصل فيه الرسوم المتحركة إلى 100٪.

قم بتدوير مثلث SVG مع التحويل

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

#مثلث { الرسوم المتحركة: مثلث_أنيم 2000 مللي ثانية سهولة الخروج للأمام العادي اللانهائي}

تحتوي هذه الرسوم المتحركة على إطارين رئيسيين ، أحدهما بنسبة 0٪ والآخر بنسبة 100٪. تعمل خاصية Transform rotate على تحويل المثلث من 0deg عند 0٪ إلى 360deg عند 100٪ ، مما يؤدي إلى دوران كامل.

تضمين التغريدة مثلث_انيم {
 0% { تحول: يترجم(644 بكسل, 297 بكسل) استدارة(0 درجة) }
 100% { تحول: يترجم(644 بكسل, 297 بكسل) استدارة(360 درجة) }
}

كيفية تحريك الخصائص الأخرى

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

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

صنع صور SVG المتحركة الخاصة بك

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

10 أنماط خلفية CSS يمكنك استخدامها على موقع الويب الخاص بك

اقرأ التالي