簡単にアニメーションがつくれる

はじめまして、WEBデザイナーの藤原と申します。

面白いサイトがあったので、簡単にアニメーションを制作してみました。

ホント簡単なので、ちょっとした動きを取り入れたい方にオススメ！

というわけで、紹介したいサイトはSVG Artistaです。

SVG Artista（https://svgartista.net/）では、オンライン上でSVGアニメーションが一瞬でつくれます。

特に、登録の必要がないところが◎

では、さっそく作り方を説明いたします。

Step1.SVG Artistaにアクセス

https://svgartista.net/よりサイトにアクセス

画像の通りanimation typeを【Animation】に変更後、【PASTE MARKUP】をクリック

2枚目の黒っぽい画像になればOK　⇒そのまま待機でstep2へ

アニメーションに使いたい線画を用意

①Ctrl+Shift+Sで別名保存

保存時にファイル種類を【SVG（*.SVG）】に変更し、保存ボタンをクリック

②下のボタン左から2つ目の【SVCコード】をクリック

クリック後、テキストコードが出てくるので<svg>～</svg>をコピーし、

step1.で待機させている画面にペーストさせておく　⇒そのまま待機

①②の作業は上記と一緒、【SVCコード】をクリック後

テキストコードの<style>～(</svg>の直前の)</g>をコピー

先ほど、待機させていたSVG Artistaの</svg>の直前に挿入させる

挿入後、左下の【APPLY】をクリック

で自分が制作したアニメーションが表示されるので動きを確認後OKであれば右上の【</>GET CODE】をクリック

それぞれの左下のボタンを押して、コードの取得できます！

どうでしたか？なかなか簡単に動きのあるアニメーションが作れませんか。

お暇なときに遊んでみてください☆彡