SVGでアニメーションを簡単に作れるツールSVG Artista【プログラミング知識不要】

Web上で動くファイル形式GIFがありますが、ファイル形式SVGでもアニメーションを作成することができる便利ツールがあり、プレビューでアニメーションを確認しながら簡単にアニメーションを作成できるのでSVG画像を用意するだけ。

▪アニメーション参考例 ↓
Run Penをクリック&タップ

See the Pen Untitled by pull-design (@design90806871) on CodePen.

▪SVG Artista

https://svgartista.net/

サクッと作れるように簡単に解説していきます。

サイトの動作確認

サイトの右上にあるPLAYをクリックすることでデフォルトの動作を確認することができます。

＜/＞GET CODEをクリックでHTMLとCSSが自動で発行される仕組みです。

illustratorで作成

まずは、illustratorで1文字に対して1レイヤーを作っていきます。

ポイントは最初に表示させたい文字を下に配置すること。

SVG ArtistaのサイトにSVGをアップロードした時に下のレイヤーから順番に表示される仕組みになっているためです。

SVGに書き出し

レイヤーの配置が完了した後はSVGの書き出しをします。

ファイル→書き出し形式を選択。

ファイルの種類がSVGであることを確認して書き出しを選択。

※illustratorでSVGの書き出しが出来なかった場合はPNG～SVG変換サイトなどでSVGに変換しましょう。

▪ Convertion （画像変換サイト）

https://convertio.co/ja/image-converter/

SVGをアップロード

▪SVG Artistaのサイトに作成したSVGファイルをアップロードします。

https://svgartista.net/

OPEN SVGを選択。

作成したSVGファイルを選択して「開く」をクリック。

PLAYをクリックすることで文字が流れるアニメーションが完成しました。

動作に問題がなければGET CODEを選択してHTMLとCSSを出力します。

左側がHTMLで右側がCSSとなっています。HTMLコードコピーはCOPY SVGを選択、CSSコードコピーはCOPY TRANSITION CODEを選択でコピーできます。

後は、コピーしたコードを張り付けたら動作します。

▪参考例になります↓
Run Penをクリック＆タップ

See the Pen Untitled by pull-design (@design90806871) on CodePen.

Code Penの使い方は下記↓の記事で解説していきます。

Codepenの始め方と使い方-記事内にコード埋め込み【無料便利機能】無料会員で自由にコードが書ける「Codepen」ブラウザ上でHTML・CSS・JSのコーディングがプレビュー付きで利用できるサービスです。...