尝试用 vue 实现灭霸打响指英雄消失的效果 demo

kelvinlee 发布于2019-05-23 16:26 / 2424人阅读

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

写在前面

灭霸打响指的消失效果。效果来源于 Google 搜索“灭霸” 或者 “thanos”。算是蹭热度的一个 Feature, 我通过 F12 试图去查看是如何实现的，也抠了一些音频、图片资源下来。后来在 github 上找到了一个现有的项目 Thanos_Dust, 所以参考了部分它的代码。其实它的代码已经算比较完善了，在它的基础上，我用 vue 来写了一下，加了一些英雄，修复了一些 bug ，加了一些效果之类的。

demo

点击一下手套，伴随音效和响指的动画，会有一半的英雄消失。

消失之后，再点一下，消失的英雄又会回来。

可以点击下面的链接体验一下

demos

细节

随机选取一半的英雄，是通过下面的算法进行选取的：

arr.sort(function() {
  return 0.5 - Math.random();
});

被选中的英雄灰飞烟灭的效果解释：

使用 html2canvas 库将每一个英雄所在的 dom 节点渲染为一个 canvas 节点

通过 generateFrames 方法，将整块的 canvas 画布图像按像素分割成许多块

创建一个跟选中的英雄所在的 dom 节点同一个位置、同样的大小的容器覆盖原 dom 节点

把第二步创建的块绘制到新的画布上，并都通过 appendChild 方法添加到第三步创建的父容器中

随机设置每一块的 rotate 角度和 translate 像素，就能完成灰飞烟灭的效果

将被覆盖的英雄的 dom 节点设置为不可见的，就完成了响指操作。

翻转时间，英雄又回来的效果是将原来的 dom 节点设置为可见的，并加了回复动画。（ google 的原版恢复动画是将 color 设置为 green ，因为这里没什么文字效果并不明显，就设置成了 background-color ）

最后

整个过程其实跟 vue 没什么关系，无论用什么前端技术栈都可以。以前也没有接触过 canvas ，似乎觉得还有点意思，后面可能慢慢还会做一些改动，会继续学习 canvas 。最后附上 github 地址.

混合云 idc机房托管 js 消失动画效果 js实现f11的效果环信语音聊天vue demo vue 集成webrtc实时音视频demo

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

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

十分钟实现灭霸打响指灰飞烟灭的效果

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

Wildcard 2019-05-22 18:00 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
从灭霸的无限手套说起

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

whatsns 2019-08-23 17:14 评论0 收藏0