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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用 vue 实现灭霸打响指英雄消失的效果附demo，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1663字，纯文字阅读大概需要3分钟。

内容图文

写在前面

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

demo

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

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

demos

细节

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

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

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

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 地址.

总结

以上所述是小编给大家介绍的使用 vue 实现灭霸打响指英雄消失的效果附,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

内容总结

以上是互联网集市为您收集整理的使用 vue 实现灭霸打响指英雄消失的效果附demo全部内容，希望文章能够帮你解决使用 vue 实现灭霸打响指英雄消失的效果附demo所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---