SVGファイルからパスアニメーションを作成「Lazy Line Painter」
当ページのリンクには広告が含まれています。
スポンサーリンク
Illustratorなどのグラフィックソフトで作成したSVG（Scalable Vector Graphics）ファイルから、パスアニメーションを作成するjQueryプラグイン「Lazy Line Painter」を紹介します。
jQueryプラグイン「Lazy Line Painter」
これがなかなかおもしろい！プラグインなので、早速、管理人もSVGファイルから作成してみました。デモをご覧ください。
スポンサーリンク
絵心ゼロ……。でも、おもしろいですね！
さて、気を取り直して「つくり方」をみてみましょう。
つくり方
1. SVGファイルを作成
「Illustrator」などのSVG形式に対応しているグラフィックソフトで、SVGファイルを作成します。
2. SVGファイルをjQueryコードへ変換
「Lazy Line Painter」へアクセスし、SVGファイルをjQueryコードへ変換します。
3. 変換したjQueryコードとプラグインからページを作成
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Lazy Line Painterのデモでーす。">
<meta name="robots" content="noindex, nofollow">
<title>Lazy Line Painter - jQuery Plugin Demo</title>
<style>
#illust {
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Lazy Line Painterのデモでーす。</h1>
<div id='illust'></div>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="js/jquery.lazylinepainter-1.4.1.min.js"></script>
<script src="js/illust.js"></script>
</body>
</html>
スポンサーリンク