こんにちは、ひぐまです。
今回はSVGのイラストにコードレスでアニメーションを付けることができるSVG アニメーションジェネレーター、SVGatorのご紹介です。
コードなしで、直感的な操作でイラストへアニメーションを付けることができ、有料版ではかなり高度なアニメーションをつけることが可能です。
今回は制限付きの無料版でちょっとしたSVGアニメーションを作ってみたので、やり方を備忘録として残しておきます。
イラストをつくる
まず、イラストレーターなど、SVGを書き出せるソフトを立ち上げて、動かすイラストの元をパスで描いていきます。
ここで注意するポイントですが、例えば生き物の手足の関節など、上下で動きを分けたいものはイラストの段階で結合してしまわず、分けた状態で作成してください。
また、SVGatorでは途中から素材を追加しての調整はできないため、予め必要なパーツは同じデータ内へ入れておきます。
動かしたいイラストが完成したら、SVGの形式で書き出しましょう。
今回私はこちらのイラストを使って、ふわふわとパーツが浮き沈みするモーションを付けてみます。 
イラストにアニメーションをつける
早速、SVGatorを立ち上げます。
https://app.svgator.com/auth/login#/
会員登録が必要なので画面右のCreate accountから、アカウントを作成します。
ログイン後3つほど作成済みのサンプルが表示された画面に偏移するので、[Newproject]をクリックして新しく作業画面を作成します。
作業画面がでたら、下記の赤枠のボタン[Upload SVG]を押してSVGファイルをアップロードします。
アップできたら、個々にアニメーションの設定を加えていきましょう。
動かしたいパーツをドラッグで選択、右クリックメニューから「group」を選んでグループ化し、選択します。(左側にレイヤーの詳細がズラッとリスト化されているので、すでにグループの場合はグループを選択します。
選択した状態のまま、左下の[animate]をクリックすると、アニメーションの種類が表示されるので付与したいものを選択します。
注意として、例えば位置移動と回転を一気に一緒に設定はできませんので、とりあえず位置移動から...そのあとで回転のアニメーションも別で追加...の流れになります。 
黄色い★マークのものは有料版でしか使用できないので注意。
①のバーを動かして、アニメーションのコマを生成していきます。0秒の状態をまず作るために②の真横のひし形の+マークをクリックします。
0秒段階は特に動きがないと思うので次に状態を変化させたい秒数へ①のバーをもっていき、またひし形の+マークをクリック。ひし形とひし形がつながります。
2番目のひし形を選択して、イラストのパーツを動かします。
さっきのように感覚で移動させてもいいですが、右側のメニューで数値を調整することもできます。 
動作はひし形の選択をしてコピー、ペーストなどできるので有効に使ってくださいね。下記は右クリックメニューでできるものです。
動きは成り行きを補完してくれるので、単純な動作であれば細かくこちらで設定する必要はありません。
アニメーションができたら、再生ボタンで確認して、OKであれば書き出しをします。
①ページ右上の下記画像のExportボタンを押します。
②書き出し形式を聞かれるのでSVGをクリック。GIFでも書き出しできますよー。
③詳細画面がでるので設定をします。アニメーションを永遠に繰り返したい場合はinfinityを、数回分の場合はcountを選びます。数字で出ているように無料会員の場合は3回まで書き出しが可能なので、よくよく確認したうえで書き出してくださいね。(これは翌月になれば復活します！)
できたアニメーションは下記のデモで確認できます～！
プレミアムだともっといろいろな動きがつけれますよ～シェイプの形状をうねうね動かしたり色替えしたり...etc
公式のHow to動画(英語)もあります。SVGatorで高度なアニメーションを知りたい！作りたい！という方は是非チェックしてくださいね。
https://www.svgator.com/tutorials
