اخیراً یک کار جالب آمد، تغییر SVG سفارشی، به پروژه Webflow برای انیمیشن. فکر کردم چیز مهمی نیست، Figma را باز کردم، سورس کد SVG را گرفتم، آن را انداختم و .... 😔 درست نشد با تحقیق در مورد مشکل، مشخص شد که کتابخانه ای که SVG را متحرک می کند، مستقیماً با عناصر در همان SVG کار می کند. خوب دوباره مشکلی نیست من فکر کردم :)، بیایید فقط نام همه لایه ها را به Rect تغییر دهیم و خوشحال خواهیم شد. rect با تغییر نام، من به کد منبع SVG نگاه کردم و نمی بینم :( rect بعد، خیلی راحت‌تر روی صندلی‌ام نشستم و کارآمدتر شروع به تحقیق کردم. معلوم شد که برای درک SVG عناصری را که می‌خواهیم به‌عنوان متحرک کنیم، باید آنها را ترسیم کنیم... درام رول - از طریق فریم‌ها. recr شروع به آزمایش کرد و همه چیز کار می کند. اما حالا یک مشکل دیگر وجود دارد: چگونه این فرآیند را خودکار کنیم؟ ما در حال حاضر تصاویر کشیده زیادی داریم و نمی خواهیم آنها را دوباره انجام دهیم. خوب، از آنجایی که ما در Frames کار می کنیم، راهی برای خروج پیدا کرده ایم، باید ایجاد کنیم که همه عناصر را در فریم ها بپیچد. افزونه ای کد منبع افزونه: const selectedNodes = figma.currentPage.selection; if (selectedNodes.length === 0) { figma.notify("Please select at least one layer."); } else { selectedNodes.forEach(node => { const frame = figma.createFrame(); frame.resize(node.width, node.height); frame.x = node.x; frame.y = node.y; frame.appendChild(node); node.x = 0; node.y = 0; }); figma.notify("All selected layers are wrapped in frames!"); } figma.closePlugin(); یا پروژه را در دانلود کنید :-) GitHub نتیجه: 30 دقیقه کد و تمام انیمیشن ها کار می کنند، کار برای آینده انجام شده است. نتیجه گیری: اگر نمی توانید کارهای جالبی پیدا کنید، آنها خودشان شما را پیدا خواهند کرد. همه چیز را خودکار کنید :)
