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

در دنیای مدرن وب، سرعت بارگذاری صفحات و ارائه یک تجربه کاربری (UX) روان و بی‌نقص، مهم‌ترین فاکتورهای موفقیت یک وب‌سایت محسوب می‌شوند. امروزه توسعه‌دهندگان وب برای ایجاد افکت‌های بصری و حرکات جذاب، به‌طور مداوم از کتابخانه‌های سنگین جاوا اسکریپتی استفاده می‌کنند. با این حال، اجرای این کدهای سنگین پردازش زیادی به مرورگر کاربر اعمال کرده و باعث افت فریم یا تاخیر در پاسخ‌دهی صفحه می‌شود.

آیا می‌دانستید امکان ساخت انیمیشن‌های گرافیکی بسیار پیچیده و کاملاً مستقل، بدون حتی یک خط کد جاوا اسکریپت و به صورت مستقیم درون تگ‌های استاندارد <img> وجود دارد؟ تکنولوژی SMIL این امکان را برای شما فراهم می‌کند تا فایل‌های SVG را به تصاویری متحرک، سبک و بهینه تبدیل کنید.

چیستی SMIL و چرا در انیمیشن‌سازی وب بی‌رقیب است؟

زبان SMIL که مخفف Synchronized Multimedia Integration Language است و به‌صورت "سمايل" تلفظ می‌شود، یک استاندارد مبتنی بر XML است که توسط کنسرسیوم وب (W3C) معرفی شده است. این تکنولوژی به طراحان و توسعه‌دهندگان وب اجازه می‌دهد عناصر گرافیکی موجود در یک فایل SVG را مستقیماً درون کدهای خود XML متحرک‌سازی کنند، بدون اینکه نیازی به کدهای جاوا اسکریپت یا کدهای طولانی CSS وجود داشته باشد.

اگرچه ابزارها و کتابخانه‌های محبوب جاوا اسکریپتی نظیر GSAP یا Lottie قدرتمند هستند، اما SMIL دارای یک ویژگی استثنایی و بی‌رقیب به نام خودکفایی کامل (Self-ContAInment) است. زمانی که شما یک فایل SVG را با استفاده از SMIL متحرک می‌سازید، تمام منطق انیمیشن، زمان‌بندی‌ها، مسیرهای حرکت و فریم‌های کلیدی به عنوان بخشی از ساختار درونی همان فایل ذخیره می‌شوند.

استفاده از SMIL مزایای فنی مهمی به همراه دارد:

* سازگاری کامل با تگ <img> و CSS Background: انیمیشن‌های جاوا اسکریپتی یا CSS اینلاین برای اجرا نیاز دارند که کدهای SVG به‌صورت مستقیم درون سند HTML قرار گیرند. اما فایل‌های SVG مبتنی بر SMIL مانند یک تصویر معمولی با پسوند .png یا .jpg درون تگ <img> یا به عنوان تصویر پس‌زمینه در CSS بارگذاری شده و به زیبایی کار می‌کنند.
* قابلیت کش شدن عالی (Browser Caching): از آنجا که تصویر SVG به شکل یک فایل مستقل فراخوانی می‌شود، مرورگر می‌تواند آن را به‌طور کامل کش کند. این موضوع باعث می‌شود در بازدیدهای بعدی، انیمیشن بدون مصرف پهنای باند مجدد اجرا شود.
* امنیت بالا و جلوگیری از XSS: تگ <img> به دلایل امنیتی اجرای کدهای جاوا اسکریپت را مسدود می‌کند. بنابراین SMIL تنها راهکار مطمئن برای داشتن انیمیشن‌های هوشمند و متحرک درون تگ تصویر بدون مخاطرات امنیتی است.
* پردازش بهینه در مرورگر: موتورهای رندر مرورگر، انیمیشن‌های SMIL را به‌صورت مستقیم از طریق کارت گرافیک (Hardware Acceleration) پردازش می‌کنند که منجر به نرخ رندر روان (۶۰ فریم بر ثانیه) و عدم درگیری نخ اصلی (Main Thread) مرورگر می‌شود.

آناتومی تگ‌های SMIL و نحوه اجرای انیمیشن در تگ img

برای درک نحوه عملکرد انیمیشن‌ها در SMIL، باید با ساختار تگ‌های قدرتمند آن درون فایل SVG آشنا شویم. این تگ‌ها معمولاً به عنوان فرزند عناصر گرافیکی (مانند <circle>، <rect> یا <path>) قرار می‌گیرند و ویژگی‌های آن‌ها را تغییر می‌دهند.

