流体シェイプの影響もあってか、SVGでアニメーションを表示しているサイトが増えましたね。
国内サイトではまだあまり見かけませんが、海外サイトでは最近多くなったような気がします。
このSVGアニメーション、見た通りなんですが凝ったアニメーションを作ろうとすると普通に難しいです。というか、何から始めればいいの？って感じだと思います。
そこで今回は、そんなSVGアニメーションを簡単に作れるSVGatorというツールを紹介したいと思います。
SVGatorとは？
SVGatorはコードを書かずにブラウザ上でSVGアニメーションを作る海外製のツールで、初回7日間は無料、その後は有料です。
動画作成のような操作方法で若干クセはあるものの、SVGアニメーションを作るツールとしてはおそらくトップクラスに使いやすいはずです。
（というか、他のツールあります？って感じです。何かおすすめあったら教えてください！）
必要なもの
SVGatorを使う上で必要なものはSVGファイルのみです。
ただ、1枚のイラストからAIを駆使して勝手にアニメーションを作る…みたいなツールではなく、アニメーションさせたいパーツをすべて用意しなければいけません。
表情を変えるとか、足を動かすとか、さらにアニメーションさせるには「目」や「足」なども別々のレイヤーにしなければいけませんが、あまりにも複雑になるとSVGファイルが重くなりますし、ブラウザにも不可がかかるので臨機応変に。
ちなみに、SVGファイルはaiファイルと同じ「ベクターデータ」なので、イラストレーターで作成・編集するのが一般的だと思います。書き出し形式にsvgを指定するだけでaiファイルの扱いと変わりありません。
つまり、これから作るものは別として、何らかのイラストや写真からSVGファイルを作るにはイラストレーターでのトレースが必要だということですね。
イラストレーターでのトレースについてはこちらの記事が詳しいです。
使い方（作成手順）
ではSVGファイルがあるという前提で進めていきます…と、その前に。
けっこう重要なことなので先にお伝えしておきますが、実は、SVGatorは途中で素材を追加することができません。
例えば僕の場合、途中で雲のアニメーションを追加しようと思ったんですができなくて、諦めて元のSVGファイルを編集して再度アニメーションを作りました。
複雑化してしまうと時間がかかってしまうのでご注意ください。
さて、では実際にアニメーションを作っていきましょう。
SVGatorのサイトにアクセスしてアカウントを作り、SVGファイルを読み込むと以下のような画面になります。
ここでは例として、手裏剣を投げるアニメーションを作ってみましょう。
まず、1番必要なのは「手裏剣の移動」ですよね。
この動きはかなり簡単で「動かしたい地点（座標）」と「到達時間」だけ決めればOKです。
動かしたい対象（レイヤー）のプラスボタンをクリックすると下にアニメーション設定画面に素材が追加されます。
次に、座標情報を変更するための設定項目「Position」を追加します。
初期状態では動きはないので、0sの時点の座標情報を「0,0」にします。
x座標（横）、y座標（縦）ともに変わりませんよということですね。
この「ひし形」のオブジェクトがアニメーション情報を記録していて、削除するには右クリックからのdelete、移動はドラッグアンドドロップです。
次に、到達するタイミングと到達地点の座標情報を追加します。
横の動きは左側のx座標の数値を変更。左ならマイナス、右ならプラスです。
縦の動きは右側のy座標の数値を変更。下ならマイナス、上ならプラスです。
今回は例として到達するタイミングに15fを、左側に動かすためにx座標に-200の数値を入力しました。y座標は0なので縦の動きはありません。
ここまでの作業で以下のようなアニメーションが完成します。
手裏剣が左に飛んでいきましたね（笑）
他のアニメーションもこれと同じように設定していくだけです。
以下がその一例です。
| アニメーション | 設定方法 |
| 飛んでいった手裏剣が元に戻ってくる | もう少し先のタイミングで開始地点の座標（Position）を追加する |
| 消える | 「Opacity」を開始地点は100にして、消したいタイミングで0にする |
| 大きくする（または小さくする） | 開始地点と後で「Scale」を変える |
| 回転させる | 開始地点と後で「Rotate」を変える |
色々な動きを組み合わせると以下のようなアニメーションになります。なかなか良い感じですね。
出力
出力は画面上部の「Export SVG」から。
後はこれをサイトで読み込めばOKです。
SVGの良さを活かすならインラインで読み込むのがいいですね。
SVGatorでキャンバスサイズを変えた場合
ハマりポイントだと思うので補足です。
SVGatorでキャンバスサイズを変えてアニメーションを作った場合、出力したファイルにキャンバスサイズが反映されていないため見切れてしまいます。
その場合、SVGファイルをテキストエディター（コードエディター）で開き、svgタグのviewbox属性の値を変更します。
viewbox="x座標,y座標,width（幅）,height（高さ）"といった順番になっているので、widthとheightにはそれぞれキャンバスサイズの幅と高さの値を、x座標とy座標は作ったアニメーションに応じてそれぞれ変更します。（表示を確かめながらやればOKです）
また、このようにwidth属性とheight属性も併せて追加すると良いかもしれないですね。
<svg viewbox="0,0,1000,600" width="100%" height="100%">
（以下略）アニメーション終了後に静止させる
デフォルトだとアニメーションが変な終わり方をする時があるので、アニメーション終了後に静止させたい場合はanimation-fill-modeの値を置換する必要があります。
僕が作ったSVGファイルの場合、ここの値をbackwardsからforwardsに変更したところ上手く動作しました。
こんな感じですね。
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
以上、SVGatorの使い方でした！けっこう便利なので良かったらどうぞ。
