如何实现google paper按钮效果

谷歌的纸张/材料设计http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introduction.html这是一个非常干净的外观，我认为会有很多用途。 Polymer 已经准备好了一堆“纸质元素”，网络社区已经在尝试不同的方法来实现它。对于这个问题我专门研究了按钮点击效果。

它具有因您的点击而散发出的激活颜色波纹。这是聚合物的例子：http://www.polymer-project.org/components/paper-elements/demo.html#paper-button http://www.polymer-project.org/components/paper-elements/demo.html#paper-button，这是一个 css jquery 示例：http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design

我的问题是如何实施它？

看一下聚合物示例，当您按下鼠标时，它可能会辐射背景颜色变化，而不是另一个示例中的彩色不透明波纹。当它达到极限时它会保持不变，然后在鼠标松开时它会迅速淡出。

由于我可以轻松地看到第二个示例背后的代码，因此我尝试以类似的方式实现它，但使用触摸事件而不是单击除外，因为我希望它在我所做的只是触摸但不释放时保持效果。

我尝试了缩放、转换位置、设置不透明度，但获得位置和从触摸点向外辐射的效果超出了我的范围，或者至少从我迄今为止投入的时间来看是这样。事实上，我在动画部门的经验总体来说还不够。

关于如何实施它有什么想法吗？

我也想要这个效果，但是我也没有看到任何实现。我决定在按钮的背景图像中使用 CSS 径向渐变。我将波纹（渐变圆）集中在触摸/鼠标点处。我扩展了 Surface 模块以连接到渲染周期。

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

渲染周期不断地将背景图像设置为径向渐变，其中圆位于 X 和 Y 偏移处，并从两个 Transitionable 获取不透明度和渐变直径。

我无法告诉你我是否已经使用最佳实践实现了波纹按钮效果，但我喜欢这个结果。

var Surface = require('famous/core/Surface');
var Timer = require('famous/utilities/Timer');
var Transitionable = require('famous/transitions/Transitionable');

// Extend the button surface to tap into .render()
// Probably should include touch events
function ButtonSurface() {
    Surface.apply(this, arguments);

    this.gradientOpacity = new Transitionable(0.1);
    this.gradientSize = new Transitionable(0);
    this.offsetX = 0;
    this.offsetY = 0;

    this.on('mousedown', function (data) {
        this.offsetX = (data.offsetX || data.layerX) + 'px';
        this.offsetY = (data.offsetY || data.layerY) + 'px';

        this.gradientOpacity.set(0.1);
        this.gradientSize.set(0);
        this.gradientSize.set(100, {
            duration: 300,
            curve: 'easeOut'
        });
    }.bind(this));

    this.on('mouseup', function () {
        this.gradientOpacity.set(0, {
            duration: 300,
            curve: 'easeOut'
        });
    });

    this.on('mouseleave', function () {
        this.gradientOpacity.set(0, {
            duration: 300,
            curve: 'easeOut'
        });
    });
}

ButtonSurface.prototype = Object.create(Surface.prototype);
ButtonSurface.prototype.constructor = ButtonSurface;

ButtonSurface.prototype.render = function () {
    var gradientOpacity = this.gradientOpacity.get();
    var gradientSize = this.gradientSize.get();
    var fadeSize = gradientSize * 0.75;

    this.setProperties({
        backgroundImage: 'radial-gradient(circle at ' + this.offsetX + ' ' + this.offsetY + ', rgba(0,0,0,' + gradientOpacity + '), rgba(0,0,0,' + gradientOpacity + ') ' + gradientSize + 'px, rgba(255,255,255,' + gradientOpacity + ') ' + gradientSize + 'px)'
    });

    // return what Surface expects
    return this.id;
};

您可以查看我的小提琴在这里 http://jsfiddle.net/stphnclysmth/j9Leqqk0/.