اصلی‌ترین تگ‌های کاربردی SMIL عبارتند از:

1. تگ <animate>: برای تغییر مقادیر ویژگی‌ها (Attributes) مانند رنگ، ضخامت خط، شفافیت و ابعاد در طول زمان استفاده می‌شود.
2. تگ <animateTransform>: برای اعمال دگرگونی‌های هندسی مانند چرخش (Rotate)، تغییر مقیاس (Scale)، جابه‌جایی (Translate) و مورب‌سازی (Skew) به کار می‌رود.
3. تگ <animateMotion>: یکی از جذاب‌ترین ویژگی‌های SMIL است که به یک عنصر اجازه می‌دهد در طول یک مسیر برداری (Path) مشخص حرکت کند.
4. تگ <set>: برای تغییر لحظه‌ای و ناگهانی یک ویژگی در یک زمان خاص استفاده می‌شود.

هنگامی که این فایل درون تگ <img> در HTML قرار می‌گیرد، مرورگر آن را به عنوان یک سند کاملاً ایزوله اجرا می‌کند:

``html
<!-- نحوه فراخوانی فایل انیمیشن در HTML -->
<img src="animated-graphic.svg" alt="انیمیشن SVG با SMIL" />
`

نمونه کدی ساده از ساختار درونی فایل animated-graphic.svg:

`xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="100%" height="100%">
<!-- دایره‌ای که تغییر رنگ و اندازه می‌دهد -->
<circle cx="100" cy="100" r="30" fill="#3498db">
<animate
attributeName="r"
values="30;60;30"
dur="3s"
repeatCount="indefinite" />
<animate
attributeName="fill"
values="#3498db;#e74c3c;#3498db"
dur="3s"
repeatCount="indefinite" />
</circle>
</svg>
`

در نمونه کد بالا، ویژگی‌های r (شعاع) و fill (رنگ) بدون هیچ کد خارجی، به‌طور هم‌زمان و متناوب در یک بازه ۳ ثانیه‌ای تغییر می‌کنند.

* پارامتر begin و dur: مشخص‌کننده زمان شروع و طول مدت اجرای انیمیشن هستند. نکته جالب این است که مقدار begin می‌تواند به پایان انیمیشن دیگری وابسته باشد. برای مثال begin="anim1.end + 0.5s" باعث می‌شود انیمیشن دوم نیم ثانیه پس از پایان انیمیشن اول شروع شود.
* ویژگی keyTimes و keySplines: با استفاده از این ویژگی‌ها می‌توانید سرعت انیمیشن را در فریم‌های مختلف کنترل کرده و منحنی‌های شتاب (Easing Curves مانند Ease-in-out) ایجاد کنید.
* ویژگی calcMode="spline": این مد پردازشی به مرورگر اعلام می‌کند که زمان‌بندی انیمیشن بر اساس منحنی‌های Bezier تنظیم شده است.

`xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
<rect x="20" y="80" width="40" height="40" fill="#2ecc71" opacity="0">
<!-- مرحله ۱: ظاهر شدن -->
<animate id="fadeIn" attributeName="opacity" to="1" dur="1s" begin="0s" fill="freeze" />

<!-- مرحله ۲: حرکت روی مسیر پس از ظاهر شدن -->
<animateTransform id="moveRight" attributeName="transform" type="translate"
from="0 0" to="200 0" dur="2s" begin="fadeIn.end" fill="freeze" />

<!-- مرحله ۳: چرخش ۳۶۰ درجه پس از اتمام حرکت -->
<animateTransform attributeName="transform" type="rotate"
from="0 220 100" to="360 220 100" dur="1.5s"
begin="moveRight.end" repeatCount="indefinite" />
</rect>
</svg>
`

استفاده از قابلیت fill="freeze"` باعث می‌شود عنصر پس از اتمام انیمیشن در حالت پایانی خود باقی بماند. این سطح از کنترل بر زمان‌بندی، SMIL را به گزینه‌ای ایده‌آل برای ساخت آیکون‌های متحرک، لوگوهای زنده و بنرهای تبلیغاتی بسیار سبک تبدیل کرده است که به راحتی در قالب یک فایل تصویری ساده قابل اشتراک‌گذاری و استفاده در تمام بخش‌های وب‌سایت هستند.