18 مه
SVGator در حال تکامل است و بسیار متحول می شود. سه سال پیش ، ما مقدمه ای جامع در مورد استفاده اساسی SVGator منتشر کردیم. در آن زمان این برنامه فقط برای متحرک سازی فایل های SVG ایجاد شده در برنامه های دیگر بود. دو سال پیش ، شما را با نسخه جدید SVGator و قابلیت های انیمیشن بهبود یافته آن آشنا کردیم. این بار ، ما در حال معرفی یک نسخه اصلی جدید SVGator که یک محیط کامل و کامل برای ترسیم از ابتدا و متحرک سازی گرافیک SVG ارائه می دهد.
توجه داشته باشید: برخی از ویژگی های SVGator که در این آموزش آورده شده است پرداخت می شود. در برنامه رایگان ، می توانید تعداد نامحدودی از گرافیک SVG را ایجاد و صادر کنید. همچنین می توانید از ویژگی های اساسی انیمیشن استفاده کنید و ماهانه 3 انیمیشن صادر کنید. ویژگی های پیشرفته انیمیشن با شروع از 11 دلار در ماه در یک برنامه پولی در دسترس هستند.
در این مقاله ، ما یک روند ایجاد یک لودر SVG سفارشی ، از کشیدن آن از ابتدا و اعمال جلوه های دیداری مختلف ، از طریق ایجاد انواع مختلف انیمیشن ها ، صادرات فایل خود و آماده سازی آن برای استفاده در وب را دنبال خواهیم کرد.
ما با ایجاد یک پرونده خالی جدید و تغییر رنگ پس زمینه آن شروع می کنیم.
از اینجا ، می توانیم نقاشی را که بعداً متحرک سازی می کنیم ، شروع کنیم. SVGator به شما امکان می دهد تمام اشکال استاندارد SVG مانند بیضی ، مستطیل و چند ضلعی را ترسیم کنید و همچنین از ابزار Pen and Pencil برای ترسیم خود استفاده کنید. همچنین می توانید از توابع بولی برای ترکیب اشکال با یکدیگر استفاده کنید.
برای ایجاد سهولت در شکل دلخواه ، شروع کردم به کشیدن یک دایره به عنوان راهنما در مرکز بوم. خوشبختانه ، SVGator به لطف سیستم هوشمند راهنماها و توابع حذف ، ساده سازی و اندازه گیری عناصر را ساده می کند. برای دقت و وفاداری بهتر می توانید از شبکه ها و خط کش ها نیز استفاده کنید.
بعد ، با استفاده از Pen Tool ، اولین لکه را تقریباً به دنبال شکل دایره زیر می کشیم. ابزار Pencil نیز برای این منظور خوب عمل می کند. نکته جالب در مورد این یکی این است که SVGator’s Pencil Tool معمولاً اشکال با نقاط گره بسیار کمتری نسبت به ابزارهای قابل مقایسه در برنامه های دیگر ایجاد می کند ، که باعث می شود نتیجه نه تنها نرم تر به نظر برسد بلکه از اندازه پرونده نیز بسیار سبک تر باشد.
ایجاد و ویرایش اشکال در SVGator ممکن است کمی متفاوت از سایر ابزارهای برداری باشد اما وقتی عادت کردید ، واقعاً یک نسیم است. همچنین توجه به این نکته مهم است که تمام ویژگی های طراحی SVGator کاملاً رایگان است بنابراین می توانید از آن به عنوان نرم افزار سازنده SVG خود به همان اندازه که می خواهید بدون هیچ هزینه ای استفاده کنید.
با آماده شدن اولین لکه ، وقت آن است که کمی آن را سبک کنید. در اینجا ، ما در حال دیدن یکی از بزرگترین مزیت های رقابتی برنامه هستیم. سایر برنامه های معروف گرافیکی برداری که به شما امکان می دهد فایل های SVG را صادر کنید ، معمولاً باید از ویژگی های آنها استفاده کنند تا متناسب با انبوهی از قالب ها و موارد استفاده شوند. در همان زمان ، برنامه ها عمدتا بر روی رابط های کاربری تمرکز می کردند ، بیشتر به آنچه در ویژگی های HTML و CSS امکان پذیر است ، توجه می کنند ، به ندرت به ویژگی های خاص SVG مانند نشانگرهای ضربه یا فیلترها علاقه زیادی نشان می دهند.
SVGator صرفاً با هدف ایجاد پرونده های SVG ، از آنچه به ویژه این قالب ارائه می دهد ، بهره كامل می برد. این شامل گزینه های خاص مربوط به نحوه کنترل SVG در سکته های مغزی ، پر کردن ، عناصر شیبدار است (آیا در مورد آن شنیده اید) spreadMethod فیلترهای شیب SVG؟) ، فیلترها (مانند تاری ، سایه یا قهوه ای) و بسیاری دیگر.
همچنین به شما امکان می دهد (با پر کردن ، ضربات ، ضربه ها و موارد دیگر) با اطمینان از نتیجه نهایی مطابق انتظار نتیجه گیری کنید ، زیرا همه این ویژگی ها مخصوصاً برای پرونده های SVG ایجاد شده اند.
در مورد ما ، یک گرادیان تک و یک ضربه شیب ایجاد می شود. من همچنین به عنوان لمس نهایی یک فیلتر تاری تاری را روی عنصر قرار دادم. توجه داشته باشید که SVGator از فیلترهای SVG بومی به جای CSS استفاده می کند ، به شما این امکان را می دهد که خصوصیات تاری را برای هر دو محور جداگانه کنترل کنید. در این حالت ، من فقط یک محو کردن محور x را اعمال کردم.
در مرحله بعدی ، می توانیم لکه را کپی کنیم و دوباره از ابزار Pen استفاده کنیم تا دو حباب متفاوت دیگر ایجاد کنیم. نحوه کار Pen Tool اصلاح شکل بدون از دست دادن خط صاف و مداوم آن را واقعاً آسان می کند.
به عنوان عنصر نهایی تصویر ، چند نقطه درخشان که به طور تصادفی قرار داده شده اند اضافه می کنیم. آنها بیش از دایره هایی با پرشدگی شیب دار نیستند.
لودر ما در حالت اولیه خود آماده است. اکنون زمان سرگرم کننده ترین قسمت است: انیمیشن!
در واقع مهم نیست که ابتدا کدام عنصر از تصویر را تحریک می کنیم. در مورد من ، من با انیمیشن درخشش شروع کردم. با افزودن یک انیماتور موقعیت به هر عنصر ، می توانیم انیمیشن مسیر پیچیده ایجاد کنیم. انیمیشن های Path به ما امکان می دهند که یک عنصر در طول زمان از هر شکلی پیروی کند. در مورد ما ، باعث ایجاد درخشش در اطراف بوم می شود تا تصویری از پرواز در اطراف عناصر مرکزی تصویر ایجاد شود. همچنین می توانیم از Scale and Opacity Animators استفاده کنیم تا به نظر برسد درخشش بیشتر و نزدیکتر از بیننده دور می شود و توهم حرکتی را در فضای 3 بعدی تقویت می کند.
توجه داشته باشید: اگر می خواهید درباره ایجاد انیمیشن های مسیر اطلاعات بیشتری کسب کنید ، توصیه می کنم این آموزش را مشاهده کنید:انیمیشن مسیر حرکت – متحرک سازی هر شی در یک مسیر سفارشی“
برای متحرک سازی حباب ها ، می توان از یک متحرک Morph استفاده کرد. این به ما اجازه می دهد تا یک شکل را به موقع اصلاح کنیم و انتقال های صافی بین آن حالت ها ایجاد کنیم. برای دستیابی به یک انتقال خوب و تمیز بین دو شکل ، ما یک keyframe به جدول زمانی انیماتور Morph اضافه می کنیم و شکل آن را با Pen Tool اصلاح می کنیم – درست مانند زمانی که لکه های اضافی را ترسیم کردیم.
اگر می خواهید در مورد ایجاد انیمیشن های مورف بیشتر بدانید ، این آموزش نه تنها اصول اولیه را به شما معرفی می کند بلکه آن را به یک سطح کاملا جدید می رساند: “آموزش پیشرفته انیمیشن Morph“
قسمت مهمی از هر انیمیشن عملکرد زمان بندی آن است. برای درخشش ، من بیشتر از توابع زمان بندی Ease In Out استفاده کردم. این اجازه می دهد تا نقطه ها هنگامی که به گردش باریک مدار می رسند و در امتداد مستقیم سرعت می گیرند ، سرعت خود را کم کنند و به حرکت کمک می کند تا به آنچه در چنین منظری از فضای چند بعدی به نظر می رسد نزدیک شود.
برای حباب ها ، من از یک تابع Ease In Out استفاده کردم. می توانید متوجه شوید که هر دو عملکرد زمان بندی با شکل ظاهری توابع Ease In Out متفاوت هستند. با استفاده از رابط منحنی bezier آنها را کمی “تیز” کردم. این امر به من اجازه داد تا حرکات را بدون چرخش ناگهانی و سکسکه ، اما بدون کند شدن سرعت زیاد ، نرم و طبیعی نشان دهم.
پس از چند تنظیم جزئی دیگر ، پرونده برای صادرات آماده است. نسخه جدید SVGator ترکیبی از قابلیت پیش نمایش با قابلیت های صادراتی است. با تشکر از آن ، در حالی که در حال آزمایش و تغییر تنظیمات صادرات هستید ، می توانید از انیمیشن های خود پیش نمایش مرورگر در زمان واقعی داشته باشید.
در مورد ما ، ما می خواهیم انیمیشن به عنوان یک حلقه بی نهایت عمل کند. همچنین می توانید رفتار گرافیک را کنترل کنید ، برای بارگذاری در اثر کاربر یا عملکرد کاربر مانند کلیک یا پیمایش نشان دهید.
فایل صادر شده کاملاً با انیمیشنی که در برنامه ایجاد کرده ایم مطابقت دارد و آماده استفاده در وب است.
قلم را ببینید [SVGator Loader](https://codepen.io/smashingmag/pen/wvJzWgp) توسط نیکلاس.
امیدوارم از این مقاله لذت برده باشید و این امر به شما الهام بخشیدن برای ایجاد شگفت انگیزترین چیزها با SVG در کارهایتان باشد!
بعد کجا؟ در زیر می توانید چند منبع مفید برای ادامه سفر خود با SVG و SVGator پیدا کنید:
(vf ، او)