我希望重现这种涟漪点击效果:
http://jsfiddle.net/cjalatorre/zr2m5d88/
小提琴是this答案的延伸:
我决定在按钮的背景图像中使用CSS径向渐变。我将触摸/鼠标点处的纹波(渐变的圆圈)居中。我扩展了Surface模块,以便挂钩渲染周期。
有两个可转换的,一个用于渐变的直径,另一个用于渐变不透明度。这两个都在交互后重置。当用户单击按钮时,Surface会存储X和Y偏移,然后将渐变直径转换为其最大值。当用户释放按钮时,它会将渐变不透明度转换为0。
渲染周期不断地将背景图像设置为径向渐变,圆圈位于X和Y偏移处,并从两个可转换曲面获得不透明度和渐变直径。
使用了这些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,所以在我尝试重写之前,是否有任何明显的等效香草功能/陷阱?