SVGatorでSVGアニメーションを作成する方法

流体シェイプの影響もあってか、SVGでアニメーションを表示しているサイトが増えましたね。

国内サイトではまだあまり見かけませんが、海外サイトでは最近多くなったような気がします。

このSVGアニメーション、見た通りなんですが凝ったアニメーションを作ろうとすると普通に難しいです。というか、何から始めればいいの?って感じだと思います。

そこで今回は、そんなSVGアニメーションを簡単に作れるSVGatorというツールを紹介したいと思います。

SVGatorとは?

SVGatorはコードを書かずにブラウザ上でSVGアニメーションを作る海外製のツールで、初回7日間は無料、その後は有料です。

動画作成のような操作方法で若干クセはあるものの、SVGアニメーションを作るツールとしてはおそらくトップクラスに使いやすいはずです。

(というか、他のツールあります?って感じです。何かおすすめあったら教えてください!)

必要なもの

SVGatorを使う上で必要なものはSVGファイルのみです。

ただ、1枚のイラストからAIを駆使して勝手にアニメーションを作る…みたいなツールではなく、アニメーションさせたいパーツをすべて用意しなければいけません。

例えば、先日公開したポートフォリオサイト「Shinobi Works」のトップ画面(とアバウトページ)で表示されているSVGアニメーション。

  1. 雲があって
  2. その雲がなくなって
  3. マスコットキャラクターの「忍びネコ」が現れて
  4. 走って
  5. ジャンプして
  6. 手裏剣を投げる

の一連のアニメーションをさせるために、「雲」と「忍びネコ」と「手裏剣」がそれぞれ別のレイヤーになっています。

表情を変えるとか、足を動かすとか、さらにアニメーションさせるには「目」や「足」なども別々のレイヤーにしなければいけませんが、あまりにも複雑になるとSVGファイルが重くなりますし、ブラウザにも不可がかかるので臨機応変に。

ちなみに、SVGファイルはaiファイルと同じ「ベクターデータ」なので、イラストレーターで作成・編集するのが一般的だと思います。書き出し形式にsvgを指定するだけでaiファイルの扱いと変わりありません。

つまり、これから作るものは別として、何らかのイラストや写真からSVGファイルを作るにはイラストレーターでのトレースが必要だということですね。

イラストレーターでのトレースについては以下の記事で詳しく紹介しているので、参考までにどうぞ。

JPEGやPNGの画像をai形式に変換する方法は?無料でできる? イラストの仕事でお金を稼いだ妻。 実は、その裏側ではこんなことがありました。 ねえ、相手の方からJPEGの他にai形式のファイルが欲しいって言わ… 続きを見る MORIAWASE 2

使い方(作成手順)

ではSVGファイルがあるという前提で進めていきます…と、その前に。

けっこう重要なことなので先にお伝えしておきますが、実は、SVGatorは途中で素材を追加することができません

例えば僕の場合、途中で雲のアニメーションを追加しようと思ったんですができなくて、諦めて元のSVGファイルを編集して再度アニメーションを作りました。

複雑化してしまうと時間がかかってしまうのでご注意ください。

さて、では実際にアニメーションを作っていきましょう。

SVGatorのサイトにアクセスしてアカウントを作り、SVGファイルを読み込むと以下のような画面になります。

SVGatorの編集画面
SVGatorの編集画面

ここでは例として、手裏剣を投げるアニメーションを作ってみましょう。

まず、1番必要なのは「手裏剣の移動」ですよね。

この動きはかなり簡単で「動かしたい地点(座標)」と「到達時間」だけ決めればOKです。

動かしたい対象(レイヤー)のプラスボタンをクリックすると下にアニメーション設定画面に素材が追加されます。

アニメーションさせる素材を追加
アニメーションさせる素材を追加

次に、座標情報を変更するための設定項目「Position」を追加します。

座標の設定項目「Position」を追加する
座標の設定項目「Position」を追加する

初期状態では動きはないので、0sの時点の座標情報を「0,0」にします。

アニメーション開始直後の座標情報を追加
x座標、y座標ともに0

x座標(横)、y座標(縦)ともに変わりませんよということですね。

この「ひし形」のオブジェクトがアニメーション情報を記録していて、削除するには右クリックからのdelete、移動はドラッグアンドドロップです。

次に、到達するタイミングと到達地点の座標情報を追加します。

横の動きは左側のx座標の数値を変更。左ならマイナス、右ならプラスです。

縦の動きは右側のy座標の数値を変更。下ならマイナス、上ならプラスです。

今回は例として到達するタイミングに15fを、左側に動かすためにx座標に-200の数値を入力しました。y座標は0なので縦の動きはありません。

到達するタイミングと到達地点の座標情報を追加
x座標が-200、y座標が0

ここまでの作業で以下のようなアニメーションが完成します。

手裏剣が左に飛んでいきましたね(笑)

他のアニメーションもこれと同じように設定していくだけです。

以下がその一例です。

アニメーション設定方法
飛んでいった手裏剣が元に戻ってくるもう少し先のタイミングで開始地点の座標(Position)を追加する
消える「Opacity」を開始地点は100にして、消したいタイミングで0にする
大きくする(または小さくする)開始地点と後で「Scale」を変える
回転させる開始地点と後で「Rotate」を変える

色々な動きを組み合わせると以下のようなアニメーションになります。なかなか良い感じですね。

出力

出力は画面上部の「Export SVG」から。

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;

animation-fill-mode CSS の animation-fill-mode プロパティは、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。 developer.mozilla.org

以上、SVGatorの使い方でした!けっこう便利なので良かったらどうぞ。

この記事を書いた人:シェフ

このサイト「MORIAWASE」の運営者。ハウツー記事を中心に更新しています。お仕事のご依頼については「Shinobi Works」までどうぞ

最新情報をお届けします!