Niedawno pojawiło się ciekawe zadanie: zmiana niestandardowego pliku SVG na projekt Webflow w celu animacji. Pomyślałem, że to nic wielkiego, otworzyłem Figmę, wziąłem kod źródłowy SVG, wrzuciłem go i... 😔 nie działa Badając problem, okazało się, że biblioteka, która animuje SVG, działa bezpośrednio z elementami wewnątrz tego samego SVG. Cóż, znowu nie ma problemu, pomyślałem :), po prostu zmieńmy nazwy wszystkich warstw na Rect i będziemy szczęśliwi. rect Zmieniono nazwę. Spojrzałem na kod źródłowy SVG i nie widzę :( rect Następnie usiadłem o wiele wygodniej na swoim krześle i zacząłem efektywniej prowadzić badania. Okazało się, że aby SVG mógł zrozumieć elementy, które chcemy animować jako musimy je narysować... werble - za pomocą klatek. recr Rozpocząłem testy i wszystko działa. Ale teraz pojawił się kolejny problem: Jak zautomatyzować ten proces? Mamy już sporo rysunków i nie chcemy ich przerabiać. No cóż, skoro pracujemy w ramkach, znaleźliśmy rozwiązanie. Musimy stworzyć , która otoczy wszystkie elementy ramkami. wtyczkę Kod źródłowy wtyczki: 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(); lub pobierz projekt na :-) GitHub Wynik: 30 minut kodu i wszystkie animacje gotowe, praca nad przyszłością skończona. Wniosek: jeśli nie znajdziesz interesujących zadań, oni sami cię znajdą. Automatyzuj wszystko :)
