从灭霸的无穷手套提及

2019年9月1日 221次阅读 来源: vczhan

本文不是技术文章，只是纯真记录下

最近妇联4在热映，先剧透两个出色片断。
《从灭霸的无穷手套提及》《从灭霸的无穷手套提及》

前两天看到Google搜刮有个彩蛋，搜刮灭霸或许thanos，点击右侧的无穷手套触发彩蛋，打个响指，祛除一半的搜刮结果条目，消逝殊效类似影戏里的。
《从灭霸的无穷手套提及》

起首剖析下这个彩蛋重要包含

  1. 点击手套动画结果
  2. 消逝的搜刮条目的粒子结果

接下来是从以下方面动手

  1. html页面
  2. DOM转canvas
  3. 粒子结果
  4. 其他包含音效、页面腻滑转动等

html页面（扒网页）

起首消除扒Google搜刮页面，由于效劳器用的是国内阿里云接见不了。

然后就盘算扒百度的搜刮页，用的是PHP顺序，我晓得的能够猎取页面代码的有file_get_content和cURL函数，虽然拿到了页面代码，然则只需搜刮结果那些DOM的话用正则比较贫苦，搜了下找到phpQuery库，它能像jQuery操纵那样拿到指定DOM，和Node.js的cheerio包类似。然则百度的这个页面款式类是动态的，还要把全部style内容也输出，而且许多图片大概是经过了什么处置惩罚，没权限显现不了，遂摒弃。

接着扒斗鱼的直播列表页，返回一堆乱码，气力告退了。末了挑选了类似的企鹅电竞直播列表页，页面算是搞定了。

DOM转canvas

前端有html2canvas和dom-to-image两个库能够把页面指定元素转化为画布或图片，html2canvas比较著名些，初期我也是用这个库做前端截图功用（https://imusic.github.io/clip/），然则它对CSS3的处置惩罚并不好，厥后我发现了dom-to-image这个库，它对CSS3的处置惩罚就比较好了，而且体积更小，所以又用这个库替换了（https://demo.vczhan.com/clip/）。
《从灭霸的无穷手套提及》

不过由于要转化的内容里有跨域的图片，canvas对此做了限定，我们需要对图片做代办处置惩罚。dom-to-image这个库并没有供应相干的代办插件，末了照样用html2canvas这个库。页面没有庞杂的元素，而且这个库最近做了更新，对CSS3支撑好了些，作者还供应了两种言语的代办，分别是Python版本的和Node.js版本的，不过我挑选了其他人写的PHP版本。前端只需设置相干参数就能够。效劳器端则会在文件目次下新建cache目次寄存图片并返回给前端衬着到画布上。（不知可否改成不存储图片文件而是改成输出base64或许blob数据）

html2canvas(node, {
  proxy: 'html2canvasproxy.php'
}).then(canvas => {
  // do stuff
})

粒子结果

粒子结果比较难的部份是怎样调解各个参数到适宜的值还要保证动画不卡。实在js盘算历程并不会让动画卡顿，重要瓶颈在衬着阶段。

衬着部份原来用遍历粒子直接绘制，但由于粒子较多，动画看起来有点卡。

render() {
  context.clearRect(0, 0, sw, sh)

  let particles = this.particles

  for (let i = 0, particle; particle = particles[i++];) {
    if (particle.state === 'dead') continue

    context.save()
    context.translate(particle.x, particle.y)

    context.fillStyle = particle.color
    context.globalAlpha = particle.alpha
    context.beginPath()
    context.fillRect(0, 0, 1, 1)
    context.restore()
  }
}

厥后改成每次衬着时，先获得空缺画布的图象数据，然后遍历粒子，给图象数据对应的位置加上rgba，末了将图象数据放回画布。

render() {
  // context.clearRect(0, 0, sw, sh)
  let particles = this.particles

  const imageData = context.createImageData(sw, sh)
  const buffer32 = new Uint32Array(imageData.data.buffer)

  for (let i = 0, particle; particle = particles[i++];) {
    if (particle.state === 'dead') continue

    const {x, y, color: {r, g, b}, alpha: a} = particle
    const pos = y * sw + x

    buffer32[pos] = r | (g << 8) | (b << 16) | (a << 24)
  }

  context.putImageData(imageData, 0, 0)
}

Google谁人页面是用了多个canvas，能够参考下面的粒子
https://codepen.io/birjolaxew…

其他

其他就是些细节调解，比方点击手套的过渡动画并加上音效，过渡时候和耽误要逐步调到适宜的使动画与音效对应。当某个DOM要消逝也要加上音效，而且页面腻滑转动，使其位于屏幕中间，能够直接用scrollIntoView这个要领。

node.scrollIntoView({behavior: 'smooth', block: 'center'})

素材都能够从Google彩蛋页里提取，另有其他一些细节就不一一赘述了。

末了放上本次的demo

    原文作者：vczhan
    原文地址: https://segmentfault.com/a/1190000019035021
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