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


Posted in Javascript onMay 06, 2019

写在前面

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

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

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

demo

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

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

demos

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

细节

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

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 实现灭霸打响指英雄消失的效果附,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
跟我学习javascript的this关键字
May 28 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
vue如何截取字符串
May 06 #Javascript
用vscode开发vue应用的方法步骤
May 06 #Javascript
微信小程序合法域名配置方法
May 06 #Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 #Javascript
微信小程序上线发布流程图文详解
May 06 #Javascript
ES6的解构赋值实例详解
May 06 #Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 #Javascript
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python3编码问题汇总
2016/09/06 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
python的dict判断key是否存在的方法
2020/12/09 Python
python 实现客户端与服务端的通信
2020/12/23 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
八一慰问活动方案
2014/02/07 职场文书
大学运动会入场词
2014/02/22 职场文书
实习生岗位职责
2014/04/12 职场文书
人力资源管理求职信
2014/08/07 职场文书
单位租房协议书样本
2014/10/30 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis