はじめまして、WEBデザイナーの藤原と申します。
面白いサイトがあったので、簡単にアニメーションを制作してみました。
ホント簡単なので、ちょっとした動きを取り入れたい方にオススメ!
See the Pen
簡単アニメーション by fujiwara (@fujiwara_s)
on CodePen.
というわけで、紹介したいサイトはSVG Artistaです。
SVG Artista(https://svgartista.net/)では、オンライン上でSVGアニメーションが一瞬でつくれます。
特に、登録の必要がないところが◎
では、さっそく作り方を説明いたします。
目次
Step1.SVG Artistaにアクセス
https://svgartista.net/よりサイトにアクセス
画像の通りanimation typeを【Animation】に変更後、【PASTE MARKUP】をクリック
2枚目の黒っぽい画像になればOK ⇒そのまま待機でstep2へ
Step2.Illustratorで下記2点の作成する
線のSVGコードの作成
アニメーションに使いたい線画を用意
①Ctrl+Shift+Sで別名保存
保存時にファイル種類を【SVG(*.SVG)】に変更し、保存ボタンをクリック
②下のボタン左から2つ目の【SVCコード】をクリック
クリック後、テキストコードが出てくるので<svg>~</svg>をコピーし、
step1.で待機させている画面にペーストさせておく ⇒そのまま待機
べた塗りのSVGコードの作成
①②の作業は上記と一緒、【SVCコード】をクリック後
テキストコードの<style>~(</svg>の直前の)</g>をコピー
先ほど、待機させていたSVG Artistaの</svg>の直前に挿入させる
挿入後、左下の【APPLY】をクリック
で自分が制作したアニメーションが表示されるので動きを確認後OKであれば右上の【</>GET CODE】をクリック
それぞれの左下のボタンを押して、コードの取得できます!
どうでしたか?なかなか簡単に動きのあるアニメーションが作れませんか。
お暇なときに遊んでみてください☆彡