Famo.us работает в ванили JS? (Поверхность / StateModifier / Transitionable / Transform)

Question

Я хотел бы воспроизвести этот эффект ряби по щелчку:

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

Скрипка является продолжением этого ответа:

Я решил использовать CSS-радиальный градиент на фоновом изображении кнопки. Я центрирую рябь (круг градиента) в точке касания / мыши. Я расширил модуль Surface, чтобы подключиться к циклу рендеринга.

Есть два Transitionables, один для диаметра градиента и один для непрозрачности градиента. Оба из них сбрасываются после взаимодействия. Когда пользователь нажимает кнопку, Surface сохраняет смещение X и Y, а затем переводит диаметр градиента в максимальное значение. Когда пользователь отпускает кнопку, он меняет прозрачность градиента на 0.

Цикл рендеринга постоянно устанавливает фоновое изображение в радиальный градиент с кружком по смещению X и Y, и получает непрозрачность и диаметр градиента от двух 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...