web-dev-qa-db-ja.com

SVGアニメーションをアニメーションGIFとして記録および保存する

[〜＃〜] svg [〜＃〜] アニメーションをアニメーションGIFとして記録および保存するためのライブラリまたはツールはありますか？

SVGジオメトリはJavaScriptと D3.js でアニメーション化され、その色と不透明度は CSS でアニメーション化されます。

csssvgd3.jsgifanimated-gif
24
Jisike

Gif記録機能を備えたスクリーンキャプチャプログラムを使用するだけで私のニーズはすべて満たされ、信頼性が高く、クリーンであることがわかりました。このような画面キャプチャプログラムがいくつかあります。 LICEcapは固体を見つけました。

上記の質問からの（ほぼ逐語的）私の手順は次のとおりです。

このソリューションでは、LICEcapと呼ばれるツールを使用しています。これは、WinおよびMac用の画面キャプチャユーティリティです。手順は次のとおりです。

  1. LICEcapをダウンロード ここ してインストールします。さて、このプログラムを開始すると、かなり変わった形になり、薄いフレームになり、フレーム内のすべてが透明になります。 enter image description here

  2. D3.jsアニメーションが表示されたウィンドウに移動し、アニメーションを開始できるようにすべてを準備します。 d3js.orgからこの例を記録したいとしましょう： enter image description here

  3. LICEcapを起動し、アニメーションgifで使用する領域に配置します。 enter image description here

  4. 左下の編集ボックスに少なくとも20 fpsを入力してください。そうしないと、録音の品質が低下します。プレスレコード。最初にダイアログが表示され、ここでgifを無限ループにするか、1回だけ繰り返すか、何度でも繰り返すかを選択します。また、興味深いオプションは、マウスクリックの視覚的な手掛かりを追加することです。ファイル名も選択し、[保存]を押します。 enter image description here

  5. これで、アニメーションをトリガーするために必要なことをすべて実行できます。グループ化とスタックのボタンを数回押しました。十分に決めた後、Stopを押しました。結果のファイルは次のとおりです。 enter image description here

それでおしまい！

26
VividD