انیمیشن SVG بدون جاوا اسکریپت؛ با قدرت SMIL و نمودارهای زمان‌بندی آشنا شوید

اگر تا به حال با فایل‌های SVG کار کرده باشید، احتمالاً اولین راه حلی که برای انیمیشن دادن به آن‌ها به ذهنتان رسیده، استفاده از جاوا اسکریپت یا کتابخانه‌های سنگین انیمیشن بوده است. اما یک راه ساده‌تر، سبک‌تر و کاملاً بومی هم وجود دارد که اغلب نادیده گرفته می‌شود: SMIL.

SMIL که مخفف Synchronized Multimedia Integration Language است، به شما اجازه می‌دهد با استفاده از تگ‌هایی مانند <animate> و <animateTransform> که مستقیماً داخل خود SVG قرار می‌گیرند، تقریباً هر ویژگی از هر المانی را انیمیشن دهید. رنگ، موقعیت، اندازه، چرخش و حتی حرکت روی مسیر؛ همه این‌ها بدون نوشتن حتی یک خط جاوا اسکریپت قابل اجرا هستند.

در این میان، نمودارهای زمان‌بندی (Timing Charts) نقش نقشه ساخت را بازی می‌کنند. با تعیین دقیق زمان شروع، مدت زمان اجرا و نحوه تغییر هر ویژگی، می‌توانید انیمیشن‌های چندلایه و هماهنگی بسازید که در آن هر المان درست در لحظه‌ای که باید حرکت می‌کند. این نمودارها دیدی شفاف از جریان کلی انیمیشن ارائه می‌دهند.

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

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

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

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

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

منبع: SmashingMagazine (مشاهده متن اصلی)