キーボードで操作できるSVGのドラムアニメーションが凄い!

cap001

SVG画像とJavaScript、html5のaudio要素で実装されたドラムキットのアニメーションを紹介します。

まずは、こちらのデモをご覧ください。

キーボードでドラムを操作することができます。
cap002

さらに、右上のタイルメニューを押すと、、、
cap006

ドラムを叩くタイミングや全体のテンポを指定して、ドラムを演奏することができます。
cap005

タイミングを指定したら、再生ボタンを押すだけで自動演奏ができます。
cap003

SVG画像とJavaScript、html5のaudio要素だけで実装されています。ここまで作り込んでいるのは、凄いですね。

JavaScriptでは、jQueryの他に、TweenMaxというアニメーションライブラリが使用されています。

TweenMaxは、Googleも推奨しているアニメーションライブラリで、jQueryのanimateメソッドよりも動作が高速で安定しているのが特徴です。

実装方法も詳しく紹介されているので、興味のある方はご覧ください。
How to Create an Interactive Animated SVG Drum Kit