Наскоро се появи интересна задача, промяна на персонализиран SVG в проект на Webflow за анимацията. Мислех, че не е голяма работа, отворих Figma, взех изходния код на SVG, хвърлих го и .... 😔 не проработи Проучвайки проблема, се оказа, че библиотеката, която анимира SVG, работи директно с елементи в същия SVG. Ами пак няма проблем, помислих :), нека просто преименуваме всички слоеве на Rect и ще бъдем доволни. rect Преименувано, погледнах изходния код на SVG и не виждам :( rect След това седнах много по-удобно на стола си и започнах да проучвам по-ефективно. Оказа се, че за да разбере SVG елементите, които искаме да анимираме като трябва да ги начертаем... drum roll - чрез Frames. 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 минути код и всички анимации работят, работата за бъдещето е свършена. Заключение: ако не можете да намерите интересни задачи, те сами ще ви намерят. Автоматизирайте всичко :)
