macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

【イラレ不要】SVGアニメーションを簡単に作る方法【jQuery】

JavaScript プログラミング

「文字をアニメーションで表示させたい」ちょっとでもリッチに見せたい時はアニメーションですよね。

Illustratorも難しい技術も必要としません。

簡単に実装できる方法を、実際のコードを公開しながら解説していますので興味のある方は参考にどうぞ。

注意:ブラウザはChrome推奨

下記のようなSVGアニメーションを作成してみる

リロードすれば何度でも見る事が可能です。

SVGを使用しているので、拡大しても画像が荒れることはありません。

実際に作ってみましょう。

スポンサードサーチ


SVGアニメーションの作成方法【流れ作業でOK】

必要なもの

  • SVG画像

SVG画像だけ用意すればOK、あとは流れ作業です。

「Illustrator持ってないからSVG画像用意できません」

必要ありません、代用ソフトで十分作成可能です、下記記事を参考にすれば簡単に作成できます。

Illustratorを使わずSVG画像を作成する方法

SVG画像さえ用意すれば手順は3ステップでOK

  1. アニメーションに必要なプラグインを用意する
  2. SVG画像をもとにコードを生成する
  3. コードを軽く編集する

それぞれ解説しながらみていきましょう。

ステップ1:プラグインを用意する

アニメーションにはjQueryのプラグインを使用します。

GitHubからjquery.lazylinepainter-1.7.0.min.jsをダウンロードするだけでOK。

GitHub

サイト右側にある緑色のDLボタンからZipでDLしましょう、その中にjsファイルが入っています。

ステップ2:SVG画像をもとにコードを生成する

難しいことは一切しません。

下記のサイトを使ってアニメーションコードを生成します。

Lazy Line Painter

LazyLinePainterの使い方

  1. サイト最下部付近にある「SVG TO LAZY LINE CONVERTER」をクリック
  2. 用意したSVG画像を選択しアップロード
  3. すぐ下にコードが生成されるのでそれをコピー

コピーしたコードはこの後使用します。

ステップ3:コードを軽く編集する

あとはマークアップで編集するだけです。

以下のようにしましょう。

index.html

<div id="macoblog"></div>
<script src="jquery.lazylinepainter-1.7.0.min.js"></script>
<script>
// ここにジェネレーターで生成したコードを貼り付ける
</script>

それぞれ簡単に解説します。

  • 1行目:ここにSVGを表示させます、IDはわかりやすければなんでもOK
  • 2行目:ダウンロードしたjQueryプラグインを読み込みます、もちろんhead内で読み込んでもOK
  • 4行目:先ほどジェネレーターで生成したコードをコピペ

これだけではまだ動きません

デモで使ったコードを参考にすると

var pathObj = {
    "macoblog": {
        "strokepath": [
            {
                "path": "M1.132 1.296v21.166",
                "duration": 600
            },
            {
                "path": "M22.299 1.296v21.166",
                "duration": 600
            },
            {
                "path": "M1.132 1.296l10.584 10.583",
                "duration": 600
            },
            {
                "path": "M22.299 1.296L11.716 11.879",
                "duration": 600
            },
            {
                "path": "M27.59 22.462L38.175 1.296l10.583 21.166",
                "duration": 600
            },
            {
                "path": "M32.882 17.17h10.584",
                "duration": 600
            },
            {
                "path": "M75.216 1.296H54.049v21.166h21.167",
                "duration": 600
            },
            {
                "path": "M101.674 1.296H80.507v21.166h21.167z",
                "duration": 600
            },
            {
                "path": "M106.966 22.462V1.296h21.166v10.583",
                "duration": 600
            },
            {
                "path": "M106.966 11.88h21.166v10.582h-21.166",
                "duration": 600
            },
            {
                "path": "M133.424 1.296v21.166h21.167",
                "duration": 600
            },
            {
                "path": "M181.049 1.296h-21.167v21.166h21.167V1.296",
                "duration": 600
            },
            {
                "path": "M207.507 1.296h-21.166v21.166h21.166",
                "duration": 600
            },
            {
                "path": "M196.924 11.88h10.583v10.582",
                "duration": 600
            }
        ],
        "dimensions": {
            "width": 209,
            "height": 24
        }
    }
};
$(document).ready(function(){
  $('#undefined').lazylinepainter({
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#2581c4"
  }).lazylinepainter('paint');
});

ポイントは68行目

#undefinedとなっている部分を、先ほどdivに指定したID名にしてあげないといけません。

前述したコードを参考にすると、#macoblogになります。

これで動作するはずです、お試しあれ。

終わりに

いかがでしたでしょうか。

多少長くなりましたが、難しいことは一切していないことはお分かり頂けたかと思います。

今回は文字列でしたが、ロゴなどにもアニメーションを付与することが可能です。

これを機会にSVGの理解を深め、良質なサイト作りを目指していきましょう。

以上になります。

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。