如何实现谷歌纸按钮效果

Question

Google 的纸/材料设计http://www.google.com/design/spec/material-design/introduction.html 是一个非常干净的外观，我认为它会被大量使用。Polymer 有一堆“纸元素”可以使用，网络社区已经在用不同的方法来实现它。对于这个问题，我特别关注按钮点击效果。

它具有激活颜色的波纹，从您的点击中散发出来。这是聚合物的示例：http : //www.polymer-project.org/components/paper-elements/demo.html#paper-button，这是一个 css jquery 示例：http : //thecodeplayer.com/walkthrough/ripple-点击效果谷歌材料设计

我的问题是如何去实施它？

看一下聚合物示例当您按下鼠标时，它会辐射背景颜色偏移，而不是另一个示例中的彩色不透明度波纹。它在达到极限时保持不变，然后在鼠标向上时它会迅速消失。

因为我可以很容易地看到第二个例子背后的代码，所以我尝试以类似的方式实现它，但除了使用触摸事件而不是点击，因为我希望它保持效果，如果我所做的只是触摸而不是释放.

我尝试缩放，转换位置设置不透明度，但是从触摸点向外辐射的位置和效果超出了我的范围，或者至少从我到目前为止投资的时间来看。事实上，我在动画部门的经验一般不足。

关于如何实施它的任何想法？

Answer 1

我也想要这样的效果，但是我也没有看到任何实现。我决定在按钮的背景图像中使用 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;
};

你可以在这里查看我的小提琴。