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 基本設定
次に左メニューから、下記を行います。
- SVGタグのクラス名
- 背景色の決定
- CSSでのアニメーションの書き方（TransionかAnimationを選択）
STEP.3 アニメーションの設定
続いて、「storoke」「fill」のアニメーション設定です。
下記の項目を設定し、細かい動きや長さを設定してください。
| animation duration | アニメーションの全体長さ |
|---|---|
| stagger step | 「storoke」「fill」タグ１つ１つのアニメーション速度 |
| animation delay | アニメーション開始時間 |
| animation easing | アニメーションのイージング処理（動き・性格）を設定 |
| animation derection | アニメーション再生の向き |
イージング処理の種類
イージング処理が実際にどのようなものになるのか、わかりやすいものを掲載します。参考までにどうぞ。
DRAW または ERASEの設定
右上にある「DRAW」をクリックすると、「ERASE」に変更されます。 「ERASE」にすることで逆再生の設定に変更されます。
STEP.4 コードを取得する
続いて右にある「GET CODE」をクリックしてください。
SVGタグとCSSが書き出されます。
書き出されたコードをあなたのサイトに設置して、実装しましょう。
今回お教えしたのは、あくまでSVGアニメーション初心者でも簡単に導入できるもの。
もう少しオリジナリティのある凝ったものを作りたい人は、こちらも一度読んでみてください！
COMMENT