0

我想重现这种点击波纹效果:

http://jsfiddle.net/cjalatorre/zr2m5d88/

小提琴是这个答案的扩展:

我决定在按钮的背景图像中使用 CSS 径向渐变。我将波纹(渐变的圆圈)置于触摸/鼠标点的中心。我扩展了 Surface 模块以连接到渲染周期。

有两种Transitionables,一种用于渐变的直径,一种用于渐变的不透明度。这两个都在交互后重置。当用户单击按钮时,Surface 存储 X 和 Y 偏移量,然后将渐变直径转换为其最大值。当用户释放按钮时,它会将渐变不透明度转换为 0。

渲染周期不断地将背景图像设置为径向渐变,圆在 X 和 Y 偏移处,并从两个 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,所以在我尝试重写之前,是否有任何明显的等效香草功能/陷阱?

4

1 回答 1

0

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

于 2015-04-20T08:06:21.900 回答