السلام عليكم ورحمة الله وبركاته
الأيقونات المتحركة هي عنصر ممتع وجذاب في تصميم مواقع الويب. تساهم في تجذيب الانتباه وجعل تجربة المستخدم أكثر دينامية وتفاعلية. من بين أنواع الأيقونات المتحركة، تبرز الأيقونات SVG بسبب مرونتها وجودتها العالية. في هذا المقال، سنلقي نظرة على كيفية استخدام وإنشاء الأيقونات SVG المتحركة.
ما هي الأيقونات SVG المتحركة؟
الأيقونات SVG المتحركة هي أيقونات مقياسية قابلة للتغيير بتكوين مستندات SVG تحتوي على حركة أو تأثير معين. يمكن استخدامها لإضافة حركة وديناميكية إلى موقع الويب أو التطبيق.
كيفية إنشاء الأيقونات SVG المتحركة؟
هناك العديد من الطرق لإنشاء الأيقونات SVG المتحركة. يمكنك استخدام برامج رسم SVG مثل Adobe Illustrator أو Inkscape لإنشاء الأيقونات وتحريكها. يمكن أيضًا استخدام الشفرة المباشرة للتحكم في الحركة باستخدام عناصر مثل `animate` و `animateTransform`.
استخدام الأيقونات SVG المتحركة في موقع الويب
يمكن استخدام الأيقونات SVG المتحركة لمجموعة متنوعة من الأغراض على موقع الويب، بما في ذلك:
- رموز تحميل مسبق
(Preloaders):
يمكن استخدام الأيقونات المتحركة كرموز تحميل مسبق للمواقع، حيث تساعد في تحميل المحتوى بشكل ممتع وجذاب. - توضيح العمليات:
يمكن استخدام الأيقونات المتحركة لتوضيح العمليات أو العمليات على موقع الويب، مما يساعد المستخدمين على فهم الخطوات بشكل أفضل. - زيادة التفاعل:
يمكن استخدام الأيقونات المتحركة لزيادة التفاعلية على موقع الويب، مثل تحفيز النقر أو إظهار معلومات إضافية عند تحريك المؤشر. - جذب الانتباه:
تساعد الأيقونات المتحركة في جذب انتباه المستخدمين وجعل تجربة الموقع أكثر إشراقًا وتفاعلًا.
عند استخدام الأيقونات SVG المتحركة على موقع الويب، يجب توخي الحذر لتحسين أداءها. يمكن للأيقونات المتحركة زيادة وقت تحميل الصفحة واستهلاك موارد الجهاز. لتحسين هذا، يمكنك ضبط سرعة الحركة وتقليل حجم الملفات واستخدام التظليل CSS بدلاً من GIFs أو مقاطع الفيديو. تذكر دائمًا ضرورة اختبار الأيقونات على متصفحات متعددة وضمان قابلية الوصول للجميع.
تقديم الكود
ساقدم بين يديك هذا الكود .SVG و ساقوم بشرحه كاملا و بوضوح حتى يتسنى لك تطبيق المعلومات على اي ايقونة تمتلكها بهذا الشكل سنتعلم ضبط الدرس بشكل واضح و جيد.
الكود عبارة عن مشروع لشعار صِوان سادمجه في هذا السطر لمعاينته ربما لاحظته في الهيدر بجانب العنوان و حقا انا افكر في دمجه على شكل ايقونة التحميل المسبق للمدونة. اخبرني في تعليق عن رأيك او افكار يمكنني اضافتها.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
data-name="Layer 1"
viewBox="0 0 528.12 529.82"
width="2492"
height="2500">
<title>siwane</title>
<defs>
<style>
.cls-1{fill:#333}
.cls-2{fill:#299e94}
.cls-3{fill:#333}
.clc-1{fill:#299e94}
.cls-2{fill: var(--themeC)}
.clc-1{fill: var(--themeC)}
.drK .cls-1 {fill:#FFF}
.drK .cls-3 {fill:#FFF}
.drK .cls-2{fill:#299e94}
.drK .clc-1{fill:#299e94}
</style>
</defs>
<g transform='rotate(91 264.06 264.91)'>
<!-- هذا الجزء يعمل على تحريك الأيقونة بشكل دائري -->
<animateTransform
attributeName='transform'
attributeType='XML'
dur='1s'
from='360 264.06 264.91'
repeatCount='indefinite'
to='0 264.06 264.91'
type='rotate' />
<path
class='cls-1'
d=' M269.8 122.37c16.73 70.38-35.22 164.18-147.47 149.1l-1.64-.24A145.79 145.79 0 1 0 269.8 122.37z' />
<circle
class='clc-1'
cx='147.46'
cy='147.46'
r='102.22' />
<path
class='cls-2'
d='M424 115.63a100.55 100.55 0 0 0-56.87 17.56c17.37 13.09 93.05 77.93 57.57 190.21 56.13-.39 101.52-46.74 101.52-103.88-.04-57.38-45.81-103.89-102.22-103.89zM302.08 486a100.64 100.64 0 0 0 17.78-56.8c-20.64 6.88-117 32.45-189.31-60.45-31.52 46.45-19.08 110.12 28 142.53 47.25 32.51 111.51 21.19 143.53-25.28z' />
<path
class='cls-3'
d='M484.8 330.41a230 230 0 0 1-154.51 154.42 126.51 126.51 0 0 1-38.49 43.34c124.5-12.63 223.5-111.51 236.32-235.95a126.19 126.19 0 0 1-43.32 38.19zM212 41.29a229.94 229.94 0 0 1 206.27 52.78c2.44-.14 4.89-.23 7.36-.23A125.38 125.38 0 0 1 475.1 104a265 265 0 0 0-320-80.25A125 125 0 0 1 212 41.29zM92.16 425.63c0-3.06.15-6.09.37-9.09a229.81 229.81 0 0 1-52-201.31 124.94 124.94 0 0 1-18.4-56.65 265 265 0 0 0 79.44 314.71 124.55 124.55 0 0 1-9.41-47.66z' />
</g>
</svg>وصف للرمز أو الأيقونة
هذا الكود هو عبارة عن وصف SVG (Scalable Vector Graphics) لرسم رمز أو رمز أيقونة بصريًا. الكود يحتوي على عدة عناصر وسأشرحها بإختصار:
- `
<svg>` هو العنصر الجذر ويعرف الصورة النقطية وملامحها الأساسية. - `
<defs>` تحتوي على معرفات لأنماط الألوان. - `
<animateTransform>` يسبب دوران الأيقونة بزاوية معينة بشكل متكرر (دائري). - `
<path>` هو عنصر يمثل مسار الرسم الذي يتم رسمه باستخدام تعبيرات معقدة. - `
<circle>` هو عنصر يمثل دائرة. - الفئات `cls-1`, `cls-2`, `cls-3`, و `clc-1` تُستخدم لتحديد ألوان وسمات مختلفة للعناصر.
العناصر الأساسية في الكود
الجزء الرئيسي هو العنصر `<g>` الذي يحتوي على العديد من العناصر الأخرى وتستخدم لتطبيق تحريك دائري (دوران) على الأيقونة بواسطة العنصر `<animateTransform>`. يتم دوران الأيقونة بزاوية محددة حول نقطة معينة بشكل متكرر.
عنصر الدوران
عنصر الدوران (`<animateTransform>`) الموجود في الكود SVG الذي قدمته هو العنصر المسؤول عن تحريك الأيقونة بشكل دائري. في هذا السياق، تم استخدام `<animateTransform>` لإضافة حركة دوران دائرية للأيقونة حول نقطة معينة.
الخصائص المحددة ل عنصر الدوران
الكود يحدد الخصائص التالية لعنصر `<animateTransform>`:
- `
attributeName`: يُحدد السمة التي سيتم تغييرها، وهنا هي "transform" لتغيير ميزة التحويل. - `
attributeType`: يحدد نوع السمة، وهنا "XML" لأنها تابعة للمستند XML. - `
dur`: يُحدد مدة الدوران، وهنا هي 1 ثانية. - `
from`: يُحدد الزاوية البدائية للدوران (360 درجة حول النقطة المحددة). - `
to`: يُحدد الزاوية النهائية للدوران (0 درجة حول النفقة المحددة). - `
type`: يُحدد نوع التحول، وهنا هو"rotate".
تحقيق حركة دوران
باستخدام هذا العنصر، تم تحقيق حركة دوران للأيقونة في الرسم بزاوية بدء 360 درجة وانتهاء عند 0 درجة حول نقطة محددة. هذا يخلق حركة دائرية دائمة تسمح للأيقونة بالدوران حول هذه النقطة بشكل مستمر، مما يضيف عنصرًا ديناميكيًا إلى الرمز أو الأيقونة المرسومة.
العناصر الأخرى في الكود
العناصر الأخرى تمثل الأجزاء المختلفة من الرمز البصري، مثل الدوائر والمسارات التي تشكل الشكل النهائي للأيقونة.
عنصر `<animateTransform>` مستخدم بشكل شائع لإضافة تحريك دوراني إلى العناصر في مستند SVG. إليك بعض الأمثلة الأكثر شيوعًا لاستخدام عنصر `<animateTransform>` لتحقيق حركة دوران:
<animateTransform attributeName='transform' attributeType='XML' dur='1s' from='0 150 150' to='360 150 150' type='rotate' repeatCount='indefinite' />
<animateTransform attributeName='transform' attributeType='XML' dur='2s' from='0 100 100' to='360 100 100' type='rotate' repeatCount='indefinite' />
<animateTransform attributeName='transform' attributeType='XML' dur='10s' from='0 250 250' to='360 250 250' type='rotate' repeatCount='indefinite' />
<animateTransform attributeName='transform' attributeType='XML' dur='2s' from='0 50 50' to='360 50 50' type='rotate' repeatCount='indefinite' />
<animateTransform attributeName='transform' attributeType='XML' dur='1s' from='0 75 75' to='360 75 75' type='rotate' repeatCount='indefinite' />
<animateTransform attributeName='transform' attributeType='XML' dur='1s' from='0 120 120' to='360 120 120' type='rotate' repeatCount='indefinite' />
<animateTransform>` لتحريك الكاميرا بشكل دوراني حول نموذج ثلاثي الأبعاد.<animateTransform attributeName='transform' attributeType='XML' dur='5s' from='0 200 200' to='360 200 200' type='rotate' repeatCount='indefinite' />
هذه أمثلة على استخدام عنصر `<animateTransform>` لتحقيق حركة دوران متنوعة في الرسومات والواجهات.
تحريك ثلاثي الأبعاد (`rotate3D`)
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
data-name="Layer 1"
viewBox="0 0 528.12 529.82"
width="2492"
height="2500"
style="animation: rotate3D 2s linear infinite">
<title>siwane</title>
<defs>
<style>
.cls-1{fill:#333}
.cls-2{fill:#299e94}
.cls-3{fill:#333}
.clc-1{fill:#299e94}
.cls-2{fill: var(--themeC)}
.clc-1{fill: var(--themeC)}
.drK .cls-1 {fill:#FFF}
.drK .cls-3 {fill:#FFF}
.drK .cls-2{fill:#299e94}
.drK .clc-1{fill:#299e94}
@keyframes rotate3D {0%
{transform: rotate3D(0, 1, 0, 0deg)}
100% {transform: rotate3D(0, 1, 0,
360deg);}}
</style>
</defs>
<g transform='rotate(91 264.06 264.91)'>
<path
class='cls-1'
d=' M269.8 122.37c16.73 70.38-35.22 164.18-147.47 149.1l-1.64-.24A145.79 145.79 0 1 0 269.8 122.37z' />
<circle
class='clc-1'
cx='147.46'
cy='147.46'
r='102.22' />
<path
class='cls-2'
d='M424 115.63a100.55 100.55 0 0 0-56.87 17.56c17.37 13.09 93.05 77.93 57.57 190.21 56.13-.39 101.52-46.74 101.52-103.88-.04-57.38-45.81-103.89-102.22-103.89zM302.08 486a100.64 100.64 0 0 0 17.78-56.8c-20.64 6.88-117 32.45-189.31-60.45-31.52 46.45-19.08 110.12 28 142.53 47.25 32.51 111.51 21.19 143.53-25.28z' />
<path
class='cls-3'
d='M484.8 330.41a230 230 0 0 1-154.51 154.42 126.51 126.51 0 0 1-38.49 43.34c124.5-12.63 223.5-111.51 236.32-235.95a126.19 126.19 0 0 1-43.32 38.19zM212 41.29a229.94 229.94 0 0 1 206.27 52.78c2.44-.14 4.89-.23 7.36-.23A125.38 125.38 0 0 1 475.1 104a265 265 0 0 0-320-80.25A125 125 0 0 1 212 41.29zM92.16 425.63c0-3.06.15-6.09.37-9.09a229.81 229.81 0 0 1-52-201.31 124.94 124.94 0 0 1-18.4-56.65 265 265 0 0 0 79.44 314.71 124.55 124.55 0 0 1-9.41-47.66z' />
</g>
</svg>في الكود الجديد، تم إضافة تحريك ثلاثي الأبعاد (`rotate3D`) بدلاً من الدوران الثنائي الأبعاد السابق. هذا العنصر الجديد يستخدم خاصية `@keyframes` لتحديد تسلسل الحركة ثلاثية الأبعاد. دعوني أشرح ذلك بتفصيل:
- `
style="animation: rotate3D 2s linear infinite"`: تم إضافة هذا النص في الوسم `<svg>` لتطبيق تحريك ثلاثي الأبعاد. يتم تحديد مدة الحركة (`2s` لثانيتين)، نمط التوقيت (`linear` لحركة متساوية)، والتكرار (`infinite` لتكرار لا نهائي). - `
@keyframes rotate3D {...}`: تم إضافة هذا النص في الوسم `<style>` لتحديد الحركة ثلاثية الأبعاد. الكود يبدأ باستخدام `@keyframes` متبوعًا بـ `rotate3D` والذي يعتبر اسم الحركة. - `
0% {...}`: هذا الجزء يحدد الحالة الأولى للحركة عندما تبدأ (0٪). هنا تم تحديد الخاصية `transform` لتكون `rotate3D(0, 1, 0, 0deg)`، مما يعني أن العنصر لن يتم دورانه في هذه الحالة (زاوية دورانه صفر درجة). - `
100% {...}`: هذا الجزء يحدد الحالة النهائية عندما تصل الحركة إلى نهايتها (100٪). هنا تم تحديد الخاصية `transform` لتكون `rotate3D(0, 1, 0, 360deg)`، مما يعني دوران العنصر حول المحور الأفقي بزاوية 360 درجة.
بهذه الطريقة، تم إضافة تحريك ثلاثي الأبعاد إلى الرمز أو الأيقونة، مما يتيح لها الدوران حول المحور الأفقي بزاوية 360 درجة بشكل مستمر.
دمج الدوران وتحريك ثلاثي الأبعاد
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
data-name="Layer 1"
viewBox="0 0 528.12 529.82"
width="2492"
height="2500"
style="animation: rotate3D 2s linear infinite">
<title>siwane</title>
<defs>
<style>
.cls-1{fill:#333}
.cls-2{fill:#299e94}
.cls-3{fill:#333}
.clc-1{fill:#299e94}
.cls-2{fill: var(--themeC)}
.clc-1{fill: var(--themeC)}
.drK .cls-1 {fill:#FFF}
.drK .cls-3 {fill:#FFF}
.drK .cls-2{fill:#299e94}
.drK .clc-1{fill:#299e94}
@keyframes rotate3D {0%
{transform: rotate3D(0, 1, 0, 0deg)}
100% {transform: rotate3D(0, 1, 0,
360deg);}}
</style>
</defs>
<g transform='rotate(91 264.06 264.91)'>
<!-- هذا الجزء يعمل على تحريك الأيقونة بشكل دائري -->
<animateTransform
attributeName='transform'
attributeType='XML'
dur='1s'
from='360 264.06 264.91'
repeatCount='indefinite'
to='0 264.06 264.91'
type='rotate' />
<path
class='cls-1'
d=' M269.8 122.37c16.73 70.38-35.22 164.18-147.47 149.1l-1.64-.24A145.79 145.79 0 1 0 269.8 122.37z' />
<circle
class='clc-1'
cx='147.46'
cy='147.46'
r='102.22' />
<path
class='cls-2'
d='M424 115.63a100.55 100.55 0 0 0-56.87 17.56c17.37 13.09 93.05 77.93 57.57 190.21 56.13-.39 101.52-46.74 101.52-103.88-.04-57.38-45.81-103.89-102.22-103.89zM302.08 486a100.64 100.64 0 0 0 17.78-56.8c-20.64 6.88-117 32.45-189.31-60.45-31.52 46.45-19.08 110.12 28 142.53 47.25 32.51 111.51 21.19 143.53-25.28z' />
<path
class='cls-3'
d='M484.8 330.41a230 230 0 0 1-154.51 154.42 126.51 126.51 0 0 1-38.49 43.34c124.5-12.63 223.5-111.51 236.32-235.95a126.19 126.19 0 0 1-43.32 38.19zM212 41.29a229.94 229.94 0 0 1 206.27 52.78c2.44-.14 4.89-.23 7.36-.23A125.38 125.38 0 0 1 475.1 104a265 265 0 0 0-320-80.25A125 125 0 0 1 212 41.29zM92.16 425.63c0-3.06.15-6.09.37-9.09a229.81 229.81 0 0 1-52-201.31 124.94 124.94 0 0 1-18.4-56.65 265 265 0 0 0 79.44 314.71 124.55 124.55 0 0 1-9.41-47.66z' />
</g>
</svg>في الكود الذي تم تقديمه، تم دمج عنصري الدوران دوران ساعة اليد والتحريك ثلاثي الأبعاد في نفس العنصر `<svg>` لإضافة تأثيرين حركيين معًا.
عنصر `<animateTransform>`: الدوران الثنائي الأبعاد
عنصر الدوران `<animateTransform>` يتيح دوران الأيقونة بشكل دائري حول نقطة محددة، في حين أن تحريك ثلاثي الأبعاد هو تأثير يتيح للأيقونة الدوران ثلاثي الأبعاد حول محورها.
تحريك ثلاثي الأبعاد: الدوران الديناميكي
هذه المزيج يجعل الرمز أو الأيقونة تدور دائريًا ثلاثي الأبعاد حول محور محدد، مما يخلق تأثير حركي مثير وديناميكي. يمكن استخدام هذا النوع من الحركة لجذب انتباه المستخدمين وجعل العناصر البصرية أكثر تفاعلًا وإثارة.
الأيقونات SVG المتحركة تضيف جاذبية وحيوية إلى مواقع الويب. ومع ذلك، يتوجب علينا توخي الحذر في استخدامها لضمان أنها لا تؤثر سلبًا على أداء الموقع. يمكننا تحسين هذا الأمر من خلال ضبط سرعة الحركة وتقليل حجم الملفات والاعتناء بالوصولية. هناك العديد من الإمكانيات الرائعة مع الأيقونات المتحركة، ولكن التوازن بين الجاذبية والأداء هو الأمر الرئيسي.جمال الحزازي
ختامًا
الأيقونات SVG المتحركة تضيف لمسة جذابة وديناميكية إلى موقعك على الويب. يمكنك استخدامها بأمانة لزيادة جاذبية موقعك وتحسين تجربة المستخدم. بالتدريب والإبداع، يمكنك إنشاء أيقونات SVG متحركة رائعة تثري محتوى موقعك وتجذب المزيد من الزوار. لذا، لا تتردد في استخدام الأيقونات SVG المتحركة في مشاريعك التالية واجعل تصميم موقعك أكثر جاذبية وإشراقًا.
إذا كنت تبحث عن مصادر للأيقونات SVG المتحركة جاهزة، يمكنك استخدام مكتبات مثل "Lottie" و "Bodymovin" التي توفر مجموعة كبيرة من الأيقونات المتحركة وأدوات لتضمينها بسهولة في موقعك.
منشورات ذات صل
استخدام الأيقونات SVG المتحركة يمكن أن يكون طريقة رائعة لإضافة الإبداع والديناميكية إلى مشاريعك على الويب. ابدأ اليوم واستمتع بالإمكانيات اللامحدودة للرموز المتحركة.
شكرًا لمساعدة ChatGPT في إعداد هذا المقال
