دليل المبتدئين لرسوم متحركة SVG باستخدام CSS
اكتشف كيفية إنشاء رسوم متحركة سلسة لموقعك على الويب ،
باستخدام القليل من ترميز 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 على علامات فتح وإغلاق
( <svg> </svg> ) يمكن أن تحتوي على مجموعة متنوعة من الخصائص المختلفة.
في حالتنا ، نحن نستخدم خصائص id و viewBox . تعمل خاصية id مثل أي معرف
HTML آخر ، مما يوفر لك معرفًا فريدًا لاستخدامه في CSS / JS الخاص بك.
تحدد خاصية viewBox حجم SVG الخاص بنا:
<!-- SVG with a responsive size -->
<svg id="MUOSVGAnimation" viewBox="0 0 800 600">
<!-- SVG content -->
</svg>
يمكنك استخدام خصائص العرض والارتفاع بدلاً من ذلك ، كما يوضح المثال التالي.
ومع ذلك ، ينشئ viewBox SVG سريع الاستجابة يطابق حجم
إطار العرض دون كسر نسبة العرض إلى الارتفاع:
<!-- SVG with a static size -->
<svg id="MUOSVGAnimation" width="800" height="600">
<!-- SVG content -->
</svg>
يمكنك إنشاء صور مفصلة باستخدام SVGs ، مع مجموعة من أدوات
الشكل المختلفة تحت تصرفك. يستخدم مثال SVG هذا ثلاثة أشكال متوفرة ،
ولكن هناك العديد من الأشكال الأخرى. يحتوي كل شكل من الأشكال في هذا المثال
على معرّف فريد يمكن أن تستخدمه الرسوم المتحركة في CSS لاحقًا.
SVG Ellipse: هذه أداة دائرة / بيضاوية. تحدد خصائص نصف قطر المحور
y / x (rx / ry) ولون التعبئة وعرض الحد. من المهم أن تتذكر أن نصف القطر
الذي تختاره باستخدام هذه الأداة سيكون نصف قطر الشكل:
<ellipse id="circle" rx="100" ry="100" fill="#ffed00" stroke-width="0"/>
SVG Rect: تُنشئ أداة SVG Rect مربعًا أو مستطيلاً. هذا واحد له خصائص
العرض / الارتفاع ، والتحويل ، ولون التعبئة ، وعرض الحد:
<rect id="square" width="200" height="200"
transform="translate(300 200)" fill="#05f"
stroke-width="0"/>
* مضلع SVG:
استخدم مضلع SVG لتعيين عدد معين من النقاط وإنشاء أشكال عشوائية بأحجام مختلفة.
المضلع في المثال ثلاثي الأضلاع ، مما يجعله مثلثًا ، ويمكنك رؤية موضع
كل نقطة مرسومًا في خصائصها. إلى جانب ذلك ، لدينا خصائص
الموضع ولون التعبئة وعرض المثلث:
<polygon id="triangle" points="15,-97 115,102 -84,102 15,-97"
transform="translate(0,0)" fill="#f00" stroke-width="0"/>
بمجرد وضع الرسوم المتحركة في مكانها ، ستصطف الأشكال بجانب بعضها البعض.
أشكال الرسوم المتحركة svg
تعد أشكال SVG الثلاثة هذه من أكثر الأشكال شيوعًا ، ولكن هناك المزيد لتختار من بينها.
يمكنك استخدام الأشكال التالية عند العمل باستخدام رسوم متحركة SVG :
*دائرة SVG: هذا الشكل مشابه للقطع الناقص ، لكنه دائمًا ما يكون نصف قطره X و Y متساويين.
*خط SVG: خط SVG عبارة عن مقطع من سطر واحد بنقطتين ، واحدة في كل طرف.
*SVG Polyline: الخطوط المتعددة الخطوط مثل الخطوط الأساسية ،
فقط يمكن أن تحتوي على أكثر من نقطتين.
*SVG Polygon: تشبه مضلعات SVG المستطيلات ، ويمكن أن تحتوي فقط على أكثر
من أربع نقاط ، مما يجعل الأشكال المعقدة ممكنة.
*مسار SVG: تعمل مسارات SVG بشكل مشابه لأداة القلم في Adobe Photoshop.
يمكن أن تتصل الخطوط مثل متعدد الخطوط / مضلع ، ولكن يمكن أيضًا أن يكون لها منحنيات مطبقة عليها.
كيفية تحريك صور SVG باستخدام CSS
الآن بعد أن أصبح لديك بعض الأشكال داخل SVG ، حان الوقت للانتقال
إلى الرسوم المتحركة CSS. يحتوي كل شكل من الأشكال على رسوم متحركة
مختلفة لإظهار بعض الخيارات التي لديك ، ولكن هناك الكثير لاستكشافه باستخدام تصميماتك الخاصة.
تتحرك الدائرة عبر الشاشة ، وتصبح زوايا المربع مستديرة والمثلث يدور.
كل هذه تستخدم إطارات مفاتيح CSS لإنشاء رسوم متحركة سلسة .
تحريك الدائرة باستخدام التحويل والترجمة
تنتقل الدائرة في مثال SVG من أسفل إلى أعلى الشاشة أثناء دورة الرسوم المتحركة الخاصة بها.
تحتاج إلى تعيين رسم متحرك للدائرة قبل أن تتمكن من التحرك ، عبر خاصية CSS:
#circle {
animation: circle_anim 2000ms linear infinite normal forwards
}
الكلمة الأولى في القيمة ، دائرة ، اسم للرسوم المتحركة. يعمل لمدة ثانيتين ( 2000 مللي ثانية ).
يحتوي على منحنى خطي يحافظ على ثبات سرعته ويتم ضبطه لتشغيل
عدد لا حصر له من المرات في الاتجاه الأمامي . يمكنك استخدام الإطارات الرئيسية
لتحديد المراحل الفردية للرسوم المتحركة:
@keyframes circle_anim {
0% { transform: translate(155px, 305px) }
45% { transform: translate(155px, -123px) }
50% { transform: translate(-123px, -123px) }
55% { transform: translate(-123px, 728px) }
60% { transform: translate(155px, 728px) }
100% { transform: translate(155px, 305px) }
}
هناك ستة إطارات رئيسية في هذه الرسوم المتحركة ، لذا ستنتقل الدائرة إلى
ستة مواقع مختلفة في كل دورة.
* تحدد خاصية التحويل: ترجم موقع الدائرة في كل مرحلة . عند 0٪ تكون
الدائرة في منتصف الشاشة وتتحرك لأعلى وخارج الرؤية بنسبة 45٪. بنسبة
50٪ ، تحرك يسار الشاشة قبل أن يتحرك لأسفل أسفل منفذ العرض بنسبة 55٪.
تتحرك الدائرة مرة أخرى إلى وضعها الأفقي بنسبة 60٪ ، ويكتمل الرسم
المتحرك بنسبة 100٪ مع عودة الدائرة إلى منتصف الشاشة.
تحريك خاصية Square's Border Radius
يقدم المربع الموجود في المثال مرجعًا جيدًا للرسوم المتحركة للخاصية العامة.
طالما أنك تعرف البنية الصحيحة لاستخدامها ، يمكنك تحريك أي خاصية CSS.
تعد خاصية border-radius دليلاً جيدًا على ذلك. للمربع زوايا حادة تتحول
إلى زوايا دائرية ثم تعود إلى زوايا مربعة مرة أخرى:
#square { animation: square_anim 2000ms ease-in-out infinite normal forwards }
يُطلق على الرسوم المتحركة المربعة اسم square_anim ولها وقت تشغيل مدته ثانيتان.
يجعل منحنى سهولة الدخول والخروج الرسوم المتحركة
أبطأ في بدايتها ونهايتها ، مما يخلق تأثيرًا سلسًا:
@keyframes square_anim {
0% { rx: 0px; ry: 0px }
45% { rx: 40px; ry: 40px }
55% { rx: 40px; ry: 40px }
100% { rx: 0px; ry: 0px }
}
كما ترى ، تحتوي هذه الرسوم المتحركة على أربعة إطارات رئيسية.
يتغير نصف قطر الحد X و Y من 0 بكسل إلى 40 بكسل بين 0٪ و 45٪ ،
ويتوقف مؤقتًا عند 40 بكسل حتى 55٪. ثم تعود بعد ذلك إلى 0 بكسل لكل
نصف قطر بحلول الوقت الذي تصل فيه الرسوم المتحركة إلى 100٪.
قم بتدوير مثلث SVG مع التحويل
الرسوم المتحركة النهائية لـ SVG في المثال هي الأبسط ، حيث يدور المثلث حول نقطة مركزه.
يكمل الشكل دورة كاملة كل ثانيتين ويستمر في العمل بلا حدود. يحتوي على
منحنى سهل يؤدي إلى تباطؤ الرسوم المتحركة في النهاية.
الرسوم المتحركة تسمى triangle_anim:
#triangle { animation: triangle_anim 2000ms ease-out infinite normal forwards }
تحتوي هذه الرسوم المتحركة على إطارين رئيسيين ، أحدهما بنسبة 0٪
والآخر بنسبة 100٪. تحول خاصية تدوير التحويل المثلث من 0 درجة عند
0٪ إلى 360 درجة عند 100٪ ، مما يؤدي إلى دوران كامل:
@keyframes triangle_anim {
0% { transform: translate(644px, 297px) rotate(0deg) }
100% { transform: translate(644px, 297px) rotate(360deg) }
}
كيفية تحريك الخصائص الأخرى
تعد الرسوم المتحركة الثلاثة المذكورة أعلاه نقطة انطلاق جيدة عندما تعمل باستخدام
SVGs ، ولكنك سترغب على الأرجح في دفع هذا إلى أبعد من ذلك.
يمكنك استخدام قاعدة تحريك CSS لضبط أي قيمة خاصية يمكنك تعيينها إلى
SVG الخاص بك. يتضمن ذلك القيم الأساسية ، مثل تغيير الحجم وتحديد الموضع ،
بالإضافة إلى القيم الأكثر تقدمًا ، مثل الحدود والظلال وأوضاع المزج.
في حالات نادرة حيث لا تستطيع CSS القيام بالمهمة ، يمكنك استخدام كود
JavaScript لتحريك صور SVG. يمكنك العثور على الكثير من الأدلة لمساعدتك
في ذلك بمجرد أن تشعر بالاستعداد لاتخاذ الخطوة التالية باستخدام SVGs.
صنع صور SVG المتحركة الخاصة بك
سواء كنت مصمم ويب أو مطور برامج أو مجرد شخص مبدع ، يمكن أن تكون
رسوم SVG المتحركة ممتعة ومرضية. يمكنك العثور على الكثير من
الموارد حول الويب التي يمكن أن تساعدك في الرسوم المتحركة المستندة إلى الويب ،
بمجرد أن تشعر بالراحة تجاه الأساسيات.
