rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

前橋のゆるキャラころとんをSVGでアニメーション描画してみた

      生活, 群馬 ,

  • このエントリーをはてなブックマークに追加
  • Pocket

ころとん

我らが前橋のゆるキャラ「ころとん」を SVG で書いて、絵描き歌風にアニメーションで描画させてみました。下記リンクからそのころとんが見られます。

絵心が無いのでひどいころとんになってしまいましたがw、スラスラと本当に絵描き歌っぽく描かれるアニメーションが結構面白いです。

このころとん、結構簡単にできてしまうのでその作り方を紹介してみましょう。

作り方

SVG でイラストを描く

まずはころとんのイラストを用意します。

ころとんの書き方は、こちらの公式サイトに絵描き歌が公開されているので、一緒に歌いながら書いてみましょう。

なお、SVG 形式の画像が作れれば良いので、今回自分はブラウザ上でお絵かきができる svg-edit というツールを使って書いてみました。

ころとん

なお、できあがった coroton.svg ファイルはこちら。

SVG 画像をアニメーションさせる

SVG 画像をアニメーション描画させるのには、Lazy Line Painter という jQuery プラグインを使ってみました。

まず、Lazy Line Painter のサイトの下の方にある「SVG TO LAZY LINE CONVERTER」というエリアに、作成した SVG 画像をドラッグ&ドロップでアップロードします。

Lazy Line Painter

画像がアップロードされると、このようにアニメーションして表示されます。

ころとん

この下にコードが表示されるので、svgdata.js というファイルを作成しそのコードをコピー&ペーストして保存します。

Lazy Line Painter

なお、コードの最後の方にある「$(‘#undefined’).lazylinepainter(」という箇所を「$(‘#coroton’).lazylinepainter(」に直しておきます。(※変更は任意です。)

保存する svgdata.js はこのようになりました。

Lazy Line Painter の GitHub ページにあ
る「Download ZIP」からソースをダウンロードして解凍します。その中に同梱されている「jquery.lazylinepainter-1.7.0.min.js」というファイルを取り出して使います。

下記のように、index.html ファイルを作成します。(「<div id=’coroton’></div>」という箇所の ID 属性を、svgdata.js で修正した “coroton” に合わせるのがポイントです。)

ちなみに、ここまで作ったファイルはこのような構成になります。

/directory
├─ index.html
├─ jquery.lazylinepainter-1.7.0.min.js
└─ svgdata.js

あとはブラウザでこの index.html を開けば、アニメーションでころとんが見られると思います。

頑張れ!ゆるキャラグランプリ

さて、今回ご紹介した前橋のゆるキャラころとんは、ただいま投票受付中の「ゆるキャラグランプリ2015」に参加中です。

10/19現在でころとんは総合26位、今年の目標10位以内にはまだまだもう一頑張り必要な状況です!

インターネット投票の期間は2015年11月16日(月)18時まで。

こちらのページから誰でも投票できますので、ぜひみなさんでころとんを応援しましょう!

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

パスタ
500円でお得ランチをGET!「ランチパスポート 前橋・高崎 Vol.5」が4月10日発売!

当ブログでも何度かレポートさせて頂いている「ランチパスポート 前橋・高崎」。いよ …

ナポリタン
ランチパスポートVol5の1店目。安定の美味しさな高崎市「room’s」でナポリタンランチ

500円でお得なランチが頂けるランチパスポート、Vol5 を購入してからようやく …

ぐんまちゃん年賀状
ぐんまちゃんの年賀状デザイン2016年版

12月もはや中旬にさしかかり、ぼちぼち年賀状の準備に取り掛かかり出した方も多いん …

ゆるキャラグランプリ
インターネット投票最終日まであと4日。ゆるキャラグランプリ制覇へぐんまちゃんラストスパート!

ゆるキャラグランプリ2014のインターネット投票は10月20日(月)まで、いよい …

前橋初市
前橋初市まつりがおめでたくて楽しくてオススメな件

前橋に引っ越してきてから6年目になるわけですが、今まで一度も行ったことがなかった …

ランチ
美味しいランチをワンコインで。「ランチパスポート 前橋・高崎」第4弾は1月10日発売!

以前、当ブログでもご紹介した「ランチパスポート 前橋・高崎」Vol3。使用期限の …

群馬のおきて
「群馬のおきて グンマーを楽しむための52のおきて」を読みました

「グンマー」という最高のネタを得て、今ノリにノッている群馬ですが、それを後押しす …

オムライス
ランチパスポート4店目。しっかりと懐かしい味な高崎市「room’s」のオムライスランチ

お得なワンコインランチが楽しめるランチパスポート、4店目は高崎市内の慈光通りから …

ミンナノグンマ
ぐんまちゃんダンス『ミンナノグンマ』の一般募集バージョンが公開されたそうです

みなさん、「ミンナノグンマ」って知ってますか? 群馬県のサイトによると、 群馬県 …

サイクルポート
前向きな方向で高チャリが改善されるといいなあと思っている件

高チャリが何やら話題になっているようですね。 高崎市民の民度が問われる「返ってこ …