کار با SVGator

کار با SVGator

 SVG  نه تنها قابلیت سازگاری کاملی با رزولوشن‌های مختلف را دارد (resolution-independent) و می‌تواند روی دستگاه‌های مختلف پیاده‌سازی شود بلکه نسبت به دیگر فرمت‌های تصویری اندازه و حجم بسیار کمتری دارد.یکی از مهمترین ویژگی‌هایی که SVG به ما می‌دهد قابلیت دسترسی داشتن به قسمت‌های مختلف یک تصویر از طریق کدنویسی است. می‌توانیم از طریق CSS استایل تصاویر را تغییر دهیم و کارهای بسیار دیگری را انجام دهیم. اما آیا می‌دانستید که می‌توانید با استفاده از SVG انیمیشن نیز بسازید؟متحرک‌سازی SVG می‌تواند بسیار پیچیده باشد و همچنین نیازمند انجام کدنویسی‌های پیچیده است. اما SVGator به نظر می‌رسد که یک راه‌حل بسیار خوب را برای این موضوع ارائه داده است. با استفاده از پلتفرم SVGator به سادگی هر چه بیشتر می‌توانید انیمیشن‌های SVG مورد نظرتان را از طریق مرورگر ایجاد کنید.در این سری از  آموزش صفر تا صد طراحی سایت به آموزش نحوه کار با SVGator می پردازیم.

با وجود آنکه زمان بسیار کمی از انتشار این ابزار می‌گذرد، اما با وجود رابط کاربری ساده و کیفیت بالای کدهای تولیدی، توانسته محبوبیت بالایی را بدست بیاورد.

شروع کار با SVGator

برای کار با SVGator به چند مرحله ساده برای کار کردن نیاز دارید: ابتدا یک فایل SVG را در اپلیکیشن گرافیکی مورد علاقه‌تان ایجاد کنید. می‌توانید از ایلستریتور و یا اسکچ استفاده بکنید. همچنین می‌توانید این کار را از طریق کدنویسی انجام دهید.

بعد از اینکار یک حساب کاربری را در SVGator ایجاد کرده و وارد آن شوید. در نهایت روی دکمه Import SVG کلیک کرده و فایل Svg ساخته شده را انتخاب کنید. وقتی که این فرایند انجام شد، شما می‌توانید کار متحرک سازی را شروع کنید.

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

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

متحرک‌سازی المان‌ها با استفاده از SVGato

متحرک‌سازی المان‌ها با استفاده از SVGator بسیار کار ساده‌ای است. تنها کافی‌ست المان مورد نظر را از لیست المان‌ها انتخاب کرده و آن را به Timeline اضافه کنید. بعد از آن یک یا چند انیمیشن را به آن اعمال کنید. حال می‌توانید Keyframeهای مختلفی را به المان‌تان اضافه کرده و خصوصیات آن را پیکربندی کنید.

۱) انتخاب یک المان و افزودن آن به  Timeline

در این قسمت چهار خصوصیت را می‌توانید مشاهده کنید که همگی قابلیت متحرک‌سازی با استفاده از SVGator را دارند. Position، Rotation، Scale و Opacity. اما لیست به همین موارد ختم نمی‌شود. در حقیقت می‌توانید لیست بسیار بزرگی از ترکیبات افکتی را برای خودتان ایجاد کنید.

۲) افزودن متحرک‌ساز Scale و Opacity به المان

همانطور که مشغول تعریف یک انیمیشن هستید و طول آن را تعیین می‌کنید، می‌توانید شیوه تعریف حرکت‌ها و زمان‌بندی آن‌ها را نیز تعیین کنید. این کار باعث می‌شود که انیمیشن شما طبیعی‌تر جلوه دهد و همه چیز براساس یک روال عادی جلو برود. روی Timeline انتخاب های مختلفی برای کنترل چنین موضوعی پیاده‌سازی شده است.

۳) Keyframeهایی را برای هر دو متحرک ساز Scale و Opacity اضافه کنید.

۴) قسمت تنظیمات را باز کرده و مطمئن شوید که چنین گزینه هایی را برای تصویرتان نیز دارید.

۵) پروژه را ذخیره کرده و خروجی بگیرید.

قابلیت استفاده از رویدادهای مختلف مانند loop، mouse-over و… را نیز در اختیار دارید.

SVGator Code

همزمان با داشتن یک محیط گرافیکی، SVGator این قابلیت را به شما می‌دهد که با استفاده از یک پنل مدیریت کد، کدهای ساخته شده را مشاهده و ویرایش نمایید.

SVGator کدهایی با ساختار خوب و مرتب را ارائه می‌دهد. بنابراین کاربرانی که در رابطه با کدنویسی SVG آشنایی بالایی ندارند نیز می‌توانند تا حد بسیاری از ویژگی‌های کدنویسی این ابزار استفاده بکنند.

انتخاب SVGator

تیم برنامه‌نویسی که این ابزار را توسعه‌ داده‌اند همواره در نظر داشته‌اند که امکاناتی را برای پیاده‌سازی انیمیشن‌های SVG روی وب داشته باشند. SVGator حال در نظر گرفتن این ایده‌ها است. شما در این ابزار هیچ محدودیتی برای تعداد پروژه‌های ساخته شده ندارید و می‌توانید تمام موارد را نیز در حساب کاربری‌تان ذخیره کنید.

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