ロボット研究開発、ソフトウェア開発、コンテンツ制作配信

jQueryで線を描画するSVGアニメーションを実装する方法


jQueryで線を描画するSVGアニメーションを実装する方法をご紹介します。

【更新情報】2021年6月15日
Lazy Line Painterの使い方が変更になり、以下の手順では実装できなくなっています。SVGアニメーションを試されたい方は、DrawSVGを使ったアニメーション実装方法を参考にされてください。(以下記事)

実践jQuery講座 DrawSVGを使ってSVGアニメーションを作る

スポンサーリンク

SVGアニメーションサンプルの紹介

具体的にどういうアニメーションなのか、私が作成した以下のPortFolioサイトを参照ください。
トップページでSVGアニメーションを使っています。

SVGアニメーションサンプル

Lazy Line Painterのインストール

今回のアニメーションは、jQueryプラグン「Lazy Line Painter」を使用します。
以下のサイトから’jquery.lazylinepainter-1.7.0.min.js’をダウンロードして、自分のjQueryディレクトリへ保存します。
GitHub

私は、WordPressを使用しているので、functions.phpでダウンロードしたファイルを読み込みます。
(以下実装例:6行目)

SVGファイルを作成

次にアニメーションさせたいイラストや文字をSVG形式のファイルで保存します。
私は、illustratorを使ってSVGファイルを作成しました。

SVGファイルの保存方法(illustratorの場合)

まずは、イラストレーターでイラストでも文字でも何でもよいので、アニメーションさせたい素材を作ります。注意すべき点は、テキストボックスで作成した文字は、必ず右クリックで「アウトライン化」しておきましょう。
svg_animation1

次に作成した素材をSVG形式で保存します。
ファイルから「別名で保存」を選択します。
svg_animation2

ファイル形式で「SVG形式」選択し、「保存」を選択します。
svg_animation3

そのままOKで保存を完了させます。
svg_animation4

以上でSVG形式のファイルを作成することができました。

SVG TO LAZY LINE CONVERTERでコードを取得

次は、作成したSVGファイルをコードに変換します。
以下のサイトにアクセスします。
Lazylinepainter

「SVG TO LAZY LINE CONVERTER」という画面がありますので、そこに先ほど作成したSVGファイルをドラッグします。
svg_animation5

白いスクリーンには、実際にアニメーションが動作し、コードが出力されます。
これをコピーして自分のjQueryファイルへ貼り付けます。(詳細は次章で説明します)

コードの実装

先ほど、「SVG TO LAZY LINE CONVERTER」で変換したソースを自分のjQueryソースへ貼り付けます。
変換されたコードは、pathObjというパス関連の定義と実際にアニメーションさせるための命令lazylinepainterに分けれています。

pathObj部

pathObj部は、jQuery(funtion(){}関数(※readyメソッド)の外に貼り付けます。

アニメーション実行部分

アニメーション実行部分は、jQuery(function(){}(※readyメソッド内)に貼り付けます。
svgDataで先ほど定義したsvgデータを設定し、
strokeWidthは、線の太さ、storokeColorは線の色を指定します。
※jQueryのセレクターは、デフォルトで#undefinedです。

HTMLへの配置

jQueryのセレクターは、デフォルトで#undefinedになっています。自分がアニメーションを配置したい場所このセレクターと一致したidを指定してあげれば、アニメーションが動作します。

最後に

以上、jQueryで線を描画するアニメーションの実装方法のご紹介でした。
プラグイン「Lazy Line Painter」を使用することで簡単に実装することができますので、
動きのあるページを作りたいときは試してみたはどうでしょうか?
少しでも参考になれば幸いです。

それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン