このリップル オン クリック効果を再現したいと思います。
http://jsfiddle.net/cjalatorre/zr2m5d88/
フィドルは、この回答の拡張です。
ボタンの背景画像に CSS 放射状グラデーションを使用することにしました。波紋 (グラデーションの円) をタッチ/マウス ポイントの中心に置いています。レンダリング サイクルにフックするために、Surface モジュールを拡張しました。
グラデーションの直径用とグラデーションの不透明度用の 2 つの Transitionables があります。これらは両方とも、相互作用後にリセットされます。ユーザーがボタンをクリックすると、Surface は X と Y のオフセットを保存し、グラデーションの直径を最大値に移行します。ユーザーがボタンを放すと、グラデーションの不透明度が 0 に移行します。
レンダリング サイクルでは、バックグラウンド イメージを常に X オフセットと Y オフセットの円で放射状のグラデーションに設定し、2 つの Transitionable から不透明度とグラデーションの直径を取得します。
これらの famo.us モジュールが使用されます。
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Timer = require('famous/utilities/Timer');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');
var Transitionable = require('famous/transitions/Transitionable');
私は famo.us に詳しくないので、これを書き直してみる前に、明らかな同等のバニラ関数/落とし穴はありますか?