2020年3月3日

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

はじめまして、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】をクリック

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

 

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

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

 

 

 

LINEで送る
Pocket

label

アバター

Written by
藤原栞

CONTACT

お問い合わせ、ご依頼などは下記電話番号かメールアドレスまでご連絡ください。
※内容により回答までお時間をいただく場合がございます、予めご了承ください。

tel. 06-6534-9333

10:00-19:00(※土日祝を除く)