Famo.us在vanilla js中运行? (Surface / StateModifier / Transitionable / Transform)

时间:2015-04-20 07:45:57

标签: javascript css material-design famous-angular

我希望重现这种涟漪点击效果:

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,所以在我尝试重写之前,是否有任何明显的等效香草功能/陷阱?

1 个答案:

答案 0 :(得分:0)

看看https://github.com/fians/Waves 你在JS,CSS,SASS,LESS ......中也有同样的效果。