ブラウザで波紋エフェクト出すやつ作った
最近プレゼンとかでウェブベースのアプリを実演する機会がわりとあったりします。そのときちょっと不便なのは、マウスをどのように操作して、どこでどういう風にクリックしたのかがいまいち伝わりにくいということで。まあしょうがないかと思ってたんですが。
そうしたら次期Androidのマテリアルデザインでは波紋エフェクトが使われるようになるとか。あー、その手があったか。そういえば、スマホじゃなくてPCの世界ではそういうのときどき見たことあるな、と思ってJavaScriptで作ってみました。
http://aikelab.net/visibletouch/
https://github.com/aike/VisibleTouch.js
発想の元はマテリアルデザインの波紋エフェクトですが、プレゼン用ということで最終的にいろいろ違った感じになりました。たぶん探せば同じようなツールはすでにたくさんあって101回目くらいの車輪の再発明だとは思うけど、自分用にぴったりのがほしかったので自作しました。
ライブラリのJSファイルは共通部と固有部にわかれていて、読み込む固有ライブラリによってビジュアライズが変わります。
visibletouch.js 共通ライブラリ
visibletouchripple.js 固有ライブラリ：波紋エフェクト
visibletouchmouse.js 固有ライブラリ：マウスイラスト表示
visibletouchano.js 固有ライブラリ：「あの楽器」風 波紋エフェクト
波紋エフェクトの仕組みとしては、ウィンドウと同じサイズの透明なキャンバスをあらかじめ最下位レイヤーに置いておいて、クリックされたらキャンバスを最上位レイヤーに移動して波紋アニメーションを描画。波紋が完全にフェードアウトしたら再びキャンバスを最下位レイヤーに戻す、という無理矢理なことをしています。そのため波紋描画中に連続してクリックしたりドラッグしたりすると、いろいろ悲しい思いをすることがあると思います。
