میدانیم که بهطور پیشفرض هر چیزی در وب یک جعبه است، اما انیمیشنهای بسیاری را میبینید که وانمود میکنند دایره هستند. اما اگر تا به حال یک دایره واقعی را دیده باشید، میدانید که آنها ویژگیهای بسیار بیشتری دارند. دایرهها که در SVG قرار میگیرند، در طیف وسیعتری از مخاطبان نسبت به یک
تگ آنقدر هم که از نامش پیداست ایستا نیست. هر جاوااسکریپت تعبیهشدهای متأسفانه اگر فایل SVG را با تگ بارگذاری کنید اجرا نمیشود، اما انیمیشنهای CSS کاملاً خوب کار میکنند. بسیاری از ویژگیهای SVG دارای معادلهای ویژگی CSS هستند و ویژگیهای هندسی از سال 2024 در مرورگرهای اصلی پشتیبانی میشوند. برخی از ویژگیهایی که ممکن است بخواهید آنها را متحرک کنید، مانند viewBox، هنوز معادل ندارند.
علاوه طاووس موزیک بر جاوااسکریپت و CSS، راه دیگری برای متحرکسازی SVGها وجود دارد: زبان یکپارچهسازی چندرسانهای همگامسازیشده (SMIL). با وجود پیچیدگیهایش، هنوز هم ارزش یادگیری دارد. مانند انیمیشنهای CSS، انیمیشنهای SMIL نیز در تگهای کار میکنند و میتوانند همه چیز را در یک SVG، بدون جاوااسکریپت، به طور کامل متحرک کنند.
اگر تا به حال چیزی در مورد SMIL نشنیدهاید یا نیاز به یادآوری دارید، مقاله خوب اندی کلارک را بررسی کنید. سپس به روشی برای برنامهریزی یک انیمیشن و مدیریت بهتر کدهای SMIL خواهیم پرداخت.
جداسازی
SMIL یک مشکل دارد: به سرعت حجیم میشود. برخلاف CSS و جاوااسکریپت، که در آنها میتوانید چندین ویژگی را در هر فریم کلیدی فهرست کنید و انیمیشنها را به راحتی دوباره استفاده کنید، هر تگ SMIL فقط میتواند یک عنصر و فقط یک ویژگی از آن عنصر را در یک زمان هدف قرار دهد. یک ویژگی را میتوان از طریق لیستی از مقادیر متحرک کرد. اما همچنان یک تگ، یک عنصر، یک ویژگی است. کوتاهترین راهی که میتوانید یک تغییر رنگ و شفافیت را بنویسید که اجرا شود به شرح زیر است:
این بد نیست، اما در نظر بگیرید که باید برای هر عنصر موجود در انیمیشن تکرار شود. یک انیمیشن SMIL میتواند به سرعت طولانیتر از معادل CSS خود شود.
برای آسانتر کردن کار هنگام شروع یک انیمیشن جدید، بیایید تمام عناصر و ویژگیهایی را که میخواهیم متحرک کنیم برنامهریزی کرده و لیستی از شناسههای توصیفی برای هر تگ ایجاد کنیم.
نمودار زمان و مکان انیمیشن
من دوست دارم انیمیشنهایم را با استفاده از چیزی به نام نمودار زمانبندی برنامهریزی کنم. نمودار زمانبندی در واقع یک پارهخط است؛ برخی خطوط افقی را انتخاب میکنند، برخی دیگر عمودی را ترجیح میدهند، که این یک قیاس عالی برای انیمیشن به طور کلی است زیرا پارهخطها میتوانند به صورت موازی، همپوشانی و دنبال کردن یکدیگر با یا بدون فاصله اجرا شوند. درست مانند انیمیشنها.
در حال حاضر، ما فقط به زمان شروع و توقف انیمیشنها علاقهمندیم. هنگام ترسیم نمودارهایمان، خطوط میانی را فراموش میکنیم و در عوض برای هر انیمیشن جزء، یک خط میکشیم و شروع و پایان را مشخص میکنیم. من دوست دارم زمانبندی را با یک دایره و یک نوار نشان دهم. میتوانید نمودار خود را با هر چیزی ترسیم کنید و لازم نیست دقیقاً مقیاسبندی شده باشد، تا زمانی که زمانبندی نسبی بین تمام انیمیشنهای کوچکی که کل را تشکیل میدهند، واضح باشد. علاوه بر این، اضافه کردن برچسب برای مدت زمانها یک تقلب آسان برای دور زدن ترسیم مقیاسبندی شده است.
در اینجا یک نمونه از نحوه تنظیم یک نمودار زمانبندی با بیش از یک انیمیشن آورده شده است:
نکته مهم این است که خطوط نمودار زمانبندی بر اساس نحوه ترتیب انیمیشنها در زمان مرتب شدهاند. یک قسمت از انیمیشن به دنبال قسمت بعدی است، که به دنبال آن یک قسمت بعدی میآید و به همین ترتیب. این نشان میدهد که چگونه قسمتهای انیمیشن با هم اجرا میشوند و در طول زمان به صورت آبشاری عمل میکنند.
SMIL همگامسازی شده
بخش بزرگی از SMIL همگامسازی است. به هر حال، حتی در نامش هم هست. و راههای متعددی برای تعیین زمان شروع یک انیمیشن وجود دارد (در اینجا یک مورد آزمایشی برای بررسی آنچه مرورگر شما پشتیبانی میکند آورده شده است). یکی از مفیدترین راهها استفاده از مقدار syncbase است، که شناسه یک تگ SMIL است و به دنبال آن .begin یا .end میآید، با یک افست مثبت یا منفی اختیاری.
بیایید از مثال انیمیشن قبلی که شامل تغییرات رنگ و شفافیت است، استفاده کنیم. اگر میخواهیم انیمیشن شفافیت 300 میلیثانیه قبل از پایان انیمیشن رنگ شروع شود، میتوانیم محاسبات را انجام دهیم. متناوباً، انیمیشن دوم میتواند از مقدار syncbase colorChange.end – 300ms استفاده کند. به این ترتیب، زمانبندی نسبی بین دو انیمیشن صریح میشود.
با استفاده از مقادیر syncbase، شروع یک انیمیشن در زمان نسبت به .begin یا .end یک انیمیشن دیگر قرار میگیرد. یک افست مثبت شروع را به سمت راست (به جلو در زمان) و یک افست منفی به سمت چپ (به عقب در زمان) حرکت میدهد.
نکتهای در مورد افستهای منفی این است که آنها میتوانند زمانی را قبل از بارگذاری سند یا زمانی که یک کلیک اتفاق میافتد، مشخص کنند. کامپیوترها نمیتوانند آینده را پیشبینی کنند (حداقل هنوز). بهترین کاری که میتوانند انجام دهند این است که انیمیشن را به جایی که اگر کامپیوتر به آینده نگاه میکرد تا انیمیشن را به صورت پیشگیرانه شروع کند، پرش دهند. انیمیشن دوم فقط در صورتی از ابتدا تا انتها اجرا میشود که به اصطلاح فضای کافی وجود داشته باشد.