راهنمای مبتدیان برای انیمیشن SVG با CSS

کشف کنید که چگونه با استفاده از یک نشانه گذاری SVG و چند سبک CSS، انیمیشن های روان برای وب سایت خود ایجاد کنید.

گرافیک های برداری مقیاس پذیر (SVG) چیزی بیش از فایل های تصویری هستند. به عنوان یک برنامه XML، SVG ها حاوی نشانه گذاری هستند که بسیار شبیه HTML به نظر می رسد و کار می کند. همچنین می توانید از آنها در ارتباط با کدهای CSS و جاوا اسکریپت استفاده کنید. این امکان متحرک سازی فایل های SVG را فراهم می کند و تصاویر پیچیده ای ایجاد می کند که برای طراحی وب و سایر محیط های پویا به خوبی کار می کنند.

اما چگونه می توان یک انیمیشن SVG ساخت؟ با یک شکل SVG شروع کنید، آن را با استفاده از CSS متحرک کنید و بر اساس این اصول برای استفاده از انیمیشن در کار خود استفاده کنید.

متحرک سازی SVG با HTML و CSS

اگرچه می توانید از جاوا اسکریپت برای متحرک سازی برنامه نویسی SVG استفاده کنید، CSS اکنون از انیمیشن ها نیز پشتیبانی خوبی دارد. شما می توانید تمام کدهای نمونه را در CodePen برای این پروژه پیدا کنید.

ساخت یک تصویر SVG در داخل HTML

اولین گام در این فرآیند ساخت تصویر SVG است که با آن کار خواهید کرد. می توانید نشانه گذاری SVG را در پنل HTML در CodePen پیدا کنید.

ساختار SVG

در حالی که SVG ها فرمت مشابهی با HTML دارند، برچسب هایی که برای ایجاد آنها استفاده می کنید متفاوت هستند. یک 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>

SVG Shapes

شما می توانید تصاویر دقیقی را با SVG ایجاد کنید، با مجموعه ای از ابزارهای شکل های مختلف که در اختیار دارید. این مثال 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"/>

هنگامی که انیمیشن در جای خود قرار گرفت، اشکال در کنار یکدیگر قرار می گیرند.

مطلب مرتبط: چگونه با استفاده از OAuth یک سیستم احراز هویت اجتماعی در جنگو بسازیم

این سه شکل SVG برخی از رایج‌ترین شکل‌ها هستند، اما موارد بیشتری برای انتخاب وجود دارد. هنگام کار با یک انیمیشن SVG می توانید از اشکال زیر استفاده کنید:

دایره SVG: این شکل شبیه بیضی است اما همیشه شعاع های X و Y برابر دارد.
خط SVG: یک خط SVG یک پاره خط منفرد با دو نقطه، یکی در هر انتها است.
SVG Polyline: Polylines مانند خطوط اصلی هستند، فقط می توانند بیش از دو نقطه داشته باشند.
چند ضلعی SVG: چند ضلعی های SVG مانند مستطیل هستند، فقط می توانند بیش از چهار نقطه داشته باشند و اشکال پیچیده را ممکن می سازند.
مسیر SVG: مسیرهای SVG مشابه ابزار قلم در Adobe Photoshop عمل می کنند. خطوط می توانند مانند یک چند خط/چند ضلعی به هم متصل شوند، اما می توانند منحنی هایی نیز روی آنها اعمال کنند.

چگونه SVG ها را با CSS متحرک کنیم

اکنون که چند شکل در SVG خود دارید، وقت آن است که به انیمیشن CSS بروید. هر یک از شکل‌ها انیمیشن متفاوتی برای نشان دادن برخی از گزینه‌های شما دارند، اما موارد بیشتری برای کشف با طرح‌های خود وجود دارد. دایره در سراسر صفحه حرکت می کند، گوشه های مربع گرد می شوند و مثلث می چرخد. همه اینها از فریم های کلیدی CSS برای ایجاد انیمیشن های روان استفاده می کنند.

حرکت دایره با استفاده از Transform و Translate

دایره در مثال SVG در طول چرخه انیمیشن خود از پایین به بالای صفحه حرکت می کند. قبل از اینکه دایره بتواند حرکت کند، باید یک انیمیشن را از طریق ویژگی CSS به آن اختصاص دهید:

#circle { animation: circle_anim 2000ms linear infinite normal forwards }

اولین کلمه در مقدار، circle_anim، نامی برای انیمیشن است. دو ثانیه (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) }
}

