如何实现Google Paper Button效果 [英] How to implement google paper button effects

问题描述

Google的论文/材料设计 http://www.google.com /design/spec/material-design/introduction.html 看起来真的很干净，我认为它会得到很多使用. Polymer具有大量准备就绪的纸质元素"，网络社区已经在以各种不同的方式来实现它.对于这个问题，我专门研究按钮的点击效果.

Google’s paper / material design http://www.google.com/design/spec/material-design/introduction.html is a really clean look that I think is going to see a lot of use. Polymer has a bunch of "paper-elements" ready to go and the web community is already playing with different ways to implement it. For this question I’m specifically looking at the button click effect.

它具有激活色彩的波纹，这种色彩从您的点击中散发出来.这是聚合物的示例: http://www.polymer- project.org/components/paper-elements/demo.html#paper-button ，这是一个CSS jQuery示例:

It has a ripple of activation color that radiates from your click. Here is polymer’s example: http://www.polymer-project.org/components/paper-elements/demo.html#paper-button , here is a css jquery example: http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design

我的问题是如何实施它?

My question is how to go about implementing it?

看一下聚合物示例，当您将其按下鼠标时，它会发出背景色偏移，而不是其他示例中的彩色不透明波纹.它会在达到极限时保持，然后在鼠标向上移动时会迅速淡出.

Taking a look at the polymer example When you mousedown it radiates a background color shift maybe instead of the colored opacity ripple in the other example. It holds when it reaches it’s limit and then on mouseup it quickly fades out.

因为我很容易看到第二个示例的代码，所以我尝试以与之相似的方式实现它，但是使用触摸事件而不是单击，因为我希望如果我所做的只是触摸，它就可以保持效果但不发布.

Since I could easily see the code behind the second example I tried implementing it in a similar fashion as it had but with the exception of using touch events instead of click since I wanted it to hold the effect if all i did was touch but not release.

我尝试缩放，转换位置以设置不透明度，但获得接触的位置以及从触摸点向外辐射的效果超出了我的范围，或者至少从我迄今投入的时间开始.实际上，我只是动画部门的经验不足.

I tried scaling, transitioning the position setting the opacity but getting the placement and the effect of radiating outwards from the point of touch was beyond me or at least from the time I’ve invested so far. In truth I’m just under experienced in the animation department in general.

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

Any thoughts on how to implement it?

推荐答案

我也想要这种效果，但是我也没有看到任何实现.我决定在按钮的背景图片中使用CSS径向渐变.我将纹波(渐变的圆)居中在触摸/鼠标点上.我扩展了Surface模块，以适应渲染周期.

I also wanted this effect, but I've not seen any implementations either. 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.

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

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.

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

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.

我不能告诉你我是否已经使用最佳实践来实现波纹按钮效果，但是我喜欢结果.

I can't tell you whether I've implemented the ripple button effect using best practices, but I like the result.

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;
};

您可以在此处查看我的小提琴.

这篇关于如何实现Google Paper Button效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！