javascript - Famo.us 在 vanilla js 中的功能？ (表面/StateModifier/Transitionable/Transform)

Question

我想重现这种点击时的涟漪效果:

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

fiddle 是 this 的扩展回答:

I decided to go with a CSS radial gradient in the button's background-image. I'm centering the ripple (the gradient's circle) at the touch/mouse point. I extended the Surface module in order to hook into the render cycle.

There are two Transitionables, one for the diameter of the gradient and one for gradient opacity. Both of these are reset after the interaction. When the user clicks on a button, the Surface stores the X and Y offset and then transitions the gradient diameter to its max value. When the user releases the button, it transitions the gradient opacity to 0.

The render cycle is constantly setting the background-image to a radial gradient with the circle at the X and Y offset, and getting the opacity and gradient diameter from the two Transitionables.

使用了这些 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，所以在我尝试重写它之前，是否有任何明显的等价普通函数/陷阱？

Answer 1

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