Google如何在Google Ideas主页上创建扭曲效果？

Question

在谷歌主页思路的特点是歪曲的一些文字,并用静态音效按钮的外观,以模拟为内容的转变,从一个项目到下一个信号干扰的动画.

这是一个Gif,以防他们改变设计:

他们如何实现这一目标？我可以看到开发工具中的类和样式,所以JavaScript肯定会涉及到,但我找不到脚本本身的相关部分.

Answer 1

它并不难,特别是对于html2canvas和canvas-glitch.

基本上你只需要将DOM元素转换为画布,然后操纵图像数据以实现毛刺效果.有了这两个库,那个任务变得非常简单.

html2canvas(node, {
    onrendered: function (canvas) {
        // hide the original node
        node.style.display = "none";
        // add the canvas node to the node's parent
        // practically replacing the original node
        node.parentNode.appendChild(canvas);
        // get the canvas' image data
        var ctx = canvas.getContext('2d');
        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        // glitch it
        var parameters = { amount: 1, seed: Math.round(Math.random()*100), iterations: 5, quality: 30 };
        glitch(imageData, parameters, function(imageData) {
            // update the canvas' image data
            ctx.putImageData(imageData, 0, 0);
        });
    }
});

点击此处观看演示:https://jsfiddle.net/ArtBIT/x12gvs1v/