最近、カスタム 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 分のコードとすべてのアニメーションが機能し、将来の作業が完了しました。 結論： 興味深いタスクが見つからない場合は、タスクがあなたを見つけます。すべてを自動化しましょう :)
