famo.us - 如何实现google paper按钮效果

Question

谷歌的纸张/ Material 设计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-click-effect-google-material-design

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

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

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

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

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

Answer 1

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

有两种Transitionables，一种用于渐变的直径，一种用于渐变的不透明度。这两个都在交互后重置。当用户单击按钮时，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;
};

您可以查看 my fiddle here .