使用 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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
符合标准的js表单提交的代码
Sep 13 Javascript
js arguments.callee的应用代码
May 07 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
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
PHP连接MySQL数据的操作要点
2015/03/20 PHP
php微信开发接入
2016/08/27 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
详解jQuery事件
2017/01/13 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
JavaScript Array对象使用方法解析
2019/09/24 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
Python 12306抢火车票脚本
2018/02/07 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Django设置Postgresql的操作
2020/05/14 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
shell程序中如何注释
2012/02/17 面试题
网页设计个人找工作求职信
2013/11/28 职场文书
服务承诺口号
2014/05/22 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python