CSS3とSVGでテキストアニメーションを作る

2017年5月1日css

最近ちらほらと見かけることのおおくなったSVGで描画されたアイコンや画像。
たまぁ~にアニメーションもするSVGも見ることがあり、そろそろSVGとCSS3の普及率も上がってきたことだし、挑戦してみようかなと思い作ってみました。

サンプル

下記参考サイトを元に作ってみました。

※resultメニューで動作確認

作り方

まずはADOBE ‎Illustrator(イラストレーター)等で、テキストを書き、アウトライン化してパスを作成する。
今回は単純なアニメーションなので、パスを弄ったりはしていません。

テキストのアウトライン化
テキストのアウトライン化

次にSVGとしてファイルを保存。
特に設定項目は弄ることなし。

作成したファイルの保存
作成したファイルの保存

生成されたSVGファイルをテキストエディタで開く。
SVGタグから下をコピーして、HTMLを記述して行く。

HTMLの記述内容

詳細なHTMLは埋め込んだサンプルより確認出来るので、抜粋して紹介。
widthとheightの値を変更する事で、サイズの調整もする事が出来ます。

CSSの記述内容

次にアニメーションの設定。

主要なプロパティの概要

プロパティ名 概要
fill 与えられたグラフィックス要素の内部への塗りを定める。
stroke グラフィックス要素を外形線に沿って塗ることを指示する
stroke-width 現在のオブジェクトに対するストロークの幅を指定する
stroke-dasharray パスのストロークに用いられるダッシュと間隔のパターンを制御する
stroke-dashoffset ダッシュパターンがパスに沿ってずらされる距離を指定する

■参考リンク

SVGに関連するCSSプロパティの解説は下記ページに、詳細な解説が書かれています。

その他の表現方法

ちょっと時間が無かったので、他の表現方法について、参考になる記事をご紹介。

CSS3とSVGを使って、一筆書きのようなアニメーションを実装する方法とサンプルを公開されています。パスを編集しなければいけない手間がありますが、実用案件においては当然とも言える作業かも。
jQueryとjQuery pluginを使用して、一筆書きアニメーションを実現する方法を紹介されています。また、生成されたjsをファイル別に分ける管理方法と手を加えているので、勉強になります。

まとめ

意外と簡単にSVGでアニメーションが出来る。
アイコン等小さなグラフィックはSVGで代用するとファイルサイズを軽量化、HTTPリクエスト数も減って良いことづくめ。
ベクター形式なので、画質が劣化しない。
使っている色数が少ないアイコンやキャラクター画像等はSVGで代用するとよい。

この記事が気に入ったら
『いいね』しよう!