JQueryのプラグインを使用していい感じのSVGアニメーションがつくれみたいだったので、試してみました。
近頃インタラクティブな実装方法を、身につけたいと思っていて惹かれたJQueryです。
思った以上にとっても簡単にできておすすめ！
こんな感じで、まるで書いているみたいな動きをつけることができます。
作り方
1.Illustratorでsvgデータを作成する
2.LAZY LINE PAINTERでJsを作る
3.HTMLを書く
4.補足
Illustratorでsvgデータを作成する
このとき、書いた順番でアニメーションが作成されます。
LAZY LINE PAINTERでJsを作る
LAZY LINE PAINTER
のサイトの下の方にある
コンバーターにsvgをドラックするかクリックしてファイルを選択し
Jsデータに変換する
このような画面に切り替わりアニメーションが確認できる
HTMLを書く
例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>svg-animation</title> <link rel="stylesheet" type="text/css" href="common.css" media="all"> </head> <body> <section> <!-- svg animation --> <h1 id="animation"></h1> </section> <!-- jQueryの読み込み --> <script src="jquery-2.1.1.min.js"></script> <!-- lazylinepainterのJsの読み込み --> <script src="jquery.lazylinepainter-1.7.0.min.js"></script> <!-- 生成したJsの読み込み --> <script src="svg.js"></script> <!-- 生成したJsの最後に書いてあるセッティングをHTMLに 持ってきています。 --> <script type="text/javascript"> (function($) { $(document).ready(function() { // 変数の定義 var $animation = $('#animation'); $animation.lazylinepainter({ //変数の名前 'svgData': pathObj, //線の太さ 'strokeWidth': 2, //線の色 'strokeColor': '#E47B77', // 文字全部を一気に表示させる記述 'drawSequential': false, //なめらかな動きをつける記述 'ease': 'easeInOutQuad' }); // 0.5秒後にアニメーションを開始する setTimeout(function() { $animation.lazylinepainter('paint'); }, 500) }); |
補足
今回ここでは、紹介しませんがオプションを使うことによって
点線にしたり、透明度を変えたりカスタマイズすることができます。
参考にさせていただいた記事
SVGとjQueryで絵を描いているようなアニメーションを実装する方法