Неодамна дојде една интересна задача, менување на прилагодениот SVG, во проект за Webflow за анимацијата. Мислев дека не е ништо страшно, отворив Figma, го зедов изворниот код на SVG, го фрлив и .... 😔 не функционираше Истражувајќи го проблемот, се покажа дека библиотеката што го анимира SVG работи директно со елементи во истиот SVG. Па повторно нема проблем си помислив :), ајде само да ги преименуваме сите слоеви во Rect и ќе бидеме среќни. rect Преименувано, го погледнав изворниот код на SVG и не го гледам :( rect Потоа, седнав многу поудобно на столот и почнав поефикасно да истражувам. Се испостави дека за SVG да ги разбере елементите што сакаме да ги анимираме како треба да ги нацртаме... тапан ролна - преку Рамки. recr Започна со тестирање, и сè работи. Но, сега има друг проблем: Како да се автоматизира овој процес? Веќе имаме многу исцртани илустрации и не сакаме повторно да ги правиме. Па, бидејќи работиме во Рамки, најдовме излез, треба да создадеме кој ќе ги завитка сите елементи во рамки. додаток Изворниот код на приклучокот: 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 минути код и сите анимации работат, работата за иднината е завршена. Заклучок: ако не можете да најдете интересни задачи, тие самите ќе ве најдат. Автоматизирајте сè :)
