前回「SVGatorを使用したSVGアニメーション作成」という記事で、.svg形式で作成したキャライラストに対して歩行するアニメーションをつける方法をご紹介しました。
今回も懲りずにSVGアニメーション作成方法についてのご紹介ですが、前回のようにタイムラインや変形を使用して自由にアニメーションをつけるのではなく、SVGオブジェクトを線と塗りが徐々に描画されるアニメーションへ簡単に変換できる「SVG Artista」をご紹介します。
前回同様、プログラムやコードを書けなくても手軽に使えるアプリですのでぜひお試しください。

SVG Artista とは？

SVG Artista

SVG Artistaは、IllustratorやFigmaなどで作成したSVG形式のイラストやロゴをアップロードするだけで、線と塗りが徐々に描画されるアニメーションに変換することができる無料のオンラインツールです。

さっそく使ってみます

今回は弊社ロゴが描画されていくアニメーションを作ります。（※下記はGIFです）
Webサイトにアクセスした際のスプラッシュスクリーンやローディングのあしらいとして使われることが多いですね。

①SVGデータの用意

SVG Artistaには描画ツールなどは用意されていないため、IllustratorやFigmaなどであらかじめSVG形式のデータを作成しておく必要があります。本記事ではアニメーション用に編集した弊社ロゴを使用します。

＜SVGデータ作成時の注意＞

SVGデータはFigmaでもIllustratorでもお好みのアプリで作成してOKですが、どのアプリを使用する場合でも下記のように作ると後々の小さなイライラを回避できるのでやっておくとよいです。

1. 1. レイヤー名やグループ名は必ずつける
   レイヤー名やグループ名をつけておけば各要素のidとして書き出せるので、コードを直接編集する際に困らないです。全角ではなく必ず半角英数でつけるようにしてください。
   
   ◆Illustratorで作成する場合の注意
   全角のレイヤー名・グループ名ではSVG形式保存時にidを割り当ててくれません。
   
   ◆Figmaの場合で作成する場合の注意
   全角文字はエンティティ化されてしまいます。また、半角で指定しても、[エクスポート] パネルにある [エクスポートの詳細設定] から [“id”属性を含める] にチェックをいれないとidが付与されないので注意です。
   
   
2. 2.レイヤー順序は動かしたいオブジェクトの順にしておく。
   SVG Artistaには描画ツールやタイムラインが存在しません。オブジェクトがアニメーションされる順番＝レイヤー順序になっています。最下位のレイヤーから順番にアニメーションされるのでレイヤーの順序に注意して作成しましょう。

②SVGデータをSVG Artistaにアップロードする

OPEN SVG	.svg形式のファイルをアップロードします。コードを触るのが苦手な方はこちらがおすすめです。
PASTE MARKUP	SVGのコードを直接ペーストします。

③完成

アップロードが完了するやいなや、早々にアニメーションが生成＆再生されます。

アップした直後のアニメーションはこんな感じです。

これだけでぜんぜんOK！という場合は、このまま画面右上メニューにある [GET CODE] をクリックして

SVGコードとCSSコードを取得すれば完了です。

実際に取得したコードでの動きは下記となります。

オプション

各オプションの説明は下記のとおりです。

書き出しオプション

element class	各要素のclass名を指定
background color	背景色を指定
animation type	Transition … 各要素に「active」classが追加されたら再生される Animation … keyframeで書き出され、読み込み時に再生される

アニメーションのオプション

[STOROKE ANIMATION] と [FILL ANIMATION] の2つを設定できます。

animation durataion	アニメーションが完了するまでの再生時間を指定
stagger step	アニメーションの実行タイミングを指定
animation delay	アニメーションをいつ開始するかを指定
animation easing	easingの種類を指定
animation direction（STOROKE ANIMATIONのみ）	normal … 通常方向に再生 reverse … 逆方向に再生

参考サイト

SVG Artista – HOW TO