SVG Artistaを使ってSVGアニメーションを実装する

SVGアニメーションのこと全然よくわからないけど作ってみたい！
と、検索したところ<a href="https://lab.sonicmoov.com/web-service/svg-artista/" target="_blank">こちらのページ</a>がヒットしました。

<a href="https://svgartista.net/" target="_blank">SVG Artista</a>というサービスを利用すると簡単にアニメーションが作成できるとのこと。
~~全体的に英語なのが辛いので備忘録として~~設定方法とつまずいた点、
実際に使用できそうかなど試したことを記載いたします。

#今回作るもの

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="af_nd" data-slug-hash="MWjWGBR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="MWjWGBR">
  <span>See the Pen <a href="https://codepen.io/af_nd/pen/MWjWGBR">
  MWjWGBR</a> by af_nd (<a href="https://codepen.io/af_nd">@af_nd</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

SVG Artistaで作成できるのは下記条件のアニメーションのようです。

* 実装方法はCSS ＝ **IE非対応**
* 線と塗りのアニメーションのみ

IEに対応する場合はJavascriptで実装する必要がありそうですね。
なお、各実装方法メリットデメリットは<a href="https://qiita.com/takeshisakuma/items/270bc3b7ace61f50ce48">こちらの記事</a>がわかりやすかったです！

###使用ツール
* Illustrater
* SVG Artista

今回ブラウザはChromeで作業しました。
各最新ブラウザで検証したところ、IE11以外なら表示に問題はなさそうです。
（IEはホワイトアウトしました…。）

#手順（1） SVGデータを用意
イラストレーターでベクター画像を作成します。
今回は手書きの文字を<a href="" terget="_blank">画像トレース</a>してます。

##SVGのコードを作成
SVG ArtistaでSVGを読み込むには下記の方法があります。

* 画像から読み込む方法
* コードから読み込む方法

今回は後者で進めます。
下記の手順でコードの書き出しをしました。

![il_select.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890505/b06e13fa-d9bd-b4dc-3819-b855bf68fe55.jpeg)
イラレ上で書き出したい画像を選択し、 `command+c` でコピー （windowsなら `ctrl+c` ）
![il_code.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890505/032661c1-0d3e-e512-2e2a-de6f0a8a1886.jpeg)
テキストエディタに `command+v` で貼り付け（windowsなら `ctrl+v` ）して、
赤枠の不要な記述を削除したら完成！

#手順（2） SVG Artistaでアニメーション付与
<a href="https://svgartista.net/" target="_blank">SVG Artista</a>にアクセスします。

##SVGファイル読み込み
![ani_past.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890505/9bc74b39-ee11-0a00-390d-3c851b9f51a3.jpeg)
**Past MarkUp** をクリックして、先ほど作成したコードを貼り付けます。

コードじゃなく画像ファイルから読み込む場合は、
**Open SVG**をクリック・画像をドラッグ＆ドロップで取り込み可能です。

##アニメーションをつける
![ani_option.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890505/367c9a58-a1db-d80f-44e5-9216738e9558.jpeg)
赤枠の箇所でアニメーションを調整していきます。
設定できるのは先に記述した下記2点です。

* STROKE ANIMATION（線のアニメーション）
* FILL ANIMATION（塗りのアニメーション）

なお、**SVGコード内の各pathタグに対し、上から順番にアニメーションが実行**されます。

以下各オプションです。
stagger step以外はCSSのアニメーションプロパティとほぼ一緒ですね！

|  | 各オプション詳細 |
|:--|:--|
| **animation duration** | 各pathタグのアニメーションにかける秒数 |
| **stagger step**  | 次のpathタグのアニメーションを開始するまでの秒数 |
| **animation delay**  | 線・塗りのアニメーション自体を開始するまでの秒数 |
| **animation easing**  | 各pathタグのアニメーションに対するタイミング・進行割合 |
| **animation direction**  | 線のアニメーションの方向（normalは時計回り） |

#手順（3） ページに表示させる
生成したコードを組み込みしていきます。
![page_get.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890505/948a4ab4-e66f-817f-c278-efbdf2701db9.jpeg)
**GET CODE**をクリックすると、SVGのコードとCSSのコードが表示されます。

そのままコピーしても問題ないですが、任意で下記が変更できます。

##classを変更
各pathタグには、アニメーションのトリガーになるclassが自動で付与されます。

デフォルトだとsvg-elemですが、設定画面の**element class**にて変更できます。
![page_class.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890505/5056cee2-53d6-beea-c318-9cf602a69b58.jpeg)
各クラスは**【element class】+【-（ハイフン）】+【数字】**という規則で付与されるようです。

##CSSの記述方法を変更
**animation type**にてtransitionかanimationを選択できます。
![page_ani.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890505/7919ecb0-aee8-1529-7a62-2fd89e279757.jpeg)
###transitionの場合
![code_tra.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890505/beaf33a8-6332-709e-4c19-f56992612feb.jpeg)
svgタグに対し、activeというクラスを追加した際に発火します。
クラスを追加する処理は自動で生成されないため、
別途javascriptでクラスを付与する必要があります。

###animationの場合
![code_ani.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890505/c604ce33-1c7a-120d-1ec9-822b4fb38b8a.jpeg)
keyframeで記述されます。
読み込み時にそのまま発火するため、タイミングの制御が必要であれば、
javascriptの追加とCSSの書き換えを行うと良さそうです。

##コードを貼り付ける
GET CODEをクリックして生成されたコードをコピーします。
組み込みたいページに貼り付ければ完成です！

#つまずいた箇所
##STROKE ANIMATIONが設定できない
![why_stroke.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890505/51918c33-cddd-e2ef-6a65-4f13968a4407.jpeg)
グレーアウトしてるな…。
###解消方法
strokeを指定しないと線のアニメーションは設定できないようなので、
**SVGコード内のCSSにstrokeを指定**したら無事設定できました！

##思い通りの順番でアニメーションが始まらない

![why_order.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890505/1c44e21f-3d4c-ddfb-caca-85432b7c8b90.jpeg)
左の文字から表示して欲しいのにバラバラになる…。
###解消方法
こちらのサービスではSVGコード内の各pathタグに対し、
上から順番にアニメーションが実行されるようコードが生成されるようです。
そのため、先に記述されたpathタグからアニメーションが始まります。

今回のようにイラレでSVGを作成する場合は下のレイヤーから順にpathタグが記述されるので、
**先に動かしたいオブジェクトほどレイヤーを下にする**ことで調整できました！

#終わりに
SVGアニメーション初心者でも楽しめる良いサービスでした！
設定できるのは線と塗りの動きだけですが、transitionなど生成後に加えてもいいかも。

普通に書いたらかなり大変であろう記述が自動でできるので、
こちらで「土台のコードを作成→必要に応じて調整」
みたいな使い方であればかなり実用的かと思います。（IE非対応の案件に限りますが…！）