デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

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

どうもこんにちは!InomaCreateのkoheiです。
今回は、jQueryのDrawSVGというライブラリを使って、SVGアニメーションを作る方法を紹介します。

スポンサーリンク

解説動画

動画解説もあります。記事と合わせてどうぞ!

1.SVGファイルを作る

まず、アニメーションさせたい文字、図のSVGファイルを作る必要があります。

SVGファイルとは・・・Scalable Vector Graphics
SVGはXMLをベースにした二次元ベクターデータ
このベクターデータとは「画像を、点の座標とそれを結ぶ線(ベクター、ベクトル)などの数値データをもとにして演算によって再現する方式」であり、このデータ形式で作られた画像は「拡大・縮小しても画質が損なわれない」といった特徴を持っています。

今回は、アドビのイラストレーターを使って、SVGファイルを作ります。
※GIMPや無料のWebツールでもSVGファイルが作れるようです。やり方が分かったらまた記事にしたいと思います。

イラストレーターを開いて、テキストツールでアニメーションさせたい文字を書きます。(今回は文字のアニメーションを例にします)
※このとき、塗りは無しにしておいてください。(塗りが有りだとDrawSVGのアニメーションが動作しませんでした。)

文字を選択した状態で、右クリックして、アウトラインを作成をクリックします。

ファイル→書き出し→書き出し形式を選択します。

ファイル形式を「SVG」に設定して、書き出しを押します。

SVGオプションでOKを押します。

2.DrawSVGを使って、SVGアニメーションさせるコードを作る

アニメーションさせたいSVGファイルができたら、次は実際にコードを書いていきます。

練習素材ダウンロード

今回、サンプルの練習素材をダウンロードできるようにしていますので、以下からダウンロードしてやってみてください。

2-1.DrawSVGを読み込む

次にアニメーションさせるためのライブラリをダウンロードします。
今回は、DrawSVGというライブラリを使います。以下のサイトから、ZIPファイルをダウンロードしてきましょう。

jQuery DrawSVG

ダウンロードしたら、解凍し、「jquery.drawsvg.js」というファイルがありますので、実装するコード環境のjsフォルダへコピーしましょう。

index.htmlを開き、以下を追加しDrawSVGのスクリプトファイル(jquery.drawsvg.js)を読み込みます。

2-2.SVGファイルのコードを貼り付ける

次に、アニメーションさせたいSVGファイルをエディタで開き、index.htmlファイル内に貼り付けます。
※今回のサンプルのSVGファイルは、sample/images/内に置いてます。

ここで、idは、”svg_animation”にしておきます。後ほど、jQuery側の処理で、このid名を指定します。

2-3.アニメーション処理を記載

続いて、実際にアニメーションさせる処理を記載します。
jsフォルダ内のmy_script.jsに以下のように記載しましょう。

3行目で指定しているidは、svgタグのid(svg_animation)です。
上記を記載すれば、SVGアニメーションが動作します。

2-4.オプション設定

DrawSVGには、以下のようなアニメーションのオプション設定あります。

オプション名 説明
duratioin 各パスのアニメーション完了時間(ms)
stagger 各パスのアニメーションを遅らせる時間(ms)
easing アニメーションのイージング機能設定(動きの加減速)
reverse 線を引く方向
callback アニメーション完了後に呼び出す関数

試しに、以下のように処理を変更して、ブラウザで表示を見てみましょう。

durationとstaggerを同じ時間に設定しているので、1つのパスのアニメーションが終わってから次のパスのアニメーションが始まるようになったと思います。
easingは、swingとlinearが選択できるようですが、linearにすると、パスの角に隙間ができたりしてあまり良い動きではなかったです。
callbackはアニメーションが終わったときに、何か別の処理をさせたいときに記載します。今回はとりあえずコンソールにログを出してみました。
他にも色々試して動かしてみると楽しいと思います。

最後に

今回は、DrawSVGというライブラリを使って、SVGアニメーションの実装方法を紹介しました。
アニメーションを入れることで印象的なサイトが作れると思いますので、ぜひ皆さんもDrawSVG使ってみてください。
それでは!!

スポンサーリンク

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

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

飲食店用WordPress無料テーマ
「InomaRestaurantBasic」

飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン