Yaqinda maxsus SVG-ni animatsiya uchun Webflow loyihasiga o'zgartiruvchi qiziqarli vazifa keldi. Men buni katta ish emas deb o'yladim, Figma ochdim, SVG ning manba kodini oldim, uni tashladim va .... 😔 ishlamadi Muammoni o'rganar ekanmiz, SVG-ni jonlantiruvchi kutubxona to'g'ridan-to'g'ri bir xil SVG ichidagi elementlar bilan ishlashi ma'lum bo'ldi. Yana muammo yo'q deb o'yladim :), keling, barcha qatlamlarning nomini Rect deb o'zgartiraylik va biz xursand bo'lamiz. rect Nomi o'zgartirildi, men SVG manba kodiga qaradim va ko'rmadim :( rect Keyin stulga ancha qulayroq o'tirdim va samaraliroq tadqiqot qila boshladim. Ma'lum bo'lishicha, SVG uchun biz sifatida jonlantirmoqchi bo'lgan elementlarni tushunish uchun biz ularni chizishimiz kerak.... drum roll - Frames orqali. recr Sinov boshlandi va hamma narsa ishlaydi. Ammo endi yana bir muammo bor: Ushbu jarayonni qanday avtomatlashtirish mumkin? Bizda allaqachon ko'plab chizilgan rasmlar mavjud va biz ularni qayta tiklashni xohlamaymiz. Xo'sh, biz Framelarda ishlayotganimiz sababli, biz chiqish yo'lini topdik, barcha elementlarni ramkalarga o'rab oladigan yaratishimiz kerak. plaginni Plaginning manba kodi: 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(); yoki -da loyihani yuklab oling :-) GitHub Natija: 30 daqiqalik kod va barcha animatsiyalar ishlaydi, kelajak uchun ish bajariladi. Xulosa: agar siz qiziqarli vazifalarni topa olmasangiz, ular sizni o'zlari topadilar. Hamma narsani avtomatlashtiring :)
