loading_logo

SVGアニメーションを驚くほど簡単に!インストール不要10秒で作成

スポンサーリンク

SVGアニメーション作ってますか?
サイトのローディング時なんかにちょっとオリジナルなローディングを設置するとそれだけで、印象がだいぶ違います。

それ以外にもUIをよりわかりやすく、直感的にする上で SVGアニメーションを用いることもあるでしょう。

でもSVGアニメーションを作るのって初心者にはちょっと難易度が高いですよね。

スポンサーリンク

SVGアニメーションを簡単に作れるツール

そんな時に使って見たいのが「SVG Arista

SVG Aristaの特徴

SVG AristaはCSSコードを使って、アップロードしたSVGファイルのstrokeとfillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロジェクトとして開発されたオンラインツールです。

SVG Aristaの特徴をざっと紹介しましょう。

  • オンラインツールなのでインストールはもちろん不要!
  • 登録も不要!もちろん無料!
  • 直感的に設定を操作できる
  • CSSのみ、Javascriptは使用しない
  • SVGグラデーションのアニメーションは不可。。

また、簡易的なSVGアニメーションの作成は可能ですが、高度なSVGアニメーションを作成することはできませんので、複雑なものを作成したい場合は別のツールを検討しましょう。

SVG Aristaの使い方

STEP.1  SVGファイルのアップロード

使い方はとってもシンプルです。
あらかじめ用意したSVGファイルを左上にあります「OPEN SVG」でアップロードしましょう。

すると下記のようにアップしたSVGがプレビューされます。

STEP.2 基本設定

次に左メニューから、下記を行います。

  1. SVGタグのクラス名
  2. 背景色の決定
  3. CSSでのアニメーションの書き方(TransionかAnimationを選択)

STEP.3 アニメーションの設定

続いて、「storoke」「fill」のアニメーション設定です。
下記の項目を設定し、細かい動きや長さを設定してください。

animation durationアニメーションの全体長さ
stagger step「storoke」「fill」タグ1つ1つのアニメーション速度
animation delayアニメーション開始時間
animation easingアニメーションのイージング処理(動き・性格)を設定
animation derectionアニメーション再生の向き

イージング処理の種類

イージング処理が実際にどのようなものになるのか、わかりやすいものを掲載します。参考までにどうぞ。

jQuery Easing Transition Types【jquery.easing.js】

DRAW または  ERASEの設定

右上にある「DRAW」をクリックすると、「ERASE」に変更されます。 「ERASE」にすることで逆再生の設定に変更されます。

STEP.4  コードを取得する

続いて右にある「GET CODE」をクリックしてください。
SVGタグとCSSが書き出されます。

書き出されたコードをあなたのサイトに設置して、実装しましょう。

Home - SVG Artista
SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain CSS code. It supports path, line, polyline, rect, circle, ...

今回お教えしたのは、あくまでSVGアニメーション初心者でも簡単に導入できるもの。
もう少しオリジナリティのある凝ったものを作りたい人は、こちらも一度読んでみてください!

COMMENT