CX's Hatena Blog

はてなブログを使ってみるテスト

SVG で某試験の解答を描いてみるテスト

春の某試験に向けて勉強をしているのですが、息抜きに、SVG を使って、問題の解答を描いて見ました。

f:id:cx20:20140330113547p:plain

1.素の SVG で図を描いてみる

2.ライブラリ+JavaScript を用いてアニメーションさせてみる

なお、ライブラリとして

Snap.svg - Home

を使用してみました。

Snap.svgRaphael.js の作者による SVG のライブラリで、Raphael.js との大きな違いは、モダンブラウザを対象にしている点とのことです。

ライブラリに助けられている部分は、ありますが、JavaScript でアニメーションを同期的に表示するのは意外に難しいのだと感じました。(単に、自分が、使い方を理解してないだけかと思いますが。。。)

おまけ

以前、HTML5 Canvas を用いて、某クイズの解答をアニメーションで作っていたことを思い出しました。

アニメーションで表現した方が、理解が早まるケースも多い気がします。(作るのは面倒ですが。。。)

さて、息抜きもほどほどに、勉強しないと・・・