با Animista، به‌راحتی انیمیشن CSS بسازید

اگر طراح وب هستید، حتماً اهمیت ویژه کد نویسی CSS و انیمیشن را به‌خوبی می‌دانید. اپلیکیشن‌های آنلاین متعددی برای ساخت انیمیشن CSS وجود دارد، اما به‌جرئت می‌توان ادعا کرد که تنها تعداد اندکی از آن‌ها مانند اپلیکیشن Animista از طراحی جزئیات پشتیبانی می‌کنند و استفاده از آن‌ها هم راحت است.

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

مقاله مرتبط: ٢٠ ترفند CSS که هر طراح وب باید بداند

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

مقاله مرتبط: روش های کاهش حجم کدهای CSS

رابط کاربری اپلیکیشن Animista ممکن است در ابتدا کمی شلوغ و پیچیده و همچنین گیج‌کننده به نظر برسد اما پس از مدتی متوجه می‌شوید که دلیل آن احتمالاً تعداد تنظیمات و گزینه‌های مختلفی است که امکان شخصی‌سازی و طراحی انیمیشن را برایتان میسر می‌کند.

برای ایجاد انیمیشن در اپلیکیشن Animista باید این سه مرحله اصلی را دنبال و رابط کاربری را از بالا به پایین طی کنید:

۱ – سبک حرکت را انتخاب کنید (motion style). برای این کار باید از دایره‌های بالای صفحه که هرکدام نشان‌دهنده یک حالت چرخش، تبدیل و… هستند، یکی را برگزینید.

۲ – سبک انتخابی را با انواع حرکت‌هایی که درست زیر آن‌ها قرار دارند با سلیقه خودتان شخصی‌سازی کنید.

۳ – حالا گزینه‌های جزئی حرکت را که در نوار سمت چپ صفحه دیده می‌شوند، ویرایش کنید.

در این روند قادر خواهید بود بازه زمانی حرکت انیمیشن را هم از کند کردن تا اعمال تأخیر و تقریباً هر تغییر دیگری تنظیم کنید. جالب است بدانید که این تغییرات همگی در قالب CSS3 ناب اتفاق می‌افتند و همین موضوع استفاده از Animista را جالب‌توجه‌تر کرده است.

همچنین در بالاترین نوار تنظیمات موجود در رابط کاربری این اپلیکیشن می‌توانید انواع مختلف سبک‌های انیمیشن را با توجه به هدف اصلی این پویانمایی انتخاب کنید و بعداً وارد تنظیمات جزئی دیگر شوید.

مقاله مرتبط: کتابخانه های منحصر به فرد برای طراحی دکمه های CSS

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

لینک Attention در نوار بالای رابط کاربری هم بسیار جالب است و جلوه‌های ویژه تکانی و جلب‌توجه ‌کننده‌ای را روی سبک‌های دکمه‌ای صفحه اعمال می‌کند. این گزینه مخصوصاً برای طراحی دکمه CTA مناسب است و باعث جذب کاربر و تشویق او به درگیر شدن با عنصر متحرک می‌شود.

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

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

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