‏SVG Studio: انیمیشن SVG توی مرورگر

این صفحه ابزاری به اسم SVG Studio رو معرفی می‌کنه؛ یه ادیتور انیمیشن که کاملاً تو مرورگر اجرا می‌شه و SVGهای ثابت رو به انیمیشن‌های کی‌فریمی نرم تبدیل می‌کنه. ادعای اصلیش اینه که برای انیمیت کردن SVG دیگه لازم نیست سراغ اشتراک After Effects بری و همه‌چی توی یه تب مرورگر انجام می‌شه.

هستهٔ کار یه تایم‌لاین با ترک جدا برای هر پراپرتیه. به گفتهٔ سازنده، می‌تونی موقعیت (Position)، چرخش (Rotation)، اندازه (Scale) و شفافیت (Opacity) رو مستقل و برای هر لایه انیمیت کنی، کی‌فریم‌ها رو روی تایم‌لاین جابه‌جا کنی و برای هر ترک تابع easing (مثل Ease In/Out) و حالت loop (تعداد دلخواه یا بی‌نهایت) بذاری.

وقتی یه SVG رو روی canvas رها می‌کنی، به لایه‌های مجزای قابل‌انیمیت باز می‌شه و گروه‌های SVG هم به ساختار لایهٔ والد/فرزند تبدیل می‌شن که می‌شه جمعشون کرد، مخفیشون کرد یا ترتیبشون رو عوض کرد. یه حالت جالب هم Record mode هست: روشنش می‌کنی و هر دستکاری‌ای که مستقیم روی canvas انجام بدی، خودکار سر playhead یه کی‌فریم می‌ذاره.

نکتهٔ اصلی از نظر خروجیه: یه کلیک می‌زنی و یه فایل SVG مستقل بیرون میاد که انیمیشنش به‌صورت @keyframes ی CSS تو خود فایل embed شده. یعنی هیچ runtime و JavaScript ای نمی‌خواد و هر جایی که CSS اجرا بشه، انیمیت می‌شه. ساختار خروجی چیزی شبیه اینه:

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
#orbit-a {
  animation: orbit-spin 4s linear infinite;
  transform-origin: center;
}

ابزار کاملاً کیبورد-محوره و کلی شورتکات داره (مثل Space برای play/pause، K برای افزودن کی‌فریم و ⌘G برای گروه کردن لایه‌ها). تاریخچهٔ undo تا ۱۰۰ مرحله، زوم canvas از ۱۰٪ تا ۵۰۰٪ و طول انیمیشن از نیم ثانیه تا دهها هزار ثانیه هم از امکاناتشه.

نکات کلیدی:

• ادیتور انیمیشن SVG که کامل توی مرورگر اجرا می‌شه، رایگانه و اکانت نمی‌خواد
• موقعیت، چرخش، اندازه و شفافیت رو جداگانه برای هر لایه با تایم‌لاین و کی‌فریم انیمیت می‌کنی
• خروجی یه SVG مستقل با @keyframes ی CSS هست، بدون هیچ JavaScript یا runtime اضافه
• Record mode هر دستکاری روی canvas رو خودکار به کی‌فریم تبدیل می‌کنه