Famo.us 香草 js 中的函数？ （表面/StateModifier/Transitionable/Transform）
Famo.us functions in vanilla js? (Surface / StateModifier / Transitionable / Transform)
我想重现这种点击时的涟漪效果：
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，所以在我尝试重写之前，是否有任何明显的等效普通函数/陷阱？
看看https://github.com/fians/Waves
你有同样的效果，在JS中，CSS, SASS, LESS...
我想重现这种点击时的涟漪效果：
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，所以在我尝试重写之前，是否有任何明显的等效普通函数/陷阱？
看看https://github.com/fians/Waves 你有同样的效果，在JS中，CSS, SASS, LESS...