انیمیشن SVG بدون جاوااسکریپت! آشنایی با SMIL — تکنولوژی فراموش‌شده‌ای که باید بدانید

SMIL یا Synchronized Multimedia Integration Language، یکی از تکنولوژی‌های قدرتمند اما کمتر شناخته‌شده برای انیمیشن‌سازی SVG است. این زبان نشانه‌گذاری مستقیماً در داخل تگ‌های SVG کار می‌کند و می‌تواند تمام عناصر یک فایل SVG را — از مسیرها و شکل‌ها تا رنگ‌ها و فیلترها — بدون نیاز به حتی یک خط جاوااسکریپت انیمیشن دهد.

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

یکی از جذاب‌ترین ویژگی‌های SMIL، پشتیبانی از timing charts یا نمودارهای زمان‌بندی است که به شما اجازه می‌دهد زمان‌بندی دقیق انیمیشن‌ها را کنترل کنید. همچنین امکاناتی مثل همگام‌سازی چند انیمیشن، انیمیشن در امتداد مسیر (path animation) و تکرار با الگوهای مختلف، همگی بدون جاوااسکریپت در دسترس هستند.

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

به نقل از کدیران

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

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

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