2022/10/26

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

「文字をアニメーションで表示させたい」「アニメーションでリッチに文字を演出したい」

こんな時に活躍するのがSVGアニメーションで、下記のアニメーションもSVG画像を使ってロゴタイトルを動的に演出しています、リロードすれば何度でも見る事が可能です（注意：Chrome等のモダンブラウザ推奨）

SVG画像を使用しているので、どれだけ拡大しても画像が荒くなる事はありません、どの解像度でも鮮明に表示されるのはSVG画像の魅力の一つです、今回はこういったSVG画像を使ったアニメーションの実装手順について解説してみたいと思います。

それでは、早速作ってみましょう。

SVGアニメーションの作成方法

今この時点で必要なものは「SVG画像」のみ、SVG画像が手元にない方は用意してきてください、「イラストレーターが無いからSVG画像作れません」って方は「Illustratorを使わずSVG画像を作成する方法」を参考に作ればOKです。

SVG画像さえ用意すれば3ステップでSVGアニメーションを実装できます、以下の通り。

プラグインを用意する
SVG画像をもとにコードを生成する
コードを軽く編集する

それぞれ解説します。

①：プラグインを用意する

アニメーションにはjQueryのプラグインを使用します。GitHubから「jquery.lazylinepainter-1.7.0.min.js」（無ければ最新のやつ）をダウンロードしてきてください。

GitHub初心者の方は、リンク先のサイト右側にある緑色のダウンロードボタンからZipファイルでローカルに保存すればOKです、保存したデータの中にアニメーションを実装する為のJavaScriptファイルが入っています。

②：SVG画像をもとにコードを生成する

次に、「Lazy Line Painter」というサイトにアクセスし、そこでアニメーションコードを生成します。

LazyLinePainterの使い方

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

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

ステップ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と言った感じ。

おそらく、これでアニメーションが動くと思います。

以上！

関連記事Illustratorを使わずSVG画像を作成する方法

関連記事いつまでHTMLを勉強しているの？プログラミング初心者は必読

jQuery SVG アニメーション