BLOG

• 2019.02.24
• SVG animation

Illustratorでデータを作りsvgアニメーションで文字を書いてみた【手書き風編】

前回は写真をオブジェクト化して一気に描くというのをやってみました。

前回記事
Adobe Capture CCで写真をベクターに変更し、vivus.jsを使ってSVG animationをやってみた

今回は文字を手書き風に書いてみました。

See the Pen SVGanimatioon by Kobayashi Yuka (@kobayashiyuka) on CodePen.36002

目次

1.Illustratorでsvgデータを作る
2.SVGデータ圧縮する
3.vivus.jsで実装
4.CSSでパスの色を変えてみる

1.Illustratorでsvgデータを作る

その工程1）〜4)です。

1）見本になりそうな手書きのフォントで書きたいテキストを書く

2）見本をロックしその上にパスツールで文字を書く

◎ポイント

テキストデータではオブジェクト化となり線と背景で書き出されるため手書き風はできませんでした。
パスツール系（鉛筆ツール、曲線ツール、パスツール）で書きます。

 

3）せっせと書く。とにかく書く。

◎ポイント

・書き順はレイヤーの下から描画されるので完成時を想像して、あらかじめレイヤーに分ける
・レイヤー名はそのままIDとして書き出されるため、あらかじめ設定しておく（のちにCSSで色を設定）

・線端を整える

・オブジェクト→パス→単純化でより手書き風に整える

4）書き出す。

オブジェクト→アートボード→オブジェクトに合わせる
ファイル→別名で保存→svg

2.SVGデータを圧縮する

ブラウザ上で圧縮できるのとデフォルトと見比べられるためおすすめ

svgomg

3.vivus.jsを使って実装（html,js）

その工程1）〜3）です。

1）jQueyとvivus.jsを読み込む

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

2）先ほど書き出したSVGデータをテキストエディタで開き、svgタグに任意のID名付与（今回はid=”svganimation”を追加しました。）

<svg id="svganimation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 837.8 295.1">
〜〜〜〜〜〜〜〜〜〜
</svg>

3）jsを書く

new Vivus('svganimation',//2）で付与したID名を書く
{
type: 'oneByOne', //1パスずつ書く
start: 'inViewport', //ビューポート内に表示されたらスタート
duration: 200, //速さ
animTimingFunction:Vivus.EASE_OUT//イージング 
});

vivus.js

 

4.CSSでパスの色を変えてみる

CSSを書く and うつす。
svgを書き出したら、svgデータの中にインラインでCSSが勝手に記入されます。
その内容をCSSファイルにうつす。
そして設定したい色のCSSを追加。

 

勝手に書き出されたCSS

.st2{fill:none;
stroke:#040000;
stroke-width:5;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}

任意のCSS

svg{
width:500px;
position:absolute;
right:0;
left:0;
top:0;
bottom:0;
margin:auto;
}

 

イラレで設定したレイヤー（id）ごとに色を設定

#txt01 .st2{
stroke:#F97F51;
}

#txt02 .st2{
stroke:#1B9CFC;
}

#txt03 .st2{
stroke:#58B19F;
}

#txt04 .st2{
stroke:#ff0000;
}

#txt05 .st2{
stroke:#B33771;
}

#txt06 .st2{
stroke:#3B3B98;
}

#txt07 .st2{
stroke:#FD7272;
}

#txt08 .st2{
stroke:#FC427B;
}

#txt09 .st2{
stroke:#9AECDB;
}
#txt10 .st2{
stroke:#D6A2E8;
}

See the Pen SVGanimatioon by Kobayashi Yuka (@kobayashiyuka) on CodePen.36002

 

さいごに

サイトでちょっとオリジナリティ出したい時に使えそう。
個人的には、

◎ところどころに小さめの動く装飾をつける（星とかお花とか）
→gifアニメ

◎画面を大きく使ったテキストアニメーション（キャンペーンサイトなどのメインビジュアルとか）
→svgアニメ

かなと思いました。たのしい！

参考になれば幸いです。

動画

YouTube

• 

• この記事を書いた人小林 友加

  Webデザイン〜WordPress実装・解析士のマルチプレイヤー