در این انیمیشن شش فریم کلیدی وجود دارد، بنابراین دایره در هر چرخه به شش مکان مختلف منتقل می شود. ویژگی transform: translate موقعیت دایره را در هر مرحله تنظیم می کند. در 0٪ دایره در وسط صفحه قرار دارد و 45٪ به سمت بالا و خارج از دید حرکت می کند. 50% قبل از پایین آمدن در زیر نما در 55% از صفحه به سمت چپ حرکت کرده است. دایره به میزان 60% به حالت افقی خود برمی گردد و انیمیشن در 100% با دایره در وسط صفحه کامل می شود.

مطلب مرتبط: 8 دلیلی که باید یاد بگیرید واکنش نشان دهید

ویژگی شعاع مرزی میدان را متحرک کنید

مربع در مثال مرجع خوبی برای انیمیشن های دارایی عمومی است. تا زمانی که سینتکس صحیح را برای استفاده بدانید، می توانید هر ویژگی CSS را متحرک کنید. ویژگی مرزی شعاع نشان دهنده خوبی برای این است. مربع دارای گوشه های تیز است که به گوشه های گرد تبدیل می شود و دوباره به گوشه های مربع برمی گردد.

#square { animation: square_anim 2000ms ease-in-out infinite normal forwards }

انیمیشن مربع Square_anim نام دارد و زمان اجرای آن دو ثانیه است. منحنی ease-in-out انیمیشن را در ابتدا و انتهای آن کندتر می کند و یک جلوه صاف ایجاد می کند.

@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٪ تغییر می کند، در 40px تا 55٪ مکث می کند. سپس تا زمانی که انیمیشن به 100% برسد، به 0px برای هر شعاع برمی گردد.

مثلث SVG را با Transform بچرخانید

انیمیشن SVG نهایی در مثال ساده ترین است و مثلث حول نقطه مرکزی خود می چرخد. شکل هر دو ثانیه یک چرخش کامل را کامل می کند و تا بی نهایت به کار خود ادامه می دهد. دارای یک منحنی آسان‌تر است که منجر به کند شدن انیمیشن در پایان می‌شود. انیمیشن triangle_anim نام دارد.

#triangle { animation: triangle_anim 2000ms ease-out infinite normal forwards }

این انیمیشن دارای دو فریم کلیدی است، یکی در 0% و دیگری در 100%. ویژگی Transform rotate مثلث را از 0 درجه در 0٪ به 360 درجه در 100٪ تبدیل می کند و یک چرخش کامل ایجاد می کند.

@keyframes triangle_anim {
    0% { transform: translate(644px, 297px) rotate(0deg) }
    100% { transform: translate(644px, 297px) rotate(360deg) }
}

نحوه متحرک سازی سایر ویژگی ها

سه انیمیشنی که در بالا توضیح داده شد، نقطه شروع خوبی برای زمانی هستند که با SVG کار می کنید، اما احتمالاً می خواهید این کار را بیشتر انجام دهید. شما می توانید از قانون متحرک CSS برای تنظیم تقریباً هر مقدار ویژگی که می توانید به SVG خود اختصاص دهید استفاده کنید. این شامل مقادیر اساسی، مانند اندازه و موقعیت، و همچنین مقادیر پیشرفته تر، مانند مرزها، سایه ها، و حالت های ترکیبی است.

مطلب مرتبط: نحوه پر کردن داده های از دست رفته با استفاده از پانداهای پایتون

در موارد نادری که CSS نمی تواند این کار را انجام دهد، می توانید از کد جاوا اسکریپت برای متحرک سازی تصاویر SVG استفاده کنید. زمانی که برای برداشتن گام بعدی با SVG آماده شدید، می‌توانید راهنماهای زیادی برای کمک به شما در این زمینه پیدا کنید.

ساخت انیمیشن های SVG خودتان

چه یک طراح وب، توسعه‌دهنده نرم‌افزار، یا صرفاً یک فرد خلاق باشید، ساخت انیمیشن‌های SVG می‌تواند سرگرم‌کننده و رضایت‌بخش باشد. وقتی با اصول اولیه راحت شدید، می‌توانید منابع زیادی در سراسر وب پیدا کنید که می‌توانند به شما در ساخت انیمیشن‌های مبتنی بر وب کمک کنند.

Tags: انیمیشن توسعه وب سی اس اس طراحی وب سایت گرافیک برداری