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

css

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

スポンサーリンク

サンプル

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

※resultメニューで動作確認

作り方

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

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

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

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

作成したファイルの保存

作成したファイルの保存

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

<svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
   y="0px" width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<g>
  <path class="line" d="M243.333,68.388c0,5.207-3.604,10.612-10.811,16.216c6.565,9.69,9.85,18.618,9.85,26.786c0,2.002-0.601,3.003-1.802,3.003
    c-0.961,0-1.441-1.321-1.441-3.964c0-8.006-2.804-16.135-8.408-24.384c-11.612,8.648-27.407,16.116-47.386,22.402・・・以下略

HTMLの記述内容

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

<div class="box">
  <svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
   y="0px" width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
    <g>
      <path class="line" d="M243.333,68.388c0,5.207-3.604,10.612-10.811,16.216c6.565,9.69,9.85,18.618,9.85,26.786c0,2.002-0.601,3.003-1.802,3.003
      c-0.961・・・以下略
    </g>
  </svg>
</div>

CSSの記述内容

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


.line{
	fill:rgba(255,0,0,0);
	stroke:#000;
	stroke-width:1;
	stroke-dasharray: 3000;
	stroke-dashoffset:3000;
	animation: DASH 3s ease-in alternate forwards;
	-webkit-animation:DASH 3s ease-in 0s forwards;
	-o-animation:DASH 3s ease-in 0s forwards;
	animation:DASH 3s ease-in 0s forwards;
}

@-webkit-keyframes DASH{
	0%{stroke-dashoffset:3000;}
	80% {stroke-dashoffset:2000;fill:rgba(255,0,0,0.2);}
	100%{stroke-dashoffset:0;fill:rgba(255,0,0,1);}
}

@keyframes DASH{
	0%{stroke-dashoffset:3000;}
	80% {stroke-dashoffset:2000;fill:rgba(255,0,0,0.2);}
	100%{stroke-dashoffset:0;fill:rgba(255,0,0,1);}
}

主要なプロパティの概要

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

■参考リンク

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

その他の表現方法

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

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

まとめ

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

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