知識ゼロでもSVG画像をアニメーション表示する方法

jQuery

ここ数年で、パソコンやスマートフォンが、目まぐるしい成長を遂げています。
そんな進化のおかげでWEBサイト上でも表現の幅もかなり広がり、デザインが秀逸で動きのあるWEBサイトが増えています。
自分のサイトにも動きのある要素を取り入れてみたいとは思いませんか？
という訳で、簡単にWEBサイト上で線画をアニメーション表示する方法をご紹介します。

SVG画像とは？

『SVG画像』の性質を理解するには、
『ラスタ画像』というものと比較すると分かりやすいです。

例えば、カメラやスマートフォンで撮影した写真は『ラスタ画像』というものです。
拡大すると、わかりやすいのですが、モザイクのように小さな四角いドットがたくさん集まって出来ています。
この単色のドットで構成されているのが『ラスタ画像』です。

そして、『SVG画像』は『ベクタ画像』や『ベクターイメージ』とも呼ばれていて、『ラスタ画像』とは違い、拡大しても画像が劣化しません。
なぜなら、『ラスタ画像』はドットを記録して作られていますが、『ベクタ画像』は線の太さや位置、伸びる方向や距離を記録して作られているので、拡大するたびに大きさに合わせて計算し、再表示されているのです。
今、あなたが読んでいるこの文字も同じようなものです。
試しに、このページを拡大してみて下さい、こんなに小さく表示されているのに拡大しても劣化することはありません。

ここまで聞いていると、「なら、全てSVG画像にすれば良いのでは？」と思うかもしれませんが、そうもいきません。
『SVG画像』は、計算して表示をするため斜線や曲線は綺麗に表示できるのですが、
風景写真などの複雑な画像を扱うと処理が重たくなってしまうので、『ラスタ画像』を使用したほうが適していたりと、それぞれ使いどころが分かれているのです。

SVG画像を簡単にアニメーション表示する方法

ここまでで、SVG画像がどのようなものかを説明してきましたが、いよいよSVG画像を使ってアニメーション表示する方法の紹介です。

①ファイルをダウンロードする

今回はLAZY LINE PAINTERというサイトと、こちらのプラグインを使用して制作するので、ダウンロードしておいて下さい。

②HTMLファイルにコードを記述

<html>
<head>
<script>jquery-2.1.1.min.js</script> (jQuery本体)
<script>jquery.lazylinepainter-1.7.0.js</script>　(描画アニメーションに必要なプラグイン)
</head>
<body>
<div id="face">
</div><!--face-->
</body>
</html>

①でダウンロードしたZIPファイルの中にある
・jquery-2.1.1.min.js （jQuery本体）
・jquery.lazylinepainter-1.7.0.js （描画アニメーションに必要なプラグイン）
をhead内で読み込ませます。
body内にはfaceというidをつけた要素を作っておきましょう。

③SVG画像を用意する

AdobeのIllustratorなどのペイントソフトを使ってSVG画像を作成していくのですが、
作成するにあたって 「縦横の幅が1000px以下」、 「ファイルのサイズは40KBまで」 この２つに当てはまるものを作成する必要があります。
今回、私が使用するのはコチラの画像です。
なお、SVG画像を用意できないという人は画像をクリックするとダウンロード出来るので是非ご活用下さい。

④SVG画像をJSコードに変換して保存

LAZY LINE PAINTERにアクセスして、サイトにファイルをアップロードして下さい。

アップロードが完了するとJSコードが生成されるのでコピーしましょう。

この画像の場合はこのようなコードが生成されました


/* Lazy Line Painter - Path Object 
 * Generated using 'SVG to Lazy Line Converter'
 * http://lazylinepainter.info 
 * Copyright 2013, Cam O'Connell  　　　　　　　　//ライセンス表記は消さずに使用して下さい
 */ 
var pathObj = {
    "face": {　     　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//""の中を③で作ったdiv要素と同じidにする　
        "strokepath": [
                〜省略〜
  };
 $(document).ready(function(){ 
 $('#undefined').lazylinepainter( 　　　　　　　　　　　//$('#undefined')を③で作ったdiv要素と同じidに設定する　
 {
    "svgData": pathObj,
    "strokeWidth": 2,　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
    "strokeColor": "#e09b99" 　　　　　　　　　　
}).lazylinepainter('paint'); 
 });

コードをコピー出来たら、「svgdata.js」の名前で新しいJSファイルを作り、中にこのコードを貼り付けます。そして、上のコードを参考に、２箇所を②で作ったdiv要素のidと同じものに書き換えましょう。

⑤jQueryファイルを読み込ませる

<html>
<head>
<script>jquery-2.1.1.min.js</script> (jQuery本体)
<script>jquery.lazylinepainter-1.7.0.js</script>　(描画アニメーションに必要なプラグイン)
<script>svgdata.js</script>　(SVG画像をJSコード化したファイル)
</head>
<body>
<div id="face">
</div><!--face-->
</body>
</html>

HTMLファイルの内に④で作ったファイルを外部のJSファイルとしてリンクを作ります。
なお、コードをファイルとして保存せずに、HTMLファイルの内にと、設定することも可能です。ここまで行えば、SVG画像をアニメーション表示させることが可能です。

カスタマイズ


      〜省略〜
 $(document).ready(function(){ 
 $('#face').lazylinepainter( 　　　　
    "svgData": pathObj,
    "strokeWidth": 2,　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//表示する線の太さを指定できます　
    "strokeColor": "#e09b99" 　　　　　　　　　　　　　　　　　　//表示する線のカラーを変更できます　
}).lazylinepainter('paint'); 
 });

④で生成したコード内にある、”strokeWidth”で線の幅、”strokeColor”で線の色を指定することができます。

おわりに

今回ご紹介した、SVG画像のアニメーション表示も多くのWEBサイトで取り入れられています。現在、たくさんのjQueryのプラグインがあり、まったくjavascriptの知識がない人でも、高度なエフェクトが簡単に使うことができるので、みなさんもご自身のWEBサイトに取り入れてみてはいかがですか？

oj9のWEB制作技術を用いたホームページ制作！

oj9では、お客様のコンセプトに合わせたオリジナルのサイトデザインやロゴ制作、高度な撮影技術を駆使したWEBサイト制作を行っております。
また、コーポレートサイトやメディアサイトだけではなく、商品やサービスのランディングページ制作もお引き受け致しておりますので、ご興味がある方は気軽にお問い合わせください。

◆oj9の制作サービスについて詳しく知りたい方はこちら

この記事へのコメントはありません。

お探しのものはこちらから。