こんなに簡単!? Vivus Instant

SVGアニメーションの紹介は以前にも行いましたが、

まだほかにももっと便利に、しかも簡単にSVGアニメーションを製作できる

ジェネレーターサイトを発見しましたので、ご紹介いたします。

Githubのサイトにはもっと詳細が載っているので是非。

STEP1.まずはSVGファイルを用意しよう

前回と同じですが、まずはSVGファイルがないと始まりませんので、

SVGのイラストを用意しましょう。

今回はこのような食器カトラリーのイラストを用意しました。

このようなイラストであれば、飲食店などのサイト制作で

ちょっとした手間でサイトのディティールをアップできるのでおすすめ！

STEP2.Vivus Instantにアクセス

Vivus Instantのサイトにアクセスしましょう。

STEP1で用意したSVGファイルをサイトの右のドロップゾーンにドラッグしましょう。

イラストのカラーは基本的にSVGに依存するようなので、

もし白系統のイラストであれば、左上にある「SWITCH TO DARK MODE」で背景を黒くできます。

STEP3.今度は左側の設定の項目をチェック

ここの設定で細かくSVGの動きを設定できます。

「AUTO START」「MANUAL」の2つがあり、

前者だとSVGアニメーションが自動で始まり、

後者だと手動で設定することができます。

「delay」は遅延を意味しますので、ここで線の遅延を設定できます。

「duration」は期間を意味し、ここで設定した時間の中で、

「delay」の値で遅延が発生します。

「syncronous」は、全ての線が同時に終わる設定で、

「one by one」は線が1つずつ始まり、終わる設定です。

前回紹介した1本書きに近い設定ですね。

このほかにも線の抜きと入りの設定は「Ease」があります。

これを設定することで、線の描画がそっと始まり、そっと終わるというような

設定が簡単にできるので、ちょっと動きが加えられます。

STEP4.設定が終わったら「UPDATE」で反映しよう

上記STEP1〜3の手順のみでSVGアニメーションが簡単に実現するので

無料でアニメーションを加えたい場合はとても便利ですね。

あとは設定が完了したSVGをダウンロードするだけで

サイトで使用するコードに変換されますので、

ご所持のサイトにコードを加えるだけです。

前回ご紹介したサービスよりも設定が細かくできますので、

こちら使用すればまた違ったアニメーションができるので、是非いかがでしょうか。