Vue灭霸打响指效果

             版权声明：本文为博主原创文章，未经博主允许不得转载。                    https://blog.csdn.net/GreekMrzzJ/article/details/89821464               </div><link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-f57960eb32.css"><div id="content_views" class="markdown_views prism-atom-one-dark"><!-- flowchart 箭头图标 勿删 --><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg><h3><a name="t0" target="_blank"></a><a id="_0" target="_blank"></a>写在前面</h3>

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

demo

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

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

demos

细节

随机选取一半的英雄，是通过下面的算法进行选取的：
```
arr.sort(function() {return 0.5 - Math.random();
});
```
- 1
- 2
- 3
被选中的英雄灰飞烟灭的效果解释：
1. 使用 html2canvas 库将每一个英雄所在的 dom 节点渲染为一个 canvas 节点
2. 通过 generateFrames 方法，将整块的 canvas 画布图像按像素分割成许多块
3. 创建一个跟选中的英雄所在的 dom 节点同一个位置、同样的大小的容器覆盖原 dom 节点
4. 把第二步创建的块绘制到新的画布上，并都通过 appendChild 方法添加到第三步创建的父容器中
5. 随机设置每一块的 rotate 角度和 translate 像素，就能完成灰飞烟灭的效果
6. 将被覆盖的英雄的 dom 节点设置为不可见的，就完成了响指操作。
翻转时间，英雄又回来的效果是将原来的 dom 节点设置为可见的，并加了回复动画。（ google 的原版恢复动画是将 color 设置为 green ，因为这里没什么文字效果并不明显，就设置成了 background-color ）

最后

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

        </div><link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-258a4616f7.css" rel="stylesheet"></div>

Vue灭霸打响指效果相关推荐

尝试用 vue 实现灭霸打响指英雄消失的效果 demo
写在前面灭霸打响指的消失效果.效果来源于 Google 搜索"灭霸" 或者 "thanos".算是蹭热度的一个 Feature, 我通过 F12 试图去查看是 ...
Problem C 灭霸打响指
Problem Description 那一天,灭霸终于还是集齐了六枚无限宝石,但在打响指消灭一半生命之前,他决定考一考你. 复仇者联盟有n位成员,每位成员的战斗力是si. 灭霸打响指后会消灭一半复仇 ...
python偷回灭霸的宝石_Python视频处理案例：反转灭霸打响指的视频动画（源代码）！...
<复仇者联盟4:终局之战>的宣传口号是逆转无限(to reserve infinity),在电影中,钢铁侠研究出了可以穿越时间的量子战甲,复仇者联盟人手一件,穿越时空回到过去带回了六颗无限 ...
十分钟实现灭霸打响指灰飞烟灭的效果
看过复仇者联盟的都知道,灭霸作为计划生育政策的坚定支持者和执行者,一个响指清除了宇宙中二分之一的生命.电影中被清除的生命灰飞烟灭的镜头很是酷炫,所以在复联4上映后,那个不存在的网站google,推出了 ...
微博html5版灭霸,十分钟实现灭霸打响指灰飞烟灭的效果
看过复仇者联盟的都知道,灭霸作为计划生育政策的坚定支持者和执行者,一个响指清除了宇宙中二分之一的生命.电影中被清除的生命灰飞烟灭的镜头很是酷炫,所以在复联4上映后,那个不存在的网站google,推出了 ...
十分钟实现灭霸打响指灰飞烟灭的效果，android路由器app
//处理canvas的代码 const ctx = canvas.getContext('2d'); const imageData = ctx.getImageData( 0, 0, canvas. ...
Chrome 灭霸打响指彩蛋动画 Android实现
github地址在手机chrome搜索灭霸后,会出现一个手套的图片,点击图片后会出现一个彩蛋,即一半的搜索结果会消失.消失的动画如下图所示: 可以看到这个动画大致可以理解为:将当前view分为两份 ...
黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果一.总结一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...

Vue灭霸打响指效果

demo

细节

最后

Vue灭霸打响指效果相关推荐

最新文章

热门文章