SVG Artistaを使用したSVGアニメーション作成

無断転載禁止 SVG Artistaを使用したSVGアニメーション作成

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

SVG Artista とは?

SVG Artista

SVG ARTISTA のWebサイトのキャプチャ
SVG Artista

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

さっそく使ってみます

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

prophetロゴが描画されていくGIFアニメーション

①SVGデータの用意

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

prophetのロゴ画像

<SVGデータ作成時の注意>

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

  1. 1. レイヤー名やグループ名は必ずつける
    レイヤー名やグループ名をつけておけば各要素のidとして書き出せるので、コードを直接編集する際に困らないです。全角ではなく必ず半角英数でつけるようにしてください。

    ◆Illustratorで作成する場合の注意
    全角のレイヤー名・グループ名ではSVG形式保存時にidを割り当ててくれません。

    ◆Figmaの場合で作成する場合の注意
    全角文字はエンティティ化されてしまいます。また、半角で指定しても、[エクスポート] パネルにある [エクスポートの詳細設定] から [“id”属性を含める] にチェックをいれないとidが付与されないので注意です。

  2. 2.レイヤー順序は動かしたいオブジェクトの順にしておく。
    SVG Artistaには描画ツールやタイムラインが存在しません。オブジェクトがアニメーションされる順番=レイヤー順序になっています。最下位のレイヤーから順番にアニメーションされるのでレイヤーの順序に注意して作成しましょう。

FigmaとIllustratorでのレイヤー順序の例

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

ブラウザでSVG Artistaにアクセスし、画面左上あたりの [OPEN SVG] または [PASTE MARKUP] をクリックします。

アップロードボタンの説明

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

③完成

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

SVGデータをアップロードした直後の画面

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

prophetロゴのGIFアニメーション

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

SVGアニメーションのコードを取得する[GET CODE
]ボタン

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

[GET CODE]ボタン押下後のコード取得画面

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

オプション

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

書き出しオプション

書き出しオプション

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

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

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

塗りと線の説明

STOROKE ANIMATION … 線のアニメーションを指定します。要素内にstroke属性が存在しないと設定できません。

※今回のロゴ画像では、薄紫色の線の部分が該当します。

STROKE ANIMATIONの説明

FILL ANIMATION … 塗りのアニメーションを指定します。要素内にfill属性が存在しないと設定できません。

※今回のロゴ画像では、濃い紫色の●と”prophet”の文字の部分が該当します。

FILL ANIMATIONの説明

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

参考サイト

SVG Artista – HOW TO