こんにちは、もうすぐサンタ狩りの季節ですね。今年も狩り最前線確定のムラタです。
今回はjQueryを使って文字を書いていくようなアニメーションを実装してみたいと思います。
まず、準備するものとしてSVGファイルというファイルを用意します。
SVGってなんぞやってなる人が多いと思いますが、「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略で、XMLをベースにした2次元ベクターイメージ用の画像形式の1つということらしいです。
詳しいことは自分も説明できませんが、ブラウザ上で画像として出力したりハイパーリンクを埋め込んだりcssで色変えたり背景にしたりできるのが特徴です。ベクターイメージなので当然拡大縮小しても画像の劣化もおきないということですね。
目次
SVGファイルを作成
それでは早速SVGを用意してみましょう。
SVGファイルはイラストレーターで作成します。
テキストをアウトライン化したら「別名で保存」→「ファイルの種類」を「SVG」として保存します。
保存の際のオプションはSVGプロファイルが「SVG1.1」、フォントの種類を「SVG」とします。要はデフォルトの状態でOKということです。
アニメーションの設定
これでSVGの準備はできました、次はこのSVGにアニメーションを設定していきます。
SVGのアニメーションを自動で生成してくれる「LAZY LINE PAINTER」というサイトがありますのでそれを利用しましょう。
サイトの最後の方に「SVG TO LAZY LINE CONVERTER」という箇所があるので、そこにSVGファイルをドロップするかクリックしてファイルを選択します。
※アップできるSVGファイルは横1000px以内、ファイルサイズ40KB以内らしいです。
アップが完了して少し待つと実際のアニメーションをプレビューで確認できたり、線の色の変更などを行えます。
問題なければ「Copy data to clipboard」をクリックしてソースコードをコピーして、新規にjavascriptファイルを作成してそこにペーストしておきます。
また、ページの最初の方にある「DOWNLOAD FROM GITHUB」のリンクから「jquery.lazylinepainter」も合わせてダウンロードしておきましょう。
実装
それでは実際にhtmlファイルに組み込んでみましょう。
必要なファイルは「jquery本体」と、先ほどコピーしたソースコードのjsファイル（仮にsvg.jsとします）、それとダウンロードしたzipファイルの中にある「jquery.lazylinepainter-1.4.1.js」とvendorフォルダ内にある「raphael-min.js」のふたつ。合計4つのファイルになります。
これらのjsファイルを読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>SVGアニメーション</title> <link href="style.css" rel="stylesheet" media="all"> <script src="jquery-1.9.1.min.js" type="text/javascript"></script> <script src="raphael-min.js" type="text/javascript"></script> <script src="jquery.lazylinepainter-1.4.1.js" type="text/javascript"></script> <script src="svg.js" type="text/javascript"></script> </head> <body> <div id="text"></div> </body> </html> |
こんな感じです。
アニメーションを出力させる箇所「<div id=”text”></div>」の部分はSVGアニメーションを設定した時に生成されたソースコード内の最後のほうに、「 Setup and Paint your lazyline! 」という箇所があるのでそこを確認してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Setup and Paint your lazyline! */ $(document).ready(function(){ $('#text').lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, "strokeColor": "#e09b99" }).lazylinepainter('paint'); }); |
恐らくアップしたSVGファイルの名前がIDになっているんだと思います。
ちなみにここに記述してある「strokeWidth」で線の幅を、「strokeColor」で線の色を変更することができます。
他にも指定できるオプションとして「width」「height」「strokeCap」「strokeJoin」「strokeOpacity」「strokeDash」「onComplete」「delay」「overridekey」などがあるようです。
「width」と「height」は出力させるアニメーションの幅と高さではなく、出力させる囲みの幅と高さみたいです。ちょっと用途が分からないですね・・・。
「strokeCap」は調べた限りでは線の終端部を丸ませるか角にするかみたいな設定でしょうか？自分が試した限りでは特に変化は見られませんでした。
値として「round（デフォルト値）」「square」「project」の3つあるようです。
「strokeJoin」は線と線がつながる接続部分の形を角にするか丸くするかみたいな設定みたいです。ちなみにこちらも確認することはできませんでした・・・。
値は「mitter」「bevel」「round（デフォルト値）」の3つ？
「strokeOpacity」は透明度を変更することができます。
値は0～1の間で設定します。デフォルト値は1です。
「strokeDash」は線の種類を変更できます。指定する値は「-」「–」「-.」「–..」などです。デフォルト値は「null」となっています。
「onComplete」は分かる人にはすぐ分かりますね。アニメーション処理が終わったタイミングで実行されます。例えばアニメーションが終わった後に線画ではなく塗りが入った画像にフェードで差し替えるみたいなことも出来そうですね。
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function(){ $('#text').lazylinepainter( { "svgData": pathObj, "strokeWidth": 1, "strokeColor": "#e09b99", "onComplete": function(){ alert("アニメーション完了"); } }).lazylinepainter('paint'); }); |
「delay」はアニメーションが開始されるまでの待機時間です。そのまんまですね。
最後の「overrideKey」ですが、本来このlazylinepainterは生成されたオブジェクトのキーと指定したセレクタのID名が一緒でなければ動きませんが、オプションだけ変えて同じページ内に複数表示させたい時などにこれを指定することで表示が可能になります。
ちなみにキーはペーストしたコードの最初のほうにあります。
最後に
いかがだったでしょうか？
わりと簡単に実装できるし問題児のIEちゃんも7からでもちゃんと動きますので、ちょっとしたアクセントとして使ってみるのも面白いのではないでしょうか？
