从灭霸的无限手套说起

Mertens 发布于2019-07-01 12:44 / 3078人阅读

摘要：前两天看到搜索有个彩蛋，搜索灭霸或者，点击右边的无限手套触发彩蛋，打个响指，消灭一半的搜索结果条目，消失特效类似电影里的。但是百度的这个页面样式类是动态的，还要把整个内容也输出，而且很多图片大概是经过了什么处理，没权限显示不了，遂放弃。

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

最近妇联4在热映，先剧透两个精彩片段。

前两天看到Google搜索有个彩蛋，搜索灭霸或者thanos，点击右边的无限手套触发彩蛋，打个响指，消灭一半的搜索结果条目，消失特效类似电影里的。

首先分析下这个彩蛋主要包括

点击手套动画效果

消失的搜索条目的粒子效果

接下来是从以下方面着手

html页面

DOM转canvas

粒子效果

其他包括音效、页面平滑滚动等

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

云服务器 GPU云服务器灭霸说起说起分布式存储说起分布式存储大家可能都会觉得这是一个

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/31369.html

从灭霸的无限手套说起

摘要：前两天看到搜索有个彩蛋，搜索灭霸或者，点击右边的无限手套触发彩蛋，打个响指，消灭一半的搜索结果条目，消失特效类似电影里的。但是百度的这个页面样式类是动态的，还要把整个内容也输出，而且很多图片大概是经过了什么处理，没权限显示不了，遂放弃。本文不是技术文章，只是单纯记录下最近妇联4在热映，先剧透两个精彩片段。showImg(https://segmentfault.com/img/bV...

whatsns 2019-08-23 17:14 评论0 收藏0
漫话：如何给女朋友解释灭霸的指响并不是真随机"消灭"半数宇宙人口的？

摘要：软件实现的是伪随机数。有限状态机不能产生真正的随机数的。复联中，灭霸打了指响之后，复仇者联盟中存活和死亡的名单其实并不是随机的。可见，灭霸的指响抹除过程并不是随机的。综上，灭霸的指响抹除过程不符合随机性不可预测性以及不可复现性。showImg(https://user-gold-cdn.xitu.io/2019/5/7/16a91fc63239db4d);周末，陪女朋友去电影院看了《复仇者联...

WalkerXu 2019-05-23 17:31 评论0 收藏0
十分钟实现灭霸打响指灰飞烟灭的效果

摘要：全部文章列表从模块化到私有仓库搭建十分钟实现灭霸打响指灰飞烟灭的效果是时候开发你自己的扩展插件了看过复仇者联盟的都知道，灭霸作为计划生育政策的坚定支持者和执行者，一个响指清除了宇宙中二分之一的生命。电影中被清除的生命灰飞烟灭的镜头很是酷炫，所以在复联4上映后，那个不存在的网站google，推出了一个彩蛋，如果在搜索框搜索灭霸，会出现一个手套的按钮，点击后会让网页搜索结果消失一半。 showI...

Wildcard 2019-05-22 18:00 评论0 收藏0
复仇者联盟谁才是绝对 C 位？Python分析9万条数据告诉你答案

摘要：数据库文件已经超过了了。复联从开始便是漫威宇宙各路超级英雄的集结，到现在的第部，更是全英雄的汇聚。所以，灭霸出现的次数居然高于了钢铁侠。情感分析，又称为意见挖掘倾向性分析等。 showImg(https://segmentfault.com/img/remote/1460000019095022); 作者 | 罗昭成责编 | 唐小引《复联 4》国内上映第十天，程序员的江湖里开始流传这...

shiweifu 2019-07-31 10:23 评论0 收藏0
尝试用 vue 实现灭霸打响指英雄消失的效果 demo

摘要：写在前面灭霸打响指的消失效果。算是蹭热度的一个我通过试图去查看是如何实现的，也抠了一些音频图片资源下来。点击一下手套，伴随音效和响指的动画，会有一半的英雄消失。翻转时间，英雄又回来的效果是将原来的节点设置为可见的，并加了回复动画。写在前面灭霸打响指的消失效果。效果来源于 Google 搜索灭霸或者 thanos。算是蹭热度的一个 Feature, 我通过 F12 试图去查看是如何实现的...

kelvinlee 2019-05-23 16:26 评论0 收藏